Membuat Navigasi Breadcrumb Pada Postingan Blog Membuat Navigasi Breadcrumb Pada Postingan Blog | Belajar Komputer Melalui Internet
News Update :
Blog ini doFollow Loh !

Membuat Navigasi Breadcrumb Pada Postingan Blog

Rabu, 08 Juni 2011

Tidak terasa sudah satu minggu saya tidak update blog ini. Hal ini dikarenakan saya sedang sibuk menata ulang konten di blog ini dan menambah beberapa tool ke dalamnya. Salah satunya adalah navigasi Breadcrumb.

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:

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. Tidak percaya? Berikut adalah kutipan yang saya ambil dari ebook 'Google Search Engine Optimization Starter Guide'.


Ingin mengetahui lebih banyak teknik-teknik SEO dalam ebook Google Search Engine Optimization Starter Guide? Silahkan baca disini.

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 :)

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Artikel tentang Membuat Navigasi Breadcrumb Pada Postingan Blog
Judul: Membuat Navigasi Breadcrumb Pada Postingan Blog

Rating: 10 out of 10 based on 24 ratings. 155 user reviews.
Tulisan ini menarik? Copas permalink ini blogmu donk!

:: Get this widget ! ::

- Reviewer: Unknown - ItemReviewed: Membuat Navigasi Breadcrumb Pada Postingan Blog
Share this article :

No Responses to "Membuat Navigasi Breadcrumb Pada Postingan Blog"

Posting Komentar

 
Raden Ansori - All right reserved
Raden Ansori | Personal Blogging Free Sharing Inform
© Template by :Raden Ansori 2011 - 2012
Copyright © 2011 - 2012 Raden Ansori - All rights reserved