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 :
- Login di Blogger
- Klik Tema
- Edit HTML
- ctrl + f, masukkan pencarian class='post' (ingat ganti petik 2 dengan petik satu)
- 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) :
<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 == "static_page"'>
<li><data:blog.pageName/></li>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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 == "true"' -->
<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 == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<li>Archives for <data:blog.pageName/></li>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageName == ""'>
<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
.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:' \002F';
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 ...