cara membuat breadcrumb di blogspot/blogger :: BREADCRUMB

cara membuat breadcrumb di blogspot/blogger :: BREADCRUMB -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.


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.

Semoga Artikel diatas dapat membuat sobat senang dan aku berharap dapat membantu serta bermanfaat bagi para sobat semuanya . Kami dari  INDONESIA DOCUMENTS menyampaikan trimakasi Atas Kunjungan Sobat...n_n dan jika ada yang kurang serta saran bagi kami silahkan teman teman bisa berkomentar di bawah ini...trimakasi...n_n  

TERIMA KASIH ATAS KUNJUNGAN SOBAT


Judul: cara membuat breadcrumb di blogspot/blogger :: BREADCRUMB
Ditulis oleh : Indonesia Documents Group
Anda sedang membaca artikel cara membuat breadcrumb di blogspot/blogger :: BREADCRUMB. Artikel ini dilindungi oleh hak Cipta kami dari www. myfreecopyright.com. Jika ingin mengutip, harap memberikan link aktif dofollow ke URL http://indonesiadocuments.blogspot.com/2012/08/cara-membuat-breadcrumb-di.html. Jika Tidak akan diproses hukum oleh DMCA Takedown dan berakibat buruk pada blog sodara . Terima kasih atas Perhatian saudara serta Terima Kasih telah berkunjung di blog ini.

No comments:

Post a Comment