5 Kelebihan Menu Navigasi Breadcrumb dan Cara Memasangnya
Menu navigasi breadcrumb “sepertinya” menjadi salah satu menu navigasi favorit para blogger. Karena “sepertinya” Google juga menyukainya.
Google ( panduan webmaster tools ) sebenarnya tidak menunjukkan menu navigasi apa sebenarnya yang harus dipasang dalam sebuah blog. Goggle hanya mengatakan agar pengelola blog memasang menu navigasi yang bisa memudahkan pengunjung dalam menjelajahi sebuah blog. Tetapi menu navigasi apa yang bisa memudahkan pengunjung dalam menjelajahi blog, Google tidak menjelaskannya secara detil.
Breadcrumb, apabila boleh dipahami dalam pengertian bebas, bisa diartikan sebagai suatu jalur silsilah atau runtutan asal muasal.
Dan breadcrumb sendiri, secara harfiah dalam bahasa indonesia adalah “ remah-remah roti”.
( Konon dalam salah satu dongeng anak-anak, remah-remah roti yang disebar di sepanjang jalan ini, digunakan sebagai pertanda untuk menelusuri jalan pulang ).
Menu navigasi breadcrumb boleh dipahami sebagai menu navigasi ( blog ) yang menunjukkan jalur silsilah atau runtutan dari mana sebuah posting berasal ( kategori, label ). Sehingga menu navigasi breadcrumb jika dipasangkan pada sebuah blog memang akan mempercepat dan memudah pengunjung untuk menjelajahi isinya.
Dalam beberapa hal menu navigasi breadcrumb mempunyai kelebihan, misalnya :
1. Pengunjung blog akan lebih cepat dan mudah dalam menjelajahi isi blog.
Menu navigasi breadcrumb menunjukkan secara langsung posisi pengunjung blog saat itu. Kalau dalam aplikasi gadget, menu navigasi breadcrumb, hampir mirip-mirip dengan GPS. Jadi menu breadcrumb ibarat GPS–nya blog.
2. Menu navigasi breadcrum juga akan lebih memudahkan kerja mesin pencari dalam merayapi dan mengindeks keseluruhan isi dari sebuah blog.
3. Dalam laman-laman resminya, Google sendiri hampir selalu mempergunakan menu breadcrumb ini.
4. Apabila dilakukan pengujian dengan Google Webmastertools, menu navigasi breadcrum ini termasuk / dimasukkan sebagai data terstruktur
5. Dengan alasan-alasan di atas menu navigasi breadcrumb – merupakan menu navigasi yang SEO friendly.
Dalam aplikasinya pada sebuah blog, pemasangan menu navigasi breadcrum ini biasanya diletakkan di bagian atas, tepatnya di bagian atas postingan. Dengan demikian akan lebih mudah terlihat dan lebih mudah dinavigasi oleh pengunjung.
Dengan beberapa kelebihan menu navigasi breadcrumb ini, tidak ada ruginya jika anda juga memasangnya pada blog anda. Script mana yang akan anda gunakan, semua terserah selera anda.
Silahkan saja mencari dan meng-googling-nya, copy, simpan lalu paste-kan pada template blog anda.
Namun yang perlu diingat, tidak semua script untuk memasang menu breadcrumb dapat bekerja pada blog anda. Terkadang script yang katanya dapat bekerja, ternyata tidak menimbulkan efek apa-apa ketika telah dipasang pada blog.
Silahkan anda pilih dan uji coba sendiri.
Namun, jika anda tidak banyak waktu dan menginginkan cara yang cepat, anda bisa gunakan saja contoh script yang di bawah ini. Script ini terbukti dapat bekerja, dan telah terindeks.
Script breadcrumb valid ini sudah saya aplikasi pada beberapa blog saya. Dan script ini kebetulan saya dapat dari blognya kang Ismet.
Nah jika anda tertarik dengan menu navigasi breadcrumb ini, anda bisa ikuti cara memasang menu navigasi breadcrumb di blog seperti di bawah ini :
● buka akun blogger anda
● klik edit HTML
● cari kode ]]></b:skin>
● copy paste kode berikut ini di atasnya
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}
● Cari kode <b:includable id="main" var="top">
Setelah ketemu ganti saja kode tersebut dengan kode yang di bawah ini :
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
» <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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'/>
● klik save
● selesai.
