0 Cara Mudah Membuat Menu Navigasi Breadcrumb

PanduanTop - Kali ini saya coba memberikan "Cara Mudah Membuat Menu Navigasi Breadcrumb agar cepat di index oleh google". Jika sobat sudah mencoba berbagai tip dan gagal, silahkan mencoba cara di bawah ini dan semoga berhasil. Tentang apa dan tujuan breadcrumb, ada baiknya sobat baca artikel ini dulu : Modifikasi Template Blog Agar SEO Friendly, Disitu sudah di paparkan beserta contoh screenshotnya.

Biar tidak panjang lebar langsung saja ikuti langkah - langkahnya  :

• Login ke blogspot 
• Masuk ke "Rancangan" -> Edit HTML, Jangan lupa di download dulu untuk backup :)
• Centang expand widget templates
• Cari kode ]]></b:skin> (Bisa Gunakan Ctrl + F sebagai alat bantu)
• Letakkan kode di bawah ini tepat di atas kode ]]></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;
}

• 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'/>

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

SELESAI !, dan jangan lupa simpan. Setelah di SIMPAN, silahkan di cek dulu blog sobat dengan menggunakan tools ini : Rich Snippets Testing Tool

Caranya mudah :
Masukkan salah satu URL postingan dari blog sobat, kemudian Preview hasilnya. Selamat mencoba dan praktekkan bagaimana cara membuat Navigasi Breadcrumb di blog.

Komentar →