Membuat Breadcrumb Navigation Blogger

Dari dulu aku pengen banget naruh Alur di atas postingan, tapi aku tak tau apa namanya (NDESO) dan ada yang bilang kalo namanya Breadcrumb tapi setelah ku cari di Google, yang keluar malah semacam kue gitu Hahaha itu dulu, lupain aja deh.....Langsung aja TO THE POINT....!!!!..
eee lupa, namanya Breadcrumb Navigation ...!

Step 1. Di Blogger Dashboard Click Design > Edit Html > Centang Expand Widget Templates

Step 2. Cari kode dibawah ini : (Klik Ctrl dan F untuk mencari kode)

 <b:include data='top' name='status-message'/>

 Step 3. Kemudian ganti dengan kode berikut :

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

 Step 4. Cari kode dibawah ini : (Klik Ctrl dan F untuk mencari kode)

 <b:includable id='main' var='top'>

 Step 5. Kemudian ganti dengan kode berikut :

 <b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!--Breadcrumbs code info @ http://zidhian.blogspot.com/-->

Step 6. Cari kode dibawah ini : (Klik Ctrl dan F untuk mencari kode)

 ]]></b:skin>

Step 7. Kemudian ganti dengan kode berikut :

 /* Breadcrumbs Css info @ http://zidhian.blogspot.com/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>

Step 8. Simpan Template.

Semoga Berhasil ..... Happy Blogging !!!

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari ZIDHIAN ONLINEblogspot.com di inbox anda: