Rabu, 15 Juni 2011

Browse Manual » Wiring » » » » » » » » » Cara Membuat Breadcrumb navigation di atas judul posting

Cara Membuat Breadcrumb navigation di atas judul posting

Breadcrumb-navigation?Apaan tuh?belum tahu,silahkan lihat bagian atas judul posting ini.Udah,lalu apa fungsinya,yg jelas bukan cuma buat pajangan,breadcrumb navigation bisa membuat template kita lebih seo friendly, karena akan mempermudah search engine menemukan artikel-artikel kita.Tidak hanya itu dengan adanya breadcrumb-navigation maka pembaca dapat dengan mudah melihat posisi artikel yang di baca serta mencari artikel dalam satu kategori. breadcrumb-navigation bisa di pasang pada template blogger
dengan sedikit modifikasi templatenya, dengan begitu breadcrumb-navigation akan lebih mudah jika langsung di praktekkan.

Langkah-langkah/ cara memasang breadcrumb navigation :
1. Login ke blogger.com

2. Klik rancangan

3. Pilih tab Edit HTML
 
4. Click Download Full Template supaya template blog sobat bsa dikembalikan jika terjadi error
 
5. Kemudian beri tanda centang
pada kotak kecil di samping
tulisan Expand Template Widget.

6. Silahkan cari kode ]]></b:skin>

7. Copy lalu paste kode di bawah
ini persis 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;
}

8. Silahkan cari kode berikut pada
template anda :
<div class='post hentry uncustomized-post-template'>


9. Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>


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

10. Kemudian Save Template.
 
11. Tunggu beberapa saat sampai

template anda tersimpan. Setelah selesai lihat pada posting anda tepatnya di atas judul artikel untuk menentukan berhasil tidaknya anda memasang breadcrumb-
navigation
. Jika berhasil maka breadcrumb-navigation nya akan tampil seperti di atas judul posting ini.
Selamat mencoba..