08 February 2011

Cara Membuat Menu Breadcrumbs

Mungkin ada di antara sobat blogger yang belum tahu apa itu menu Breadcrumbs dan manfaatnya. Coba sobat lihat tulisan kecil di atas judul postingan ini, itu adalah menu Breadcrumbs.

Menu Breadcrumbs adalah bantuan navigasi yang digunakan dalam user interface di website/blog. Hal ini memberikan pengguna cara untuk melacak lokasi mereka dalam sebuah website/blog. Dengan memasang menu breadcrumbs, memungkinkan agar blog kita lebih SEO friendly dan lebih mudah terindex oleh mesin pencari.

Cara membuat menu breadcrumbs sangat mudah. Bagi sobat blogger yang tertarik, silahkan ikuti langkah-langkah di bawah ini.
1. Masuk ke akun blog sobat
2. Pilih design kemudian edit HTML
3. Jangan lupa expand template widget
4. Untuk menghindari kesalahan, sebaiknya download full template dulu
5. Kemudian masukkan kode di bawah ini di atas ]]></b:skin>

#breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:10px;
line-height: 1.4em;
border-bottom:3px double #333;
}

6. Kalau sudah, berikutnya cari kode berikut.

<div class='post hentry uncustomized-post-template'>

Kalau tidak ada, cari kode

<div class='post hentry'>

7. Kemudian pastekan kode berikut di bawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot; '>
<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <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;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div>
</b:if>

8. Simpan pekerjaan sobat.

Semoga bermanfaat.
Alhamdulillah...

No comments:

Post a Comment