Cara Membuat Navigasi Breadcrumb di blog dan terindex di google

Cara Membuat Navigasi Breadcrumb di blog dan terindex di google. Kali ini saya akan share dengan artikel yang memang penting, bisa juga untuk membagus-bagusin blog kita dan yang terpenting mempermudah pengunjung untuk mengkelik halaman diatas postingan tersebut seperti kategori postingan maupun kembali ke home page. Dengan cara ini juga kita bisa mendapatkan kekuatan dengan menambah kategori pada Index Search Engine, sehingga bisa memberikan efektif tersendiri pada postingan seperti penambahan kekuatan keyword atau Search Engine.

Breadcrumb adalah sebaris tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjunguntuk menavigasi breadcrumb yang menunjukan lokasi dari postingan tersebut.

Contoh :
 Home » Tutorial Blog » Cara Membuat Navigasi Breadcrumbs di blog dan terindex di google


Sangat disarankan para blogger Memasang Navigasi Breadcrumb di blog. Tetapi ada beberapa breadcrumb yang tidak terbaca oleh google. Dan kali ini saya akan memberikan tutorial Cara Membuat Navigasi Breadcrumb di blog dan terindex di google , Mungkin beberapa blog tidak terbaca oleh google, dikarenakan belum adanya PR di blog tersebut atau blog tersebut masih baru.

Jika ingin memasang silahkan ikuti langkah - langkah berikut

1. Login ke akun Blogger anda

2. Masuk ke Template >> Edit HTML

3. Jangan lupa Centrang " Expand Template Widget "

4. Cari kode ]]></b:skin> (Gunakan cntrl + F ) untuk mempermudah pencarian. 
    Setelah ketemu silahkan copy kode dibawah ini, lalu taruh diatas kode ]]></b:skin>

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

5. Setelah itu cari kode <b:include data='top' name='status-message'/>  setiap tempelate berbeda, terkadang kode <b:include data='top' name='status-message'/>  ini ada dua, Jika ditempelate anda terdapat dua kode, maka cari kode yang dekat dengan kode  <data:defaultAdStart/>
Letakan kode <b:include data='posts' name='breadcrumb'/>  ini tepat di bawah <b:include data='top' name='status-message'/> .

Jika di tempelate anda kode <b:include data='top' name='status-message'/>  ini hanya terdapat satu, maka cari kode <b:includable id='post' var='post'>  Setelah ketemu letakan kode <b:include data='posts' name='breadcrumb'/>  ini tepat dibawah kode <b:includable id='post' var='post'>.

6. Lalu Cari kode <b:includable id='main' var='top'> Setelah ketemu letakan kode dibawah ini diatas kode tersebut.

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on home page -->

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<a expr:href='data:blog.homepageUrl' href='' itemprop='url' rel='tag'><span itemprop='title'>Home</span></a></span>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<a expr:href='data:label.url' href='' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a></span>

</b:if>

</b:loop>

<b:else/>

&#187;Unlabelled

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<!-- breadcrumb for the label archive page and search pages.. -->

<p class='breadcrumbs'>

<span class='post-labels'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; Archives for <data:blog.pageName/>

</span>

</p>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<p class='breadcrumbs'>

<span class='post-labels'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; All posts

<b:else/>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<a expr:href='data:blog.homepageUrl'><span itemprop='title'>Home</span></a></span> &#187; Posts filed under <data:blog.pageName/>

</b:if>

</span>

</p>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

7. Klik Simpan tempelate anda
    Setelah itu cek disini.




 Bisa Juga Anda bisa memakai langkah-langkah berikut :

1. Login ke akun Blogger anda

2. Masuk ke Template >> Edit HTML

3. Jangan lupa Centrang " Expand Template Widget "

4. Cari kode ]]></b:skin> (Gunakan cntrl + F ) untuk mempermudah pencarian. 
    Setelah ketemu silahkan copy kode dibawah ini, lalu taruh diatas kode ]]></b:skin>

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

  
Setelah itu cari kode <b:includable id='main' var='top'>   setelah ketemu hapus kode tersebut dan ganti dengan kode berikut : 
 

<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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</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'/> 

6. Save Tempelate anda.

Untuk mengecek kinerja breadcrumb, silahkan anda buat artikel dengan menyertakan label yang sudah terindex oleh Search Engine Google ( untuk cek anda tinggal copy paste url label ke google ). Setelah itu anda bisa buat artikel baru, tunggu hingga artikel tersebut terindex, dan lihat hasilnya.

 Demikianlah cara Cara Membuat Navigasi Breadcrumb di blog dan terindex di google