Cara Memasang Breadcrumbs/Navigasi Untuk Blogspot

susiloblog.com - Sebelum kau memasang breadcrumb di blogspot, apakah kau sudah tau apa itu breadcrumbs dan apa keuntungannya jikalau breadcrumbs dippasang diblog?. Breadcrumbs merupakan navigasi blog yang berada diatas judul artikel. Dengan adanya breadcrumbs maka para pengunjung blog akan dimudahkan untuk kembali kehalaman depan (tinggal klik "home") atau menemukan postingan/artikel sesuai dengan kategori/label. Selain itu dengan breadcrumbs maka artikel kau tidak akan kelihatan usang.

Contoh template belum ada breadcrumbs

kelihatan tahun dan bulanya kan?. Kaprikornus kalau misal tanpa breadcrumbs terang sekali pengunjung akan sangat bosan klik link artikelmu. Karena mereka lebih menyukai artikel yang up to date.

Coba bandingkan dengan yang ini

Bagaimana?. artikelmu akan kelihatan up to date terus kan?. Maka dari itu breadcrumbs sangat anggun untuk SEO. Dengan adanya breadcrumbs ini akan meningkatkan traffic dari blog kamu.

Ini tampilan template blog yang menggunakan breadcrumbs

Sebenarnya tanpa disadari breadcrumbs secara otomatis sudah ada ditemplate blog (template yang dibentuk diatas 2014). Tapi kalau memang belum ada breadcrumnya kali ini aku akan menyebarkan cara memasang breadcrumbs di blog kamu

Cara memasang Breadcrumb di blog

1. Masuk ke blog

2. Masuk kemenu Template > Edit HTML

3. Cari arahan (CTRL+F) ]]></b:skin> dan simpan arahan ini diatasnya:

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

4. Selanutnya cari arahan <b:includable id='main' var='top'>, ganti dengan:

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

Sekarang dengan cara tersebut breadcrumbs sudah terpasang ditemplat kamu. Selamat mencoba.
Sumber https://www.susiloblog.com/