Bagaimana Cara Memasang Breadcrumb di Blog

Bagaimana Membuat Breadcrumb pada Blog, supaya breadcrumb tersebut tampil untuk setiap posting artikel Anda. Sebetulnya cara memasangnya tidak terlalu sulit. Fungsi breadcrumb ini termasuk salah satu Tips SEO juga. Karena menurut pembahasan, teknik pemasangan breadcrumb di blog ini, akan mempengaruhi mesin pencari supaya lebih cepat dalam mengenali struktur setiap blog yang dikunjunginya.

Selain itu, pemasangan breadcrumb ini juga merupakan salah satu teknik membuat link antar halaman, sehingga halaman yang satu dengan halaman yang lain dapat saling terhubung. Tentu saja dengan begitu akan memberikan efek yang sangat baik terhadap pagerank blog.

breadcrumb

Nah, untuk memasang breadcrumb ini silahkan Anda ikuti caranya sebagai berikut;
  • Pertama Login ke akun Blogger Anda.
  • Lalu klik menu Template
  • Lakukan backup template terlebih dahulu, untuk menjaga jika terjadi kesalahan pada saat menambahkan kode.
  • Jika sudak di backup silahkan Anda klik Edit HTML
  • Lalu klik Format Template
  • Cari kode ]]></b:skin
  • Kemudian letakkan kode di bawah tepat di atas kode ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
  • Lalu cari lagi kode di bawah ini:
<b:includable id='main' var='top'>
  • Sekarang Anda ganti kode di atas tadi dengan kode yang ada di bawah 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'/>

  • Jika sudah kemudian klik Simpan Perubahan. Apabila tahap yang Anda lakukan sudah sesuai dengan yang saya jelaskan diatas, maka Breadcrumb seharusnya sudah terlihat seperti contoh pada gambar dibawah ini.
memasang breadcrumb

Demikian bagaimana cara memasang breadcrumb pada blog Anda. Tidak terlalu sulit bukan. Itulah posting saya dalam kesempatan ini. Semoga artikel ini ada manfaatnya, dan bisa membantu bagi blogger pemula, karena siapa mengetahui mungkin masih ada yang belum paham mengenai bagaimana cara memasang breadcrumb ini. Terimakasih telah berkunjung ke blog ini.

Post a Comment

0 Comments