Minggu, 15 April 2012

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 judulPosting, 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 tulisanExpand 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 Pastediatasnya

.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 Pastediatasnya

<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 Here → Browser dan Home → Beranda
jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba 

0 komentar:

Posting Komentar

Blog Gw © 2008 Template by:
SkinCorner