Cara Memasang Breadcrumbs/Navigasi Untuk Blogspot

Daftar Isi [Show]

susiloblog.com - Sebelum kamu memasang breadcrumb di blogspot, apakah kamu sudah tau apa itu breadcrumbs dan apa manfaatnya jika 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 kamu tidak akan kelihatan usang.

Contoh template belum ada breadcrumbs

kelihatan tahun dan bulanya kan?. Jadi kalau misal tanpa breadcrumbs jelas 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 bagus untuk SEO. Dengan adanya breadcrumbs ini akan meningkatkan traffic dari blog kamu.

Ini tampilan template blog yang memakai breadcrumbs

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

Cara memasang Breadcrumb di blog

1. Masuk ke blog

2. Masuk kemenu Template > Edit HTML

3. Cari kode (CTRL+F) ]]></b:skin> dan simpan kode 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 kode <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.