Header Ads

Cara Membuat Menu Navigasi Breadcrums di Blogger atau Blogspot

Cara Membuat Menu Navigasi Breadcrums di Blogger atau Blogspot

Cara Membuat Menu Navigasi Breadcrums di Blogger atau Blogspot
Sebelumnya saya sudah memposting artikel tentang cara membuat menu navigasi breadcrumbs di Blogger. Untuk membaca postingan tersebut silakan klik di sini. Kali ini saya akan membahas hal yang sama. Namun, cara yang berikut ini agak sedikit berbeda. Bila pada cara yang sebelumnya tidak berhasil, Anda dapat mencoba cara yang satu ini.

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.

20 comments:

  1. pemakaian breadcrums dapat mempermudah robot search engine dalam mengindeks halaman di blog kita.

    ReplyDelete
  2. tolong di jelaskan fungsi breadcrums itu gimana gan,?

    ReplyDelete
  3. tirk breadcrambs memang salah satu penunjang untuk meningkatkan rangking website kita...karena Om google senang dengan website yang ada breadcrambsnya...brow.......

    ReplyDelete
  4. Tips yang bagus dan berguna sekali mas..!! Kalo boleh saran nih mas Munadi, sepertinya kode CSS untuk judul posting pd template ini belum diedit ya ? Jadinya keliatan tumpang tindih kalo judul yang panjang. Coba cari tulisan line-height:1em; yang ada dibawah kode .post h1, .post h2 { , dan ganti menjadi line-height:1.3em; maka ini akan membuka jarak antara 2 baris judul sehingga judul tidak akan terlihat tumpang tindih. Salam Blogger.

    ReplyDelete
  5. maksih gan ilmunya langsung ke TKP,kunjungan balik di tunggu gan

    ReplyDelete
  6. breadcrums baik juga buat SEO nih :)

    ReplyDelete
  7. good artikelnya dan bermanfaat buat saya, makasih gan
    http://www.caramembuatyangakumau.blogspot.com

    ReplyDelete
  8. Di blog saya ga bisa dipasang :(

    ReplyDelete
  9. makasih gan atas sharingya, teruss bagi ilmu ya....

    ReplyDelete
  10. wah...makasih banyak gan...
    udah ane coba dan berhasil :)

    ReplyDelete
  11. trimaksih banyak gan, harus terus berguru nih...

    ReplyDelete
  12. bermanfaat infonya...
    ditunggu kunjungan baliknya ya di
    88-revolutionaryrebellion.blogspot.com

    ReplyDelete
  13. boleh deh di coba.. :) sekalian belajar..maklum pemula..
    kunjungi ya..

    ReplyDelete
  14. thanks atas informasinya yang sangat bermanfaat dan mudah dicerna, salam kenal ya gan, follow me
    http://caramembuatyangakumau.blogspot.com

    ReplyDelete
  15. thank gan


    http://zhafranahmad.blogspot.com

    ReplyDelete
  16. Terima kasih banyak yah buat semuanya..

    ReplyDelete
  17. biasanya gagal buat ini, tapikayaknya disini agak lain bentuknya kang ...saya coba dulu

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.