Cara Membuat BreadCrumb di Blog Versi II

Oleh: Pada: 3 February, 2018

Cara membuat Breadcrumb ini berbeda dengan cara yang  pernah saya posting  cara membuat breadcrumb sebelumnya, karena membuat breadcrumb dengan cara yang kedua ini, maka setiap kita menggunaka banyak label tidak akan banyak juga judul post kita yang ada di navigasi breadcrumb, bagi yang sudah menggunaka cara yang pertama, silahkan di standarkan dulu atu dihapus dulu kodenya, baik langsung saja kita ke TKP.

  • Pertama masuk blogger

 

  • Edit HTML centang Expand Widget Template

 

 

  • lalu masukkan kode CSS dibawah ini di atas Kode : ]]></b:skin>

 

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:11px;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

 

  • Setelah itu cari kode seperti dibawah ini :

 

<b:includable id=’main’ var=’top’>
 <!– posts –>
<div class=’blog-posts hfeed’>

<b:include data=’top’ name=’status-message’/&gt;

 

  • Kalau sudah ketemu hapu dan ganti dengan kode seperti dibawah ini :

 

<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:blog.homepageUrl == data:blog.url’>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div class=’breadcrumbs’>
Browse &#187; <a expr:href=’data:blog.homepageUrl’ rel=’tag’>Beranda</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>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<div class=’breadcrumbs’>
Browse &#187; <a expr:href=’data:blog.homepageUrl’>Beranda</a> &#187; Arsip untuk <data:blog.pageName/>
</div>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<div class=’breadcrumbs’>
<b:if cond=’data:blog.pageName == &quot;&quot;’>
Browse &#187; <a expr:href=’data:blog.homepageUrl’>Beranda</a> &#187; Seluruh Artikel
<b:else/>
Browse &#187; <a expr:href=’data:blog.homepageUrl’>Beranda</a> &#187; Artikel Pada Kategori <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id=’main’ var=’top’>
<!– posts –>
<div class=’blog-posts hfeed’>
<b:include data=’top’ name=’status-message’/>
<b:include data=’posts’ name=’breadcrumb’/>

 

  • Kalau sudah selesai silahkan simpan template dan lihat hasilnya.

 

Semoga berhasil dan selamat mencoba.


#blogger tutorial