Membuat Breadcrumb Google di Blogger

Membuat Breadcrumb Google di Blogger. Memasang atau membuat google breadcrumb ini sangat penting dan sangat dibutuhkan untuk sebuah blog karena dengan memasang google breadcrumb, dapat menutupi salah satu kekurangan blogger yaitu alamat url posting yang terbatas dan kadang terlihat kurang bagus. Selain itu, dengan Google breadcrumb akan membuat blog kita di search engine google lebih terlihat rapi. Coba sobat lihat contoh Google Breadcrumb di bawah ini.

Cara Membuat Breadcrumb Google di Blogger

Pada artikel Membuat Breadcrumb Google di Blogger ini menampilkan semua label yang ada pada sebuah postingan, jadi akan terlihat lebih sempurna lagi dan cepat terindex di SERP [Search Engine Results Page]. Perlu diingat, jika sobat memiliki label yang banyak pada sebuah postingan atau mungkin postingan tersebut memiliki label yang cukup panjang, maka ini akan terlihat sedikit jelek. Usahakan jangan terlalu banyak label dan jangan terlalu panjang membuat label. Bagi yang berminat, silahkan ikuti langkah-langkah berikut ini.

Cara Memasang Breadcrumb Google di Blogspot / Blogger

• Langkah pertama sobat login dulu ke blog, itu pasti. kwa kwa kwa,,
• Seperti biasa, kita langsung menuju halaman Design [Rancangan] » Edit HTML » Ceklis Expand Widget Templates (jangan lupa selalu backup template sebelum editing). Jika sobat menggunakan tampilan baru, silahkan klik Template » Edit HTML » Lanjutkan » Ceklis Expand Widget Templates.
• Jika sobat telah memasang kode breadcrumb sebelumnya, silahkan delete [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 berikut ini tepat di atasnya (paste aja di atas 2 kode yang sobat temukan biar tidak bingung).

<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 <b:includable id='main' var='top'>

<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.wakrizki.net -->
<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.wakrizki.net -->
<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>

Sampai tahap ini silahkan simpan template sobat. Taraaaaaa, sobat berhasil Membuat Breadcrumb Google di Blogger.

Untuk mempercantik Breadcrumb google yang sudah sobat buat, sekarang tambahkan 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;
      }

Itu saja artikel blogger kali ini dan mudah-mudahan bermanfaat buat para sobat blogger. Happy blogging..

Referensi by http://www.bamz.us/

Artikel terkait :