MEMBUAT MENU NAVIGASI BREADCRUMB YANG TERINDEKS GOOGLE

Salah satu bentuk menu navigasi standar yang biasanya terdapat pada sebuah blog adalah menu navigasi breadcrumb. Menu navigasi breadcrumb ini sangat membantu proses penelusuran (crawling) blog oleh mesin pencari semacam Google atau Yahoo. Dengan bantuan navigasi breadcrumb ini proses penelusuran blog dapat dilakukan secara mudah dan cepat, karena masing-masing artikel blog telah dikelompokkan berdasarkan kategori atau label tertentu, yang untuk memanggilnya sangat terbantukan dengan keberadaan menu navigasi breadcrumb ini.

Menu navigasi breadcrumb ini biasanya terletak pada bagian atas judul tiap-tiap postingan blog, yang isinya menginformasikan tentang label dan judul postingan dengan format  : home / label / judul postingan blog. Dengan demikian, seluruh artikel-artikel blog yang ada telah tersimpan secara rapi dan terstruktur, sehingga cukup mudah bila ingin memanggilnya kembali. 

Berikut ini adalah cara membuat navigasi breadcrumb tersebut  :

1. Login ke Blogger kawan.
2. klik Rancangan klik Edit HTML.
3. Beri tanda centang pada kotak di samping tulisan Expand Template Widget.
4. Lalu sobat cari kode ini. Agar lebih mudah dengan menggunakan Ctrl F atau F3.

]]></b:skin>

5. Kalau sudah ketemu copy kode dibawah ini dan paste diatasnya.

.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'> , 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'/>

Save template. untuk mengecek kinerja breadcrumb, silahkan anda buat artikel dengan menyertakan label yang sudah terindex oleh google (untuk cek anda tinggal copy paste url label ke google). setelah membuat artikel baru, tunggu hingga artikel tersebut terindex, dan lihat hasilnya.

Demikianlah tentang cara membuat menu navigasi breadcrumb ini, semoga bermanfaat.

Related Posts:

Get free daily email updates!

Follow us!