Cara Memasang Breadcrumb Blogger (Lulus Rich Result Test)

Memasang Breadcrumb : Tips blogger kali ini adalah lanjutan dari topik sebelumnya yaitu Optimasi Breadcrumb Agar SEO Friendly

Script breadcrumb yang saya bagikan sudah disertai dengan schema markup, jadi hasilnya kurang lebih akan sama dengan apa yang ditampilkan di hasil pencarian google untuk blog gurublogger.id

Bila ingin melihat hasil penggunaan breadcrumb blog guru blogger silahkan lakukan langkah berikut ini:

Di google silahkan tulis ==> site:gurublogger.id kemudian tekan enter
Lihat dan perhatikan tampilan breadcrumb di hasil pencarian google

Langkah kedua, silahkan buka Rich Result Test, kemudian lakukan test halaman blog gurublogger , lihat dan amati struktur breadcrumbnya !!

Bila ingin memiliki struktur breadcrumb yang sama, silahkan ikuti tutorial blogging cara memasang breadcrumb berikut ini

Cara Memasang Breadcrumb di Blogger

Yang perlu digaris bawahi pertama adalah, bahwa setiap developer template memasang breadcrumb dengan cara yang berbeda

Teman teman harus mencari tahu dimana posisi breadcrumb di blog milik teman teman dengan inspect element seperti dicontohkan dalam animasi gambar berikut ini :

Mencari Posisi Breadcrumb di Template

Berdasarkan gambar diatas, posisi breadcrumb di blog guru blogger adalah :

Didalam <div class="post-outer"> urutan pertama, diatas <div class="clear"> diatas <div class="post"> 

Untuk mencari dimana tepatnya posisi tersebut caranya adalah :

1. Login di Blogger
2. Klik Tema
3. Edit HTML
4. ctrl + f, masukkan pencarian class='post' (ingat ganti petik 2 dengan petik satu)
5. Tekan enter maka lokasi tepat breadcrumb di template akan diperlihatkan

Posisi breadcrumb tepat diatasnya

Silahkan sesuaikan caranya (bisa berbeda beda tergantung template yang dipakai), asalkan lokasi tepat breadcrumb ketemu

Paste Script Breadcrumb

Selanjutnya silahkan paste kode html berikut ini (tidak perlu menghapus breadcrumb lama, cukup paste dibawahnya (hapus belakangan, test dulu) :

<!-- breadcrumb start -->
<div class='breadc'>
<div>
<ol id='breadcrumb' typeof='BreadcrumbList' vocab='http://schema.org/'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<li property='itemListElement' typeof='ListItem'>
<a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'>
<span property='name'>Home</span></a>
<meta content='1' property='position'/>
</li>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<li><data:blog.pageName/></li>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop index='index' values='data:post.labels' var='label'>
<!-- b:if cond='data:label.isLast == &quot;true&quot;' -->
<li property='itemListElement' typeof='ListItem'>
<a expr:href='data:label.url' property='item' typeof='WebPage'>
<span property='name'><data:label.name/></span></a>
<meta expr:content='data:index + 2' property='position'/>
</li>
<!-- /b:if -->
</b:loop>
<b:else/>
<li>Unlabelled</li>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<li>Archives for <data:blog.pageName/></li>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<li>All posts</li>
<b:else/>
<li>Posts filed under <data:blog.pageName/></li>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</ol>
<!-- judul artikel -->
<span><data:post.title/></span>
<!-- judul artikel -->
</div>
<div class='clear'/>
</div>
<!-- breadcrumb end -->

Selanjutnya simpan template dan lakukan pengujian markup di rich result : Rich Result Test

Bila semua berjalan lancar, lanjutkan dengan menghapus breadcrumb lama kemudian aplikasikan desain css

Optimasi CSS Breadcrumb

Berikut ini adalah kode css yang saya gunakan untuk mempercantik tampilan breadcrumb

CSS Breadcrumb :
.breadc {
font-size: small;
box-shadow: 0 0.4px 0px 0 rgba(0, 0, 0, .15);
margin-bottom: 10px;
height:30px;
overflow:hidden;
}

.breadc ol {
list-style: none;
padding: 0;
}

.breadc li {
padding: 0 5px 0 0;
float: left;
}

.breadc a:after {
margin-right: 5px;
content:&#39; \002F&#39;;

Paste kode diatas tepat sebelum </b:skin> di template (di atasnya)

Selanjutnya save dan teman teman sudah berhasil memasang breadcrumb yang sama dengan blog gurublogger.id

Selamat belajar ...