susiloblog.com - Sebelum kau memasang breadcrumb di blogspot, apakah kau sudah tau apa itu breadcrumbs dan apa keuntungannya kalau 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?. Makara 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 mengembangkan cara memasang breadcrumbs di blog kamu
Cara memasang Breadcrumb di blog
1. Masuk ke blog
2. Masuk kemenu Template > Edit HTML
3. Cari instruksi (CTRL+F) ]]></b:skin> dan simpan instruksi 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 instruksi <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 == "static_page"'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == "item"'><!-- 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'>» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:loop>» <span><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == "archive"'><!-- breadcrumb for the label archive page and search pages.. --><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == "index"'><div class='breadcrumbs'><b:if cond='data:blog.pageName == ""'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span><b:else/><span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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 http://www.susiloblog.com/