Cara Membuat Navigasi Breadcumb Di Postingan Blog

Cara Membuat Navigasi Breadcrumb Di Postingan Blog - Breadcrumb merupakan menu navigasi bertingkat/berurutan yang berada di atas judul postingan blog serta cara untuk memudahkan pengunjung mengetahui seluk-beluk/keseluruhan dalam website/blog yang di pasang navigasi breadcrumb. Selain itu, breadcrumb juga berguna dalam hal SEO karena bisa menentukan keywords/kata kunci yang bisa kamu tentukan sesuai labels blog.

Silahkan ikuti tutorial berikut :

1. Masuk ke Dashboard Blog
2. Klik Template
3. Pilih Edit HTML
4. Cari kode </style> atau ]]></b:skin>
   (Tekan CTRL + F untuk memudahkan pencarian)
5. Copy kode berikut, lalu paste diatas kode </style> atau ]]></b:skin>
   (Pilih salah satu yang cocok sesuai template blog kamu)
   
   .breadcrumbs{background-color:#dddddd;padding:5px 5px 5px 5px;margin-bottom:20px;margin-top:20px;font-size:12px;color:#000000;border:1px solid #666666;box-shadow:0 0 5px #b3b3b3;}
   
   Keterangan :
   • Kode berwarna merah adalah warna background breadcrumb, jika ingin transparan ganti aja dengan kode transparent
   • Kode berwarna kuning adalah jarak breadcrumb dengan postingan (margin-bottom) dan jarak breadcrumb dengan header (margin-top)
   • Kode berwarna hijau adalah ukuran dan warna huruf breadcrumb
   • Kode berwarna aqua adalah tebal garis breadcrumb
   • Kode berwarna pink adalah tipe garis breadcrumb (solid=garis biasa dan dashed=garis putus-putus)
   • Kode berwarna biru adalah warna garis breadcrumb
   • Kode berwarna ungu adalah efek bayangan/shadow, jika ingin tidak ada efek bayangan silahkan hapus kode tersebut (Dari box-...sampai...;) Jika sebaliknya tapi ingin warna efeknya berbeda silahkan ganti kode yang di garis bawah
6. Cari lagi kode <b:includable id='main' var='top'>
7. Hapus kode tersebut -> Ganti dengan kode berikut
   
   <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <!-- breadcrumb for the post page -->
   <b:loop values='data:posts' var='post'>
   <b:if cond='data:post.labels'>
   <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
   <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
   <b:loop values='data:post.labels' var='label'>
   &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
   </b:loop>
   &#187; <span><data:post.title/></span>
   </div>
   <b:else/>
   <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
   </b:if>
   </b:loop>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;archive&quot;'>
   <!-- breadcrumb for the label archive page and search pages.. -->
   <div class='breadcrumbs'>
   <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
   </div>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
   <div class='breadcrumbs'>
   <b:if cond='data:blog.pageName == &quot;&quot;'>
   <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
   <b:else/>
   <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
   </b:if>
   </div>
   </b:if>
   </b:if>
   </b:if>
   </b:if>
   </b:if>
   </b:includable>
   <b:includable id='main' var='top'>
   <b:include data='posts' name='breadcrumb'/>
8. Klik Simpan / Save
9. Selesai

Untuk cek berhasil/tidak breadcrumb yang sudah diterapkan sesuai tutorial diatas, silahkan menuju ke Google Webmaster Tools.

1. Klik DISINI
2. Copas salah satu URL Postingan blog ke kolom yang disediakan
3. Klik Pengujian
4. Selesai

Perlu diketahui, breadcrumb yang telah kamu pasang di template blog kamu tidak akan langsung terpasang dengan benar. Perlu beberapa hari untuk pengindexan dan pasti harus bersabar kawan, hehe.

Salam Luar Biasa :)

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: