Cara Membuat Breadcrumbs SEO Friendly Bergaya

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.

Cara Membuat Breadcrumbs SEO Friendly Bergaya

• Silahkan masuk ke akun Blogger anda.
• Setelah itu, Klik Menu Template, --> Simpan template anda terlebih dahulu, --> 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/AVvXsEiqtIbcYlA9OVQCPT5tWofnHn_FikxOep-mITKXxblRGD_htsQw8-HgeQTWM8pmVS9JZXWRhx8XUsoE1tYc8Bd_gDluGRO5_RgNPSR6Lodlu6AVY1nDD3rcTqAY-twKGWhUrNd5HQedYjsY/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 == &quot;item&quot;'> <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'/>

Catatan :

Jika kode <b:include data='posts' name='breadcrumb'/> terdapat dua atau lebih, letakan kode diatas di kedua-duanya.

• Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG