Panduan Cara Membuat Breadcrumb Blog Khusus

Cara Membuat Breadcrumb Blog - Berbeda dengan artikel sebelumnya, cara membuat breadcrumb blog sederhana, tampilan breadcrumb yang muncul hanya menampilkan tag atau label artikel secara spesifik yang terpilih namun kalau menurut saya sich kalau cara membuat breadcrumb blog khusus ini hanya meminimalis tampilan tag atau label saya sehingga dengan menggunakan cara ini maka tag atau label yang sobat berikan untuk artikel blog sobat hanya menampilkan satu tag atau label saja, seperti tampilan gambar berikut ini

Bagaimana cara membuat breadcrumb blog seperti gambar diatas? Baca juga fungsi breadcrumb

1. Masuk ke akun Blogger sobat
2. Klik Template >> Edit HTML >> centang Expand Widget Template >> tekan Ctrl+F pada keyboard
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut ini tepat sebelum kode ]]></b:skin>
   .breadcrumbs{
   padding:5px 5px 5px 0;
   margin:0;font-size:95%;
   line-height:1.4em;
   border-bottom:4px double #cadaef}
5. Cari kode seperti ini : <div class='post hentry'>
6. Letakkan kode berikut ini tepat setelah atau sebelum kode <div class='post hentry'>
   <b:if cond='data:blog.homepageUrl == data:blog.url'>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <!-- 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 == &quot;true&quot;'> &#187;
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
   </b:if>
   </b:loop>
   <b:else/>
   &#187;Unlabelled
   </b:if>
   &#187; <span><data:post.title/></span>
   </b:loop>
   </span>
   </p>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;archive&quot;'>
   <!-- breadcrumb for the label archive page and search pages.. -->
   <p class='breadcrumbs'>
   <span class='post-labels'>
   <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
   </span>
   </p>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
   <p class='breadcrumbs'>
   <span class='post-labels'>
   <b:if cond='data:blog.pageName == &quot;&quot;'>
   <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
   <b:else/>
   <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/>
   </b:if>
   </span>
   </p>
   </b:if>
   </b:if>
   </b:if>
   </b:if>
7. Simpan template

Mudah bukan? Kini sobat sudah mengetahui cara membuat breadcrumb blog khusus seperti yang ada di artikel blog ini. Terimakasih dan semoga bermanfaat, jika ada pertanyaan silahkan komentari artikel ini, Cara Membuat Breadcrumb Blog Khusus