Baru!!! Cara Membuat Menu Navigasi Breadcrumbs

Menu Breadcrumbs

Cara Membuat Menu Navigasi Breadcrumbs - Cara mudah Membuat Navigasi Breadcrumb Di Blog atau Membuat menu navigasi berurutan di atas artikel posting yang biasanya disebut juga Menu breadcrumb. Memasang  Menu breadcrumbs di blog merupakan suatu keuntungan buat para blogger karena selain sebagai penghias blog memasang breadcrumbs juga merupakan salah satu teknik SEO.

Menu breadcrumbs adalah menu/navigasi yang berada di bagian atas posting yang menunjukkan keberadaan dari suatu artikel/postingan dengan urutan home >> label dari Artikel >> judul Artikel. Dengan Menu Breadcrumbs  ini pembaca diberi kemudahan untuk mengetahui posisi/lokasi artikel yang dibaca.


Simak Cara Membuat Menu Breadcrumbs:

1. Login ke blogger dengan akun sobat
2. Pilih Rancangan >> Edit HTML >> dan Centang Expand Template Widget
3. Biasakan untuk membeckup template terlebih dahulu.
4. Cari kode ]]></b:skin>, untuk memudahkan pencarian gunakan Ctrl + F
5. Copy paste kode berikut di atas kode ]]></b:skin>

.breadcrumbs {

padding:8px 0px 10px 5px;

margin: 5px 5px 5px 5px;

font-size:88%;

border:1px solid #c5c5c5;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;}

6. Setelah itu cari kode

<div class='post hentry uncustomized-post-template'>  atau  <div class='post hentry'>

7. Letakkan  kode dibawah ini tepat dibawah kode di atas

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Your Are Here</span><img src='http://3.bp.blogspot.com/-mAOFf5pN64k/TzTogRPxZcI/AAAAAAAAAkA/PPIhtnsp5Y0/s1600/abi_breadcrumbs_agenpulsa.png'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

&#187;

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

</b:loop>

&#187;

</b:if>

<data:post.title/>

</div>

</b:if>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Browse</span><img src='http://3.bp.blogspot.com/-mAOFf5pN64k/TzTogRPxZcI/AAAAAAAAAkA/PPIhtnsp5Y0/s1600/abi_breadcrumbs_agenpulsa.png'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

&#187; Archives for <data:blog.pageName/>

</div>

</b:if>

7. Simpan Template dan selesai


Demikian Cara Membuat Menu Navigasi Breadcrumbs

Semoga bermafaat….


 Menu Breadcrumbs ala Agen Pulsa.com

Artikel Terkait