Cara Membuat Breadcrumbs di Blogspot

Cara Membuat Breadcrumbs di Blogspot - Pernahkan anda mendengar istilah Breadcrumbs?. Bagi yang belum pernah mendengar atau tidak tau sama sekali mengenai istilah Breadcrumbs, saya akan menjelaskan sedikit istilah tersebut. Menurut Wikipedia, Breadcrumbs bisa didefinisikan sebagai berikut : 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. Breadcrumbs biasanya terlihat seperti ini:

Home page> Nama Kategori> Judul Postingan

atau

Home page: Nama Kategori: Judul Postingan

Fungsi Breadcrumbs untuk blog

Fungsi breadcrumbs sendiri adalah sebagai navigasi konten guna mempermudah pengguna atau pembaca blog anda untuk mengakses konten yang memiliki label yang sama dengan konten yang di baca pengguna. Breadcrumbs juga berguna untuk mempercepat dan mempermudah konten terindex oleh google.

Tulisan di dalam kotak merah adalah contoh breadcrumbs yang saya ambil dari mesin pencarian google.

Ada banyak pendapat mengenai kemunculan breadcrumbs di mesin pencari google sesuai dengan konten blog. Ada yang berpendapat bahwa breadcrumbs akan hanya muncul jika blog sobat bernilai pagerank 3 atau lebih. Namun ada juga yang berpendapat sebaliknya. Namun ada baiknya anda memasang breadcrumbs ke blog anda guna meningkatkan kekuatan seo blog anda. Sejatinya, Pihak blogspot sendiri tidak menyediakan plugin breadcrumbs sehingga kita haru membuatnya sendiri. Nah, bagaimana cara membuatnya, simak langkah-langkah membuat breadcrumbs di bawah ini.

Cara membuat Breadcrumbs di Blogspot

• Login di Blogger 
• Pilih Template 
• Pilih Edit HTML
• Centang Expand Widget Templates 
• Kemudian cari kode ]]>
• Copy kode di bawah ini dan paste tepat di atas kode ]]>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:85%;
line-height: 1.4em;}

• Kemudian cari kode <b:includable id='main' var='top'> gunakanlah CTRL+F untuk mencari
• Ganti kode <b:includable id='main' var='top'> dengan kode yang 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'>
&#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'/>

Terakhir simpan template anda. Demikianlah postingan saya mengenai cara membuat breadcrumbs di blog. Demikianlah penjelasan saya mengenai cara membuat breadcrumbs di blogspot. Semoga artikel ini bermanfaat bagi kita semua. Mungkin anda tertarik untuk membaca artikel di bawah ini :

• Cara memasang readmore otomatis di blog
• Cara membuat daftar isi blog