Saturday, June 4, 2011

Cara Membuat Navigasi Breadcrumbs

Kali ini saya akan membahas bagaimana Cara Membuat Navigasi Breadcrumbs
Dengan cara ini, kita dapat menambah kekuatan dengan menambah kategori pada Indeks Search Engine sehingga bisa memberikan efek tersendiri pada posting seperti penambahan kekuatan keyword dan sebagainya. 
Untuk contoh, Breadcrumbs bisa dilihat diatas judul Posting, jika ada yang tertarik
Berikut cara memasangnya :


Login ke Blogger klik Rancangan klik Edit HTML.
Klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
Lalu sobat cari kode ]]></b:skin>

Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol  (F3)
Kalau sudah ketemu copy kode berikut dan paste diatasnya


.breadcrumbs {
padding: 5px 5px 5px 0;
margin: 0 0 5px;
font-size: 95%;
line-height: 1.4em;
border-bottom: 1px solid #ccc;
}

Kemudian cari kode seperti berikut :


<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

Jika sudah ketemu copy kode berikut dan paste diatasnya


<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browser &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

Keterangan : kode yang berwarna biru bisa sobat ganti
jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba.


Sumber: www.tiptrikblogger.co.cc. Related Posts Plugin for WordPress, Blogger...

No comments: