Membuat Navigasi Breadcrumbs di Blogspot

Mungkin sudah tidak asing lagi bagi anda dengan navigasi breadcrumbs ini. Dan saya fikir anda semua tentu sudah tahu tentang cara pembuatannya. Namun dikarenakan ada teman blogger yang mempertanyakan tentang bagaimana cara membuatnya maka tidak ada salahnya jika saya kembali mengulang. ^^, Terima kasih mas Rendi Indra Jaya telah meninggalkan pertanyaan di sini.

Mengenai langkah pembuatannya silakan anda ikuti langkah-langkah di bawah ini.

1. Login seperti biasa ke blogger.com
2. klik Rancangan, kemudian pilih Edit HTML, ada baiknya jika anda download dulu template lengkap anda
3. Beri tanda centang pada Expand Template Widget
4. Cari kode seperti ini
   ]]></b:skin>
5. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi
   
   

   .breadcrumbs {
   padding: 5px 5px 5px 0;
   margin: 0 0 5px;
   font-size: 95%;
   line-height: 1.4em;
   border-bottom: 1px solid #ccc;
   }

6. Kemudian cari lagi kode seperti ini
   
   <a expr:name='data:post.id'/>
   <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link'><data:post.title/></a>
7. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi
   
   

   <b:if cond='data:blog.homepageUrl == data:blog.url'>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='breadcrumbs'>
   You Are Here &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
   </b:loop>
   </b:if> &#187; <data:post.title/>
   </div>
   </b:if>
   </b:if>

8. klik Simpan

     Sekarang lihat hasilnya, jika anda berhasil maka akan muncul navigasi breadcrumbs di atas judul postingan anda seperti pada blog ini. Selamat mencoba dan semoga bermanfaat.... ^^,

If you enjoyed this article, subscribe to receive more great content just like it.

Subscribe via RSS Feed

Your information will not be shared. Ever.

Related posts:

Membuat Navigasi Breadcrumbs di Blogspot

Membuat Menu Navigasi Current Page

Vertical Menu Dengan Efek Show Hide

Membuat Efek Shadow Pada Image

Membuat Highlight Author Comment

Memberi Nomor Pada Komentar (Numbering Comments)

Membuat Comments Bubble Versi 2

Membuat Comments Bubble Pada Blog

Membuat Efek Blur Pada Image

Membuat Efek Scroll