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

Do you want to share?

Do you like this story?

Anda sedang membaca artikel Cara Membuat Menu Navigasi Breadcrums di Blogger atau Blogspot dan artikel ini url permalinknya adalah http://info-adit.blogspot.com/2011/11/cara-membuat-menu-navigasi-breadcrums.html
Semoga artikel Cara Membuat Menu Navigasi Breadcrums di Blogger atau Blogspot ini bisa bermanfaat.

Article :