Cara Membuat Menu Navigasi Breadcrumb di Blogspot

 

Kali ini saya akan membahas Cara Membuat Menu Navigasi Breadcrums di Blogger atau Blogspot.

Langsung saja, berikut ini langkah-langkah dalam membuat menu navigasi breadcrumbs di Blogger atau Blogspot. Silakan disimak dan semoga sukses.

 

1. Masuk ke akun Blogger.

2. Klik Rancangan > Edit HTML.

3. Silakan klik Download Template Lengkap untuk membuat salinan template.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode ]]></b:skin>, lalu letakkan kode di bawah ini di atas kode tersebut. Gunakan tombol Ctrl + F untuk mempercepat pencarian.

.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 yang seperti di bawah ini.

<b:include data='top' name='status-message'/>

      <data:adStart/>

    <b:loop values='data:posts' var='post'>

7. Kemudian letakkan kode <b:include data='posts' name='breadcrumb'/> setelah kode <b:include data='top' name='status-message'/> sehingga hasilnya akan menjadi seperti di bawah ini.

<b:include data='top' name='status-message'/>

  <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

    <b:loop values='data:posts' var='post'>

8. Berikutnya cari kode <b:includable id='main' var='top'> dan letakkan kode di bawah ini tepat di atas kode tersebut.

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</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>

</b:loop>

&#187; <span><data:post.title/></span>

</b:if>

</b:loop>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Arsip untuk <data:blog.pageName/>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Seluruh Artikel

<b:else/>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Artikel pada Label <data:blog.pageName/>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

9. Klik tombol SIMPAN TEMPLATE.

10. Lihat blog Anda untuk mengetahui hasilnya.
sekian tips Cara Membuat Menu Navigasi Breadcrums di Blogger atau Blogspot,SEMOGA BERMANFAAT...