Cara Membuat Menu Breadcrumbs Navigation Yang Menarik dan Unik

By HP Yitno

Breadcrumbs Navigation adalah sebuah menu yang muncul diatas postingan. Isinya biasanya berupa Home, Label dan Artikel yang sedang kita baca. Menu ini ditambahkan agar para pembaca mengetahui tulisan yang sedang dibaca termasuk category yang mana. Dengan begitu pengunjung akan semakin tertarik untuk menjelajahi artikel yang memiliki kategori yang sama. Selain penggunaan related post tentunya.

Aku sendiri baru mengetahui menu ini setelah membongkar template yang menurut saya cukup menarik. Disitu ada menu unik yang tidak saya ketahui namanya. Kemudian aku iseng-iseng mencari di google dengan keyword cara membuat label diatas postingan. Akhirnya saya menemukan beberapa situs yang membahas masalah ini. Rupanya menu tersebut dinamakan menu breadcrumbs navigation.

Sebelumnya saya mengira menu sederhana tersebut adalah Menu Drop-Down Navigation Diam Di Tempat yang telah dimodifikasi. Ternyata dugaan saya salah besar. Inilah salah satu keuntungan membaca artikel sobat blogger yang isinya tentang web-designer. Sedikit banyak kita akan tahu tentang seluk beluk template blogspot.

Sayangnya dari ketiga situs dengan tutorial berbeda, hanya ada satu yang berhasil saya terapkan. Hal ini mungkin berkaitan dengan template yang saya gunakan. Dan bisa jadi tutorial yang saya bahas kali ini tidak cocok dengan template yang sahabat pakai. Jadi silahkan cari tutorial lainnya yang sesuai dengan template sobat. Yang jelas menu ini bisa saya terapkan pada simple template dan picture window bawaan blogspot.

Berikut langkah-langkah membuat menu breadcrumbs navigation:
1. Login ke www.blogger.com
2. Klik template kemudian edit html
3. Cari kode ]]></b:skin> dengan bantuan CTRL + F untuk mempermudah pencarian
4. Salin kode dibawah ini tepat diatas kode ]]></b:skin> tadi (Pilih salah satu saja)

.breadcrumbs{padding:7px; margin-bottom:7px;margin-top:0px; margin-left:-19px; margin-right:-19px; font-size:13px;color:#5B5B5B;border-bottom:1px #bbb; background: white; border: 1px; border-radius:5px;}

.breadcrumbs{padding:7px; margin-bottom:7px;margin-top:0px; margin-left:-19px; margin-right:-19px; font-size:13px;color:#5B5B5B;border-bottom:1px #bbb; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi77ACxexZkLEqRMZZKDeKnq_1q_gsYOMzjjLjzTESknWJVH1bhr9mI958j3xhKshUvZxgCpcXKt6v60PW1uykfUwy5IpDLvTLXu6u6BqWG2TeIz8poX6Zo44EUr8WwlQxge4hSaOw73Gaj/s30/background.png'); border: 1px; border-radius:5px;}

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:12px;color:#5B5B5B;}

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:12px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:12px;color:#5B5B5B;border-bottom:1px solid #bbb;}

5. Cari kode <b:includable id='main' var='top'> dengan bantuan CTRL + F
6. Ganti kode tersebut dengan kode dibawah ini

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- breadcrumb for the post page --> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <b:loop values='data:post.labels' var='label'> &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:loop> &#187; <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>

7. Simpan template dan lihatlah hasilnya

Jika anda paham dengan css, silahkan ubah kode css yang ada dilangkah 4 sesuai selera anda. Anda bisa mengganti jenis dan besar tulisan atau mengganti background dengan gambar yang anda sukai. Pastinya anda perlu melakukan percobaan agar sesuai dengan template yang anda gunakan. Dan yang terpenting atur bagian margin dan ukuran font supaya pas dengan lebar template anda.

Demikianlah informasi tentang cara membuat menu navigation breadcrumbs yang bisa saya bagikan. Menu navigation seperti ini sering saya temukan pada template premium yang harganya relatif mahal. Dengan mengetahui dasar-dasarnya, anda akan memiliki template standar namun terlihat premium dan mempesona.

SHARE :