Cara Membuat Navigasi Breadcrumbs

Trik Blogger 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 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 Ctrl + F atau (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'>
You Are Here &#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.
Contoh : You Are HereBrowser dan HomeBeranda
jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba

Dapatkan kiriman artikel terbaru langsung ke email anda!
Masukan Alamat Email Anda

Delivered by FeedBurner

Artikel Terkait

Comments
0 Comments

0 komentar:

Posting Komentar

Template Design by Ahmad Syarif