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