Cara Buat Breadcrumb Terindeks Google di Blogger

Cara Buat Breadcrumb Terindex Google di Blogger . artikel berry blog kali ini adalah mengenai bagaimana cara membuat atau memasang breadcrumb di blogspot namun bukan hanya terindek di  blog kita saja , namun juga terindeks di mesin pencarian google, untuk contoh tampilan breadcrumb yang sudah terindex google seperti tampilan artikel www.berryhs.com di bawah ini :

Nah bagaimana ? tampilan hasil pencarian kita di google lebih menarik dan oke punya, dan juga ini akan membuat blog kita menjadi seo friendly serta lebih cepat terindex oleh mesin pencari google jika kita menggunakan fasilitas breadcrumb ini.

Untuk Cara Memasang Breadcrumb Google di Blogspot atau Blogger dengan mudah dan lengkap dari tutorial berry bog adalah sebagai berikut :

Pertama, sobat login dulu ke blog yaaa.

Kedua, kita langsung menuju halaman Design (Rancangan) >> Edit HTML >> Ceklis Expand Widget Templates (jangan lupa selalu backup template sebelum di edit ya sob ). Jika sobat menggunakan tampilan baru, silahkan klik Template >> Edit HTML >> Lanjutkan >> Ceklis Expand Widget Templates.

Jika sobat telah memasang kode breadcrumb sebelumnya, silahkan hapus dulu.

Kemudian sobat cari kode <b:include data='top' name='status-message'/> biasanya ada 2 kode tersebut. Kalau sudah di temukan, silahkan paste kode merah dibawah berikut ini tepat di atasnya , pilih salah satunya namun kalau bingung mau pilih yang mana copas aja ke kedua duanya.

<b:include data='posts' name='breadcrumb'/>

Sekarang cari kode <b:includable id='main' var='top'> dan kalau sudah ketemu, paste kode berikut tepat di atas kode biru tadi :

<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 www.berryhs.com -->
<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 and search pages www.berryhs.com  -->
<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>

Sekarang untuk mempercantik tampilan breadcrumbnya sobat bisa gunakan cara ini dengan menambahkan sedikit sentuhan CSS berikut ini yang perlu sobat tambahkan di atas kode ]]></b:skin>

.breadcrumbs{
      margin-left:10px;
      padding: 5px 0;
      border-bottom: 1px dotted;
      line-height:1.4em;
      }

Lalu save template sobat dan sekarang sobat sudah memiliki breadcrumb yang seo friendly.
Nah demikian artikel berry blog mengenai tutorial blog untuk membuat breadcrumb di blog agar terindeks google dengan cepat.