Membuat Menu Breadcrumbs di Blog

Salam Blogger,sudah hampir 5 bulan saja EvendieBlogger'z menghiasi sebagian dunia maya sebagai blog yang hanya memberikan suatu info,walau hanya sedikit tapi mungkin akan bermanfaat untuk kita semua. Oke kali ini saya memberikan Tutorial cara membuat Menu Breadcrumbs yaitu bantuan navigasi yang digunakan dalam user interface di website/blog. Tutorial ini saya dapat dari sahabat sekomunitas saya www.xaonsite.com.

Menu Breadcrumbs 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.



Nah pasti anda tertarik untuk memasangnya di web/blog anda seperti yang anda lihat di bawah posting blog saya !. Itulah yang disebut dengan Menu Breadcrumbs.

Cara membuat menu Breadcrumbs sangat mudah, ikuti cara-cara dibawah ini :

1. Login ke blogger -> Rancangan -> Edit HTML
2. Cari kode ]]></b:skin>
3. Lalu taruh kode dibawah ini diatas kode tersebut.

#breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:10px;

line-height: 1.4em;

border-bottom:3px double #333;

}

     4.  Setelah itu cari kode

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

     5.  Taruh kode dibawah ini dibawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot; '>

<div id='breadcrumbs'> Browser: <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>

     6.  Save Template

 

Oke,semoga tips ini bisa bermanfaat untuk anda semuanya.... wAsalAm.