Tuesday, July 23, 2013

Cara Memasang Breadcrumb di Blogger

Cara Memasang Breadcrumb di Blogger

Cara Memasang Breadcrumb di Blogger : Sebelum masuk kepembahasan tentang Cara Memasang Breadcrumb alangkah baiknya kita berkenalan terlebih dahulu dengan Breadcrumb. Breadcrumb adalah navigasi menu untuk mempermudah pengunjung web/blog melacak lokasi dalam dokumen dan kembali ke awal dengan mudah. Breadcrumb sendiri biasanya berada pada posisi atas halaman web/blog, biasanya dibawah header. Breadcrumb seperti penunjuk arah bagi pengunjung. hal ini sangat bermanfaat bagi pengunjung takala struktur website atau blog kita memiliki tingkatan atau hirarki. Oke setelah sedikit tau tentang Breadcrumb langsung saja kita masuk ke pembahasan utama.

Cara Memasang Breadcrumb di Blogger
1.  Login terlebih dahulu kedalam blog kawan
2. Masuk ke Template lalu pilih Edit HTML
3. Letakan kode di bawah ini tepat sebelum kode  ]]></b:skin>

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

4. Lalu cari kode dibawah ini : 

<div class='post hentry'>

lalu copy dan pastekan kode dibawah ini tepat setelah kode <div class='post hentry'>

<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'>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 != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

5. Simpan Template lalu lihat hasilnya.
Demikianlah tutorial Cara Memasang Breadcrumb di blog, semoga artikel ini dapat bermanfaat bagi para pembaca.
 
Download Artikel ini di -> Cara Memasang Breadcrumb di Blogger

Referensi :
http://eftutor.blogspot.com/2012/12/seputar-dan-pengertian-breadcrumb.html
http://www.maskolis.com/2011/01/cara-memasang-breadcrumb-di-blogspot.html

No comments:

Post a Comment