Cara Membuat Breadcrumbs Atau Menu Navigasi Di atas Artikel Posting Blog

Pada Tutorial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan Sudah Menjelaskan Pada Sobat Tentang Bagaiman Cara Membuat Toolbar Atau Navbar Melayang Di Blog..Dan Pada Tutorial Yg Sama Juga Yaitu Tutorial Blog Saya Akan Menjelaskan Pad Sobat Tentang Bagaimana Cara Membuat Breadcrumbs Atau Menu Navigasi Di atas Artikel Posting Blog.  Breadcrumbs Atau Menu Navigasi Di atas Artikel Posting Blog bisa membuat template kita lebih seo friendly, karena akan mempermudah search engine menemukan artikel-artikel kita. Navigasi ini di kenal dengan nama breadcrumb-navigation. 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.




Cara memasang breadcrumb navigation sebagai berikut:

• Login ke blogger.com
• Klik Tata Letak.
• Pilih tab Edit HTML
• Click Download Full Template and
  
  
  please back up your template first.
• Kemudian beri tanda centang
  
  pada kotak kecil di samping
  
  tulisan Expand Template Widget.
• Silahkan cari kode ]]></b:skin>
• 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.

Artikel Terkait :

Diposting oleh learning di 07.26