Apakah Blog Anda Belum Mempunyai Breadcumb (Menu Navigasi) . ??

Apakah Blog Anda Belum mempunyai Menu Navigasi atau istilah lainnya Breadcumb,?? Breadcumb ini berfungsi untuk mengetahui dimana posisi artikel yang sedang anda baca. Trik ini memang sudah basi dikalangan para blogger yang sudah master,  saya hanya mencoba untuk mengarsipkannya saja, tentunya dengan referensi dari sumber - sumber yang sudah mahir dibidang blog. Biasanya breadcumb berada di atas judul artikel dan akan muncul jika kita mengklik salah satu judul artikel kecuali, halaman utama. .

Inilah contoh dari breadcumb dari blog saya (didalam lingkaran hitam)  :

Namun blog saya ini breadcumb - nya sudah tersedia di template yang saya gunakan, tapi saya akan coba membahas cara membuatnya.

Cara pembuatannya sebagai berikut

• Login ke akun blogger anda,, jangan akun orang ya... :D

• Masuk ke Tata Letak, kemudian pilih tab Edit HTML

• Backup dulu template dengan mengklik download template lengkap.

• Beri tanda centang  Expand Template Widget.

• Cari kode ]]></b:skin>

• Copy-kan kode berikut di atas kode ]]></b:skin>

                      .breadcrumbs{
                      padding:6px 6px 6px 6px;
                      margin:0;font-size:90%;
                      line-height:1.3em;
                      border-bottom:3px double #CC0000
                      }

•  Cari Kode dibawah ini

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

• Kalau sudah ketemu copykan kode ini dibawah kode tersebut

                    <b:if cond='data:blog.homepageUrl == data:blog.url'>
                    <b:else/>
                    <b:if cond='data:blog.pageType == &quot;item&quot;'>
                    <div class='breadcrumbs'>
                    <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> 

•  Simpan template anda.

Nah kalau sudah selesai, silahkan lihat blog anda,klik salah satu judul artikel :).

Artikel Terkait