Monday, June 3, 2013

Cara Membuat Navigasi Breadcrumb Pada Blog

Simak cara membuat Navigasi Breadcrumb pada Blog berikut ini. Agar blog lebih SEO friendly, anda bisa menambahkan Navigasi Breadcrumb sekaligus mempermudah pembaca untuk mencari artikel dalam satu kategori pada web anda.

Cara membuat  breadcrumb navigation :

Simpan dulu kode template anda untuk berjaga-jaga jika terjadi kesalahan.
1. Login ke akun Blogger anda dan menuju dasbor.
2. Klik/pilih '' Tata Letak ''
3. Pilih  '' Edit HTML ''
4. Centang kotak kecil '' Expand Template Widget ''
5. Silahkan cari kode  berikut

]]></b:skin>

6. Silakan Copy paste kode di bawah ini dan masukkan tepat di atas kode ]]></b:skin>


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


7. Selanjutnya cari kode berikut:

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

8. Masukkan kode dibawah ini tepat di bawah kode diatas (no. 7)

<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' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>


9. Silakan klik Save template

Tunggu hingga template berhasil tersimpan. Silakan dicoba dan sekian trik cara memasang Navigasi Breadcrume. Semoga sukses.


No comments: