About

Thursday, 19 January 2012

Pasang Navigasi Breadcrumb di Blogger

Breadcrumb merupakan salah satu plugin milik Wordpress yang berfungsi untuk memudahkan pembaca dalam menelusuri halaman blog. Jadi ibarat peta atau sitemap dalam blog.

Plugin ini biasanya diletakkan diatas halaman posting. Contoh tampilannya seperti ini:
navigasi breadcrumb
Selain dapat memudahkan pembaca dalam mengetahui lokasi halaman yang sedang ditelusuri, plugin ini juga dapat mengoptimasi halaman blog di search engine (SEO). Bahkan dianjurkan langsung oleh Google lho. 


Ok saya rasa cukup penjelasannya, untuk pengguna wordpress anda bisa download plugin Breadcrumb disini. Sedangkan untuk pengguna blogger ikuti langkah-langkah berikut untuk memasang navigasi breadcrumb: 

1. Buka Blogger. Masuk ke menu Design -> Edit HTML

2. Beri centang pada 'Expand Widget Templates'.

3. Setelah itu, cari kode   <b:if cond='data:post.title'>

4. Letakkan kode berikut dibawah 
<b:if cond='data:post.title'>



<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>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 != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
 5. Selanjutnya cari kode ]]></b:skin>
 6. Letakkan kode css berikut diatasnya
.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}


7. Jika sudah simpan template anda dan lihat hasilnya.

Semoga bermanfaat :)

Baca Juga Artikel dibawah ini :

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Bluehost Coupons