Selasa, 19 Februari 2013
Breadcrumb adalah navigasi menu yang berguna untuk memudahkan pengunjung web/blog melacak lokasi dari sebuah dokumen dan kembali ke halaman awal dengan mudah. Breadcrumb biasanya terletak diatas judul postingan.
Lihat contoh Breadcrumb dibawah,
Home >> SEO >> Mengenal SEO
Dari contoh diatas, dapat kita lihat bahwa Breadcrumb menunjukan urutan sebuah halaman dari link yang umum ke link yang paling khusus.
Breadcrumb pada Blogger/Blogspot dapat dibuat berdasarkan label yang ada pada sebuah Blog.
Lihat ketentuannya : Halaman Utama >> Label >> Judul Posting.
Menu ini tidak muncul pada halaman utama sebuah Blog, tapi akan muncul pada halaman Label dan posting.
Fungsi Breadcrumb pada SEO.
Selain untuk memudahkan pengunjung, Breadcrumb juga membantu meningkatkan SEO. Berikut info yang saya dapat mengenai manfaat Breadcrumb pada SEO,
menambahkan keyword atau kata kunci yang anda fokuskan bangun dalam halaman Blog anda.
Dalam pencarian google, biasanya si mesin pencari ini juga menyertakan navigasi blog yang sedang di cari, atau bisa dikatakan bahwa google juga mengindex navigasi terkait keyword yang Anda isikan dalam kotak pencariannya.
Jadi dengan membuat Breadcrumb, lebih banyak keywords yang dapat di index oleh search engine.
Itulah sedikit perkenalan mengenai Breadcrumb.
Sekarang bagaimana Cara Membuat Breadcrumb?
Lanjut,
Ikuti tutorial berikut,
- Login ke akun masing-masing.
- Pilih menu “Template”.
- Klik “Edit HTML”.
- Centang “Expand Template Widget”.
- Sekarang cari kode ]]></b:skin> (gunakan CTRL+F).
- Jika sudah ketemu, copy kode dibawah dan letakan diatas kode ]]></b:skin>.
/* Breadcrumbs
----------------------------------------------- */
.breadcrumbs{
padding:0px 5px 5px 0;
margin-bottom:20px;
margin-top:0px;
font-size:11px;
color:#5B5B5B;
border-bottom:1px dotted #bbb;
}
- Masih pada bagian “Edit HTML”, sekarang cari kode <b:includable id='main' var='top'>. Jika sudah ketemu, hapus kode tersebut dan ganti dengan kode yang ada dibawah.
<b:includable id='breadcrumb' var='posts'><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'>
» <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: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'/>
- Langkah terakhir klik “Simpan template”, sekarang lihat hasilnya.
Semoga bermanfaat.
