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'>2. Temukan kode css di bawah ini,
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<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'>
<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 == "true"'>
» <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>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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'/>
]]></b:skin>Lalu ganti dengan kode berikut
.breadcrumbs {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6rfyTD9l-90zRo0xaaIumBqVwqpyqsRMwwUR6PLpDLKp5r1D4c0mSof8G4kr8pY0npE9JncJy2hNZTvUu4Mzj5ACjwANHxaxaXzxOx6LWktQeX7YBCABu2xijgg7l5HgPOM7ptdH7AXw/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...
wah ini sepertinya tool SEo yang belum saya pakai.. :)
16 Juli 2012 pukul 06.33
Saya dah buat ni tapi bukan guna blogspot. Saya guna wordpress ja. Pakai plugin.
27 September 2012 pukul 00.02
kalau bisa terindeks berarti sangat bagus untuk SEO ya mas
5 Oktober 2012 pukul 23.29
Posting Komentar