Cara Memasang Breadcrumbs Seo Friendly Di Blog

Blogger Sukabumi - Apa kabarnya sobat? kabar baik pastinya. Sebagaimana yang kita tahu bahwa yang namanya breadcrumbs merupakan suatu petunjuk atau lebih dikenal dengan istilah navigasi yang fungsinya sebagai penunjuk arah suatu halaman di blog. Dan memasang breadcrumbs ini tentunya dapat memberikan kemudahan kepada visitor/pengunjung untuk mencari artikel dan memberikan jejak bagi pengguna untuk mengikuti kembali ke semula, yang berbentuk horizontal, dan terletak di atas judul posting. 

Breadcrumbs dan fungsi lainnya adalah memudahkan mesin pencari/search engine, untuk melacak postingan artikel yang kita buat. Fitur breadcrumbs ini tidak terpasang otomatis namun dipasang secara manual pada setiap blog dan pengaruhnya besar terhadap seo blog kita, di bawah ini ada cara pemasangannya.

Sobat bisa ikuti cara dan langkah di bawah ini :

• Masuk ke akun blogger sobat.
• Klik Template  > backup terlebih dahulu template sobat
• Lalu kemudian klik  >  Edit HTML.
• Carilah kode ]]></b:skin> gunakan Ctrl + F, untuk memudahkan pencarian lalu copy kode css di bawah ini dan paste tepat 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/AVvXsEjRlusVxr38il-pOWaA6eZbNT7jD9NGd32ibZO9FJNYrK7nq1wPvdmuYPvrStvIetPKCfKXkiSx5MPprgPCnjwI9prp1hvysB_l-3_gIMquWS5PRPXhXvI1zkhyphenhyphenUKmEh9ax6oWL3Dr9YTqY/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 lagi kode <b:includable id='main' var='top'> gunakan Ctrl + F
• Copy kode di bawah ini dan paste 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>

• Pencarian terakhir sobat cari kode <b:include data='top' name='status-message'/>  gunakan Ctrl + F.
• Copy kode di bawah ini dan paste 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.

• Simpan Template.
• Selesai

Semoga bermanfaat.