Pages

Sabtu, 14 Agustus 2010

Cara membuat "breadcrumb-navigation" di Blogger

Apa itu "breadcrumb-navigation" ???? untuk lebih mudahnya kalian bisa lihat gambar di bawah ini....



Sebenarnya ini hanya bisa di pasang di wordpress, tapi atas berkat rahmat Allah dan dengan di dorongkan oleh keinginan luhur, telah ada cara memasangnya di Blogger (HOREEE !!!!). Jika anda mau yang seperti itu caranya mudah, anda bisa ikuti langkah-langkah di bawah ini :

1. Login ke blog anda > Layout (tata letak) > Edit HTML
2. Beri tanda centang di "Expand Widget Template"
3. Cari kode ]]></b:skin>
4. Sisipkan kode berikut di atas kode tadi

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

5. Cari lagi kode <div class='post hentry uncustomized-post-template'> jika tidak ada, coba cari kode <div class='post hentry'>
6. Sisipkan kode berikut di bawah kode tadi

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

7. Save templates dan lihat hasilnya
.SELAMAT MENCOBA, jangan lupa untuk comment !!!!




Tidak ada komentar:

Posting Komentar

 

Sample text

Sample Text

Sample Text