Cara Membuat Breadcrumbs Blog

Cara Membuat Breadcrumbs Blog
Tutorial memasang Breadcrumbs di Blogpsot - Breadcrumbs adalah navigasi pada template blog yang dapat dibaca oleh search engine. Memasang Breadcrumbs merupakan bagian dari teknik optimasi blog on-page yang dapat menjadikan blog kita lebih SEO friendly, karena memiliki navigasi yang lebih terstruktur.

Memasang Breadcrumbs memang bukan sebuah keharusan. Akan tetapi, saat ini hampir semua template sudah menggunakan Breadcrumbs, karena selain bermuatan SEO ia juga akan menjadikan template blog terlihat lebih rapi dan menjadi indikasi bahwa pemilik blog bersangkutan merupakan seorang blogger yang profesional.

Cara memasang Breadcrumbs sangat mudah, dan bagi Anda yang membutuhkan tutorial cara memasang Breadcrumbs, berikut ini panduannya.


  • Masuk ke Blogger (Untuk mencegah hal-hal yang tidak diinginkan, ada baiknya back-up dulu template Anda).
  • Masuk ke menu/tab Template > EditHTML
  • Carilah kode ]]></b:skin> (untuk mempermudah pencarian tekan Ctrl+F).
  • Silahkan copy kode CSS Breadcrumbs dibawah, lalu paste tepat di atas kode  ]]></b:skin>

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

  • Kemudian cari kode seperti

<b:includable id='main' var='top'>
Jika sudah ketemu, gantilah 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'>
&#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, silakan klik tombol Simpan/Save.

Bukalah salah satu artikel Anda untuk melihat hasilnya. Jika sudah berhasil, maka Breadcrumbs yang Anda buat strukturnya akan seperti dibawah ini
Home » Berita » Internet » Akun Facebook Presiden SBY
Home » Tutorial Blog » Download Template Blog SEO Friendly Tebaru Gratis

Related posts: