Cara Membuat Navigasi Breadcrumb Blog Blogger

Kali ini Ngeblogfree akan share “” Cara Membuat Navigasi Breadcrumb Blog Blogger “”. langsung aja..

Navigasi breadcrumb atau breadcrumb navigation adalah sebuah link tautan internal pada bagian atas atau bawah halaman situs web yang memudahkan pengunjung untuk kembali ke halaman sebelumnya. Namun saat ini penempatan breadcrumb lebih sering digunakan pada bagian atas halaman artikel posting.

Seperti: Browse » Home » Tutorial Blogspot » Cara Mengganti Template Wordpress. Untuk memasangnya ikuti saja langkah - langkah di bawah ini:

“ Sebelumnya backup dahulu template anda, dengan cara unduh/download template ( untuk menghindari kesalahan) ”

Cara Membuat Navigasi Breadcrumb Blog Blogger

1. Login pada blog anda

2. Rancangan

3. Edit HTML

4. Cari kode ]]></b:skin>

5. Copy kode di bawah ini dan pastekan 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;
}

6. Selanjutnya cari kode

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

7. Copy kode di bawah ini dan pastekan 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>

8. Preview dahulu untuk mengecek ada Error atau tidak. kemudian

9. Simpan Template

 

 

 

keyword: Cara Membuat Navigasi Breadcrumb Blog Blogger, cara membuat breadcrumb, bagaimana membuat breadcrumb, tutorial blogger, tutorial blog, cara SEO freindly.

ARTIKEL TERKAIT: