Kali ini saya ingin menginformasikan Cara Mudah Membuat Breadcrumbs SEO Friendly akan tetapi sebelumnya kita harus tau dulu apa itu Breadcrumbs. Breadcrumbs adalah sebuah navigasi posting yang berguna untuk menunjukan penunjuk halaman posting, dan memudahkan pengunjung untuk mencari posting dan memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau posting, yang berbentuk horizontal, dan terletak di atas judul posting. breadcrumbs berfungsi di mata mesin pencari, yang akan memudahkan mesin pencari untuk melacak posting yang anda buat. breadcrumbs ini belum terpasang secara automatis namun dipasang secara manual pada setiap blog, dan besar pengaruhnya pada tingkat SEO Blog.
Berikut caranya :
- Sign ke Blogger anda.
- Template === Klik Tombol Edit HTML.
- Cari kode ]]></b:skin> dengan menekan CTRL+F, Lalu masukan kode CSS berikut ini diatas kode ]]></b:skin> :
.breadcrumbs{background:0 rgba(255,255,255,0.1) 15px;height:30px;line-height:30px;border:solid 1px #bababa;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:auto;overflow:hidden;padding-left:10px;-moz-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;-ms-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;-o-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;-webkit-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;text-shadow:0 1px 0 #FAFAFA;color:#666;margin:0;margin-bottom: 6px;}
.breadcrumbs li{list-style-type:none;display:inline-block;float:left}
.breadcrumbs a{display:inline-block;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjveL3kQnbirXUkqkh82hHgBCL-AZisnq3ZeSwRAyBirmOdjJtlZVymnQ7HXsyDJXFDNC5AKQ6r7URMQRgaAdhyphenhyphen2q4dlrD4oTMitj72Xd7vpvVaMUTCfRkopKOeyPtYb-9HnwQSxkAg1rZC/s1600/border_kanan.gif);background-repeat:no-repeat;background-position:right;padding-right:10px;text-decoration:none;color:#666;outline:none;text-shadow:0 1px 0 #fafafa}
.breadcrumbs a:hover{color:#000}
- Kemudian, cari kode <b:includable id='main' var='top'> , dengan menekan CTRL+F.Lalu, Masukan kode berikut ini diatas kode <b:includable id='main' var='top'> :
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.pageType == "item"'> <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'> <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:loop> <span><data:post.title/></span> </div> </b:if> </b:loop> </b:if> </b:includable>
- Lalu, Cari kode <b:include data='top' name='status-message'/> , dengan menekan CTRL+F. Masukan kode berikut ini diatas kode <b:include data='top' name='status-message'/> :
<b:include data='posts' name='breadcrumb'/>
Note :
Jika kode <b:include data='posts' name='breadcrumb'/> terdapat dua atau lebih, letakan kode diatas di kedua-duanya.
Kemudian Save, lihat hasilnya
Demikian info dari saya terima kasih.
