2 Cara Membuat Navigasi Breadcrumb di blog | Tip SEO



Blogger | Coepoe - Kali ini saya coba memberikan "Tip Bagaimana Membuat Navigasi Breadcrumb di blogspot 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 Untuk Lebih SEO. 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.

Salam Sahabat
Blogger | Coepoe

2 komentar:

Uem Cuters mengatakan...

Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.

tova mengatakan...

mantapkan gan..thanks tutornya..:)

Posting Komentar

Komentar ini di moderasi, silahkan berkomentar dan jangan beri link di kolom komentar. Cukup di kolom URL yang di berikan saja :) Thx kunjungannya