Cara Menambah Breadcrumb di Blogger

Selamat sore sahabat blogger !!! Berjumpa lagi deh sama aq, hehehe... Sekarang, aq akan posting Cara Menambah Breadcrumb di Blogger. Nah... Udah pada tau nggk, apa itu breadcrumb ?!?! Bagi yang belum tau, silahkan sobat lihat dulu contoh nya di bawah ini :

Nah... Habis lihat screenshot tadi, pasti sobat udah pada tahu langsung kan... hehehe...

Breadcrumb adalah navigasi menu yang menunjukkan lokasi pengunjung pada halaman blog sobat. Menambah breadcrumb di blog ini juga dapat membantu pencarian blog sobat di mesin pencari dengan menambahkan kata kunci ke dalam postingan blog sobat.

Oke deh kalo gitu, yuk ikuti Tutorial di bawah ini !

Cara Menambah Breadcrumb di Blogger :

1. Login ke BLOGGER.

2. Tekan Ctrl+F, dan cari kode ini :

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

3. Tambahkan kode berikut tepat setelah kode di atas :

<b:include data='posts' name='breadcrumb'/>

4. Selanjutnya, cari kode berikut ini :

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

5. Ganti kode tadi dengan kode di bawah ini :

<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'>

6. Langkah berikutnya, cari kode di bawah ini :

]]></b:skin>

7. Kalau sudah, tambahkan kode di bawah ini tepat di atasnya :

.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

}

8. Simpan Template. :)

Selesai sudah deh pembuatannya, semoga bermanfaat bagi blog sobat !!! :)

Ditulis Oleh : Unknown ~ Tips and Trick, Download, Widget and Gadget, and Other Article

Sobat sedang membaca artikel tentang Cara Menambah Breadcrumb di Blogger. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terima kasih. <a href="http://fahrurrozi18.blogspot.com/2013/09/cara-menambah-breadcrumb-di-blogger.html" target="_blank">Cara Menambah Breadcrumb di Blogger</a>

:: Get this widget ! ::

Artikel terkait :