Cara Membuat Breadcrumbs di Blogspot

Cara Membuat Breadcrumbs di Blogspot - Selamat datang kembali sahabat CK di blog Catatan Kecilku, semoga kita semua berada dalam kesehatan dan lindungan Allah SWT. Amiin...

Setelah kemarin CK membahas tentang Optimasi SEO On Page, mengenai "cara merubah title blog agar lebih seo friendly" pada hari ini pun kita akan membahas yang tak lepas dari yang namanya optimasi SEO On Page. Tentang apakah itu ? ya tepat sekali, kali ini CK ingin berbagi sedikit pengalaman tentang bagaimana cara membuat breadcrumbs di blogspot yang tentunya muncul juga di halaman tampil serp seperti google.

Apa itu breadcrumbs ?

Menurut artikel yang pernah saya baca di wikipedia indonesia, Breadcrumbs biasanya muncul secara horizontal di bagian atas sebuah halaman web, biasanya ada di bawah bar judul atau header. Breadcrumbs menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, meskipun dapat menggunakan simbol lainnya (seperti »atau>), serta beragam grafik.

• Contoh tampilan breadcrumbs pada postingan :





• Contoh tampilan breadcrumbs pada serp  :





klik gambar untuk memperbesar

Menurut pemahaman CK sendiri dengan memasang breadcrumbs pada blog dapat mempermudah googlebot dalam mengcrawler artikel sehingga blog sahabat CK lebih SEO friendly dan tidak hanya itu hal tersebut juga menurut CK sendiri terlihat lebih rapih apabila artikel kita telah muncul di serp.

Bagaimana cara membuat breadcrumbs di blogspot ? Berikuti ini adalah langkah-langkahnya...

• Terlebih dahulu sahabat CK masuk kedalam halaman dashboard,
• Pilih menu template,
• Sebelum dilanjutkan alangkah baiknya anda back up terlebih dahulu template-nya dengan mengklik cadangkan/pulihkan,
• Klik tombol Edit HTML
• Centang Expand Widget Template
• Cari kode ]]></b:skin
• Setelah ketemu, Letakkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

• Setelah itu, cari kode seperti dibawah berikut ini 

<b:includable id='main' var='top'>

• Kemudian ganti kode tersebut dengan kode dibawah ini

<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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</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'/> 

• Langkah terakhir adalah klik Simpan Template

Apabila tidak ada masalah maka hasilnya akan terlihat seperti kedua gambar diatas dan letak breadcrumbs yang telah sahabat CK buat berada pada posisi diatas judul artikel. Dengan demikian berakhir pula perjumpaan kita mengenai pembahasan cara membuat breadcrumbs di blogspot. Semoga bermanfat ! ! !