Beranda Blogger

Cara Membuat Breadcrumbs di Blogspot

05.25
A+ A- Print Email
Cara Membuat Breadcrumbs di Blogspot
Cara Membuat Breadcrumbs di Blogspot - Pada kali ini kita akan membuat breadcrumbs di blog. 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
Dari penjelasang di atas dapat kita pahami bahwa breadcrumbs sangat bermanfaat bagi blog. Banyak para webmaster mengatakan membuat breadcrumbs di blog berguna meningkatkan seo blog. Tertarik untuk membuat breadcrumbs di blog, simak dulu fungsi breadcrumbs.

Fungsi Breadcrumbs Di Blogspot

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.

Cara Membuat Breadcrumbs di Blogspot
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 membuat dan memasang breadcrumbs ke blog anda guna meningkatkan kekuatan seo blog anda. Sejatinya, Pihak blogspot sendiri tidak menyediakan plugin breadcrumbs sehingga kita harus membuatnya sendiri. Nah, bagaimana cara membuatnya breadcrumbs di blog, simak langkah-langkah membuat breadcrumbs dibawah ini.


CSS Breadcrumbs

  • 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;}

HTML Breadcrumbs

  • 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 penjelasan saya mengenai cara membuat breadcrumbs di blogspot. Semoga artikel ini bermanfaat bagi kita semua. Mungkin anda tertarik untuk membaca artikel di bawah ini :