Cara Membuat Navigasi Breadcrumbs

Membuat menu navigasi berurutan di atas artikel posting atau istilahnya disebut breadcrumb,merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat kategori posting suatu blog.

Disamping itu dari segi seo(search engine optimization),Google sudah support/mendukung breadcrumb ini.
Untuk melihat hasil dari sebuah blog yang sudah membuat breadcrumb/menu navigasi diatas posting bisa lihat gambar.

 

Cara membuat navigasi breadcrumbs yang terindeks oleh Google

1. Sebelum

   membuat menu navigasi breadcrumbs

   jelas login dulu hahaha...
2. Kemudian pilih tab Rancangan (Design) > Edit HTML > Jangan lupa download dulu untuk jaga2 kalau error.
3. Langkah selanjutnya kita membuat css style dulu untuk navigasi breadcrumbs-nya, cari kode ]]></b:skin> gunakan Ctrl + F supaya lebih cepat, setelah itu tuliskan kode berikut ini tepat di atas ]]></b:skin>
   

   .breadcrumbs
{
padding:5px 5px 5px 0;
margin: 0 0 5px;
font-size:inherit;
font-family: Georgia, trebuchet ms, Verdana;
line-height: 1.4em;
border-bottom:4px double #000000;
}

4. Kemudian cari kode <b:include data='top' name='status-message'/> kalau ada 2 maka copas kode berikut ini di atas semua kode <b:include data='top' name='status-message'/>
   

   <b:include data='posts' name='breadcrumb'/>

5. Sekarang cari kode <b:includable id='main' var='top'> kalau sudah ketemu paste kode berikut ini di atasnya
   

   <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>

   
   
   6. Silahkan Di Cek..
   Semoga Berhasil..
   Tinggalkan Komentar..