Membuat Navigasi Breadcrumb di blog dan terindex di google

Breadcrumb adalah sebaris tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke laman dasar dengan cepat. 


Breadcrumb ini sangatlah penting untuk blogger, karena saat pengunjung membuka artikel kita terdapat navigasi breadcrumb yang menunjukan lokasi dari posting tersebut ( contoh : Home > Berita > KBC ). dan pengunjung bisa mengklik halaman diatas posting tersebut seperti kategori posting maupun kembali ke homepage.

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 Blogger

2. Masuk ke Template >> Edit HTML

3. Centrang " Expand Template Widget "

4. Cari kode ]]></b:skin> ( Gunakan ctrl + F ). setelah ketemu silahkan copy kode dibawah ini, lalu taruh di atas 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 template berbeda,terkadang kode <b:include data='top' name='status-message'/> ini ada dua, Jika di template anda terdapat 2 kode maka cari kode yang dekat dengan kode <data:defaultAdStart/> .
letakan kode <b:include data='posts' name='breadcrumb'/> ini tepat dibawah <b:include data='top' name='status-message'/> .

Jika di template 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 letakkan kode dibawah ini diatasa 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 preview jika tidak error langsung klik SIMPAN.

Setelah itu cek disini ( gunakan link artikel, bukan link blog )

Mungkin ini sedikit tutorial dari saya, jangan lupa ikuti terus tutorial blog di habluez share - Cara Membuat Navigasi Breadcrumb di blog dan terindex di google