Cara Membuat / Memasang Menu Navigasi Breadcrumbs Bisa Terindex Google

Bagaimana cara membuat-nya. Mari teman simak tutorial singkat berikut..

Cara Membuat / Memasang Menu Navigasi Breadcrumbs Bisa Terindex Google

1. Pertama kita harus mengedit template blogspot, caranya silahkan teman baca di postingan ini :
Cara Mengedit Template Blogspot
2. Nah saat teman semua dah nyampe di halaman Edit HTML, disini baru kita bisa menambahkan script khusus yang bisa menampilkan navigasi breadcrumbs di template blogspot / blogger kita.
Mari kita lakukan hal berikut ini :
1. Temukan kode html di bawah ini,

<b:includable id='main' var='top'>

Lalu ganti dengan kode berikut

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<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'>
<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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

2. Temukan kode css di bawah ini,

]]></b:skin>

Lalu ganti dengan kode berikut

.breadcrumbs {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyupWxyoWsPS9DQEaTAyOPlm5qejs79X67nz8xcMgYsVcQKAkA8mIQYq1QaTZF1sey2Yf7E7uu3-WfwnLRw2GXKsqPJwNBQkTFNEQQaSEDFfxBWCC9DFBgvoEp8wws5ID6IeFlCxnv2g8/s1600/box2-top.gif);
float: left;
border: 1px solid #E6E6E6;
width: 595px;
font-size: 11px;
margin: 0px 10px 10px 10px;
padding: 5px 10px 5px 10px;
}
]]></b:skin>

3. Terakhir yang harus dilakukan adalah menyimpan hasil editan ini, klik tombol Simpan Template dan Tutup.
4. Jangan senang dulu, mari kita cek apakah menu breadcrumbs khusus ini bisa terbaca oleh Google atau tidak. Solahkan sobat kunjungi Rich Snippets Tool untuk mengeceknya dan masukkan salah satu url posting, bila hasilnya seperti berikut,

maka proses membuat menu navigasi breadcrumbs yang bisa terindex Google sudah berhasil.
Tinggal tunggu hasil index maka semua postingan baru atau yang lama akan memunculkan menu navigasi breadcrumbs seperti ini :

Jadinya sangat keren ya
Bagi teman - teman yang belum membuat menu navigasi breadcrumbs yang bisa terindex google lekas membuat, dijamin akan sangat friendly dimata Google dan baik untuk perkembangan blog kita mendatang..

Selamat bekerja dan semoga sukses teman...


Sumber Utama:
http://creatingtemplate.blogspot.com/2012/07/cara-membuat-breadcrumbs-terindex.html

Rating: <span itemprop="rating">5</span>

Rating: 5