CARA MEMBUAT NAVIGASI BREADCRUMB

Membuat Navigasi Breadcrumbs, suatu tutorial yang menurut saya ini memang penting dan bisa juga untuk bagus-bagusin blog kita. Dengan cara ini pula, kita bisa mendapatkan atau menambah kekuatan dengan menambah kategori pada Indeks Search Engine. Sehingga kita bisa memberikan efek tersendiri pada posting seperti penambahan kekuatan keyword atau Search Engine.

Cara pemasangannya pun seperti ini kawan :

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.

Update :
Gambar di bawah ini menunjukkan bukti bahwa Navigasi Breadcrumb blog ini (walaupun belum memiliki page-rank sama sekali) yang telah terindeks oleh Google Search Engine.


Demikianlah cara membuat menu Navigasi Breadcrumb.
CARA MEMBUAT NAVIGASI BREADCRUMB
Item Reviewed: CARA MEMBUAT NAVIGASI BREADCRUMB 9 out of 10 based on 10 ratings. 9 user reviews.

muantab sob, nice info

keren nich tutorialnya, ini untuk blogspot ya??? wah susah juga ya kalau untuk blogspot!

saya juga pernah nulis artikel yang hampir saya, tapi ini untuk wordpress http://www.arie.pro/blog/cara-membuat-navigasi-situsblog-breadcrumb/

salam kenal sob!
kunjung balik ya jika ada waktu!

Salam ... blogger !!!!
gan template yg tdk ada kode gmn cr mmbuat navigasi breadcrumnya

Salam ... blogger !!!!
gan template yg tdk ada kode (b:includable id='main' var='top') gmn cr mmbuat navigasi breadcrumnya

dengan breadcrumbs, sistem navigasi blog semakin jelas ya mas.. :)

Emoticon? nyengir

Silahkan meninggalkan komentar dengan bahasa yang relevan dan sopan.. # Don't Spamm ! #

Komentar Terbaru

Just load it!