![]() |
Menu Breadcrumbs |
Cara Membuat Menu Navigasi Breadcrumbs - Cara mudah Membuat Navigasi Breadcrumb Di Blog atau Membuat menu navigasi berurutan di atas artikel posting yang biasanya disebut juga Menu breadcrumb. Memasang Menu breadcrumbs di blog merupakan suatu keuntungan buat para blogger karena selain sebagai penghias blog memasang breadcrumbs juga merupakan salah satu teknik SEO.
Menu breadcrumbs adalah menu/navigasi yang berada di bagian atas posting yang menunjukkan keberadaan dari suatu artikel/postingan dengan urutan home >> label dari Artikel >> judul Artikel. Dengan Menu Breadcrumbs ini pembaca diberi kemudahan untuk mengetahui posisi/lokasi artikel yang dibaca.
Simak Cara Membuat Menu Breadcrumbs:
1. Login ke blogger dengan akun sobat
2. Pilih Rancangan >> Edit HTML >> dan Centang Expand Template Widget
3. Biasakan untuk membeckup template terlebih dahulu.
4. Cari kode ]]></b:skin>, untuk memudahkan pencarian gunakan Ctrl + F
5. Copy paste kode berikut di atas kode ]]></b:skin>
.breadcrumbs {
padding:8px 0px 10px 5px;
margin: 5px 5px 5px 5px;
font-size:88%;
border:1px solid #c5c5c5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
6. Setelah itu cari kode
<div class='post hentry uncustomized-post-template'> atau <div class='post hentry'>
7. Letakkan kode dibawah ini tepat dibawah kode di atas
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Your Are Here</span><img src='http://3.bp.blogspot.com/-mAOFf5pN64k/TzTogRPxZcI/AAAAAAAAAkA/PPIhtnsp5Y0/s1600/abi_breadcrumbs_agenpulsa.png'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
»
<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 != "true"'>,</b:if>
</b:loop>
»
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Browse</span><img src='http://3.bp.blogspot.com/-mAOFf5pN64k/TzTogRPxZcI/AAAAAAAAAkA/PPIhtnsp5Y0/s1600/abi_breadcrumbs_agenpulsa.png'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
» Archives for <data:blog.pageName/>
</div>
</b:if>
7. Simpan Template dan selesai
Demikian Cara Membuat Menu Navigasi Breadcrumbs
Semoga bermafaat….
Menu Breadcrumbs ala Agen Pulsa.com
thanks ya gan.sukses diterapin di blog ane :D
kalo yang ada menu breadcrumb kayaknya kurang seo ya mas bro
nice share :)
Saya sangat menghargai posting Anda ini, dengan baik menggambarkan Navigasi Breadcrumbs. Kami telah menerapkannya di sini di situs kami. Lihat di sini
https://www.indusuno.com/safety/safety-equipments/safety-shoes.html
Posting Komentar