Cara Membuat Breadcrumb di Blog -
Breadcrumb adalah menu navigasi yang menunjukkan letak atau posisi sebuah halaman yang sedang terbuka.
Breadcrumb biasanya di pasang di bagian bawah artikel atau di bagian atas postingan, tepatnya di atas atau di bawah judul artikel. Menu navigasi
Bread Crumb ini berupa
beberapa link yang menuju ke halaman homepage blog ( Home / Beranda ), link kategori atau label artikel serta judul artikel yang sedang terbuka. Untuk lebih jelasnya, lihat di bagian atas artikel ini.
Tujuan Membuat Breadcrum di blog
Saya pribadi menyukai
breadcrumb karena bread crumbs bisa menghiasi bagian atas halaman posting agar judul artikel tidak terlihat kaku. Tapi di balik fungsinya untuk mempercantik tampilan blog,
breadcrumb juga merupakan salah satu pendukung SEO. Menurut master SEO, dengan
memasang breadcrumb di atas judul artikel, mesin pencari akan lebih mudah menelusuri halaman yang ada di dalam blog sehingga kesempatan untuk tampil di halaman depan hasil pencarian menjadi lebih besar. Selain itu, dengan
membuat breadcrumb di halaman artikel pengunjung akan lebih mudah mencari artikel dengan label yang sama pada sebuah blog yang tidak dilengkapi dengan
Related Post / Artikel Terkait.
Hampir semua blog menggunakan
breadcrumb. Alasan utama blogger memasang menu navigasi SEO ini adalah untuk meningkatkan
SEO Blog. SEO yang yang kuat akan mendatangkan trafik yang melimpah. Blog tarfik yang melimpah akan menjadi sebuah ladang online dan pemiliknya akan panen dollar. Mau ???
Cara membuat Breadcrumb di blogger Membuat menu navigasi
bread crumbs di blog sangat mudah. Kopi, eh copy kode
breadcrumb, paste di template blog, klik simpan template, selesai...
Penjelasan selengkapnya tentang
cara membuat dan memasang menu navigasi breadcrumb di blog adalah sebagai berikut :
- Silahkan masuk ke dasbor blog anda dengan memasukkan username dan pasword blog anda di www.blogger.com.
- Selanjutnya buka halaman kode template blog untuk memasang kode breadcrumb di template.
- Belum tahu cara masuk ke halaman edit template ? Klik link di bawah ini untuk membaca artikel selengkapnya yang di lengkapi dengan gambar
"
Cara mengedit template Blog".
- Sudah tahu cara mengedit template ? Lanjutkan dengan memberi tanda checklist pada kotak kecil yang ada di depan tulisan "Expand template widget".
- Untuk berjaga² terjadi kerusakan template atau error karena melakukan kesalahan saat mengedit kode templatenya, sebaiknya DOWNLOAD dulu template blog anda.
- Copy kode html berikut ini :
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Anda berada di » <a expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>
- 7. Letakkan / Paste kode tersebut di bawah kode <div class='post hentry uncustomized-post-template'> template blog anda. Bisa juga letakkan kodenya di bawah kode <div class=’post hentry’> atau bisa juga di atas kode <div class='post-header-line-1'/> .
- Jangan lupa gunakan Gunakan Tombol F3 pada keyboard untuk melakukan pencarian kode dengan cepat.
- Apabila anda ingin mengedit kodenya, silahkan edit kode yang berwarna MERAH.
Selanjutnya........- Untuk mempersonalisasi tampilan Navigasi Breadcrumbs, cari kode untuk ]]></b:skin> di template blog anda.
- Copy kede CSS breadcrumb berikut ini, lalu Paste di atas kode ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0;
margin: 0 0 5px;
font-size:12px;
font-family: Georgia;
line-height: 1.4em;
border-bottom:4px double #000000;
}
Dengan kode tersebut, anda bisa mengganti besarnya font
breadcrumb dengan mengganti angka 12 menjadi lebih besar atau lebih kecil. Kode
Georgia adalah kode untuk jenis huruf yang di gunakan breadcrumb. Anda bisa mengganti jenis hurufnya dengan jenis huruf yang lain seperti
trebuchet ms, arial, verdana atau font lain sesuai keinginan anda. Untuk kode pada baris terakhir, angka
4 berarti besar garis bawah
breadcrumb adalah 4 piksel,
double berari garis ganda, dan kode
#000000 adalah kode HTML untuk warna hitam. kode tersebut artinya :
"Garis pinggir bawah
menu breadcrumb adalah garis ganda ( double ) dengan ketebalan garis sebesar 4 piksel dan garisnya berwarna hitam (
#000000 ). Anda bisa mengganti angka 4 menjadi lebih besar atau lebih kecil, kode :
double bisa di ganti dengan kode :
solid = garis tunggal biasa atau
dashed = garis putus - putus
Anda juga bisa mengganti warna tulisan
menu breadcrumb dengan mengganti kode warna hitam ( #000000 ) dengan kode warna yang lain, misalnya kode #B40404 untuk warna merah dan sebagainya. Untuk melihat lebih banyak kode warna, klik Link di bawah ini :
"
Tools untuk melihat kode warna"
Catatan :
Karena setiap kode template berbeda - beda, dengan cara di atas Navigasi
Breadcrumbs tidak terlihat pada beberapa template. Jika hal ini terjadi pada template anda, lakukan seperti berikut ini :
Copy kode HTML pada step 6 lalu Paste di atas kode
<div class='post-header'> template anda. Itu akan membuat Navigasi
Breadcrumbs berada di bawah Judul Artikel.
Jika ingin menyimpan
Navigasi Breadcrumbs di Atas Judul Postingan / Artikel, buat kodenya seperti berikut ini :
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Anda berada di » <a expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
- Cari kode yg berwarna HITAM.
- Kode yang berwarna BIRU, adalah kode yang sama pada STEP 6 , lettakan kodenya diantara kode yang berwarna HITAM persis seperti contoh di atas.
- Kode yang berwarna MERAH tidak penting, tapi kalau anda mengerti maksudnya, ya syukur.... hehehehehe..........
- Sekali lagi !!! Karena setiap kode template mungkin berbeda, carilah kode yang mirip.
Jika anda sudah terbiasa mengedit template, sebaiknya coba "
Cara membuat Breadcrums cepat terindeks". Tapi, jika anda belum terbiasa dengan kode HTML template blog, sebaiknya gunakan cara
membuat breadcrumb di atas. Kode untuk membuat
breadcrumb yang langsung terindeks jauh lebih banyak dari kode
breadcrumb biasa di atas. Selain itu, setelah
memasang breadcrumb yang cepat terindeks, akan sulit menghapus
breadcrumbnya karena kode yang di pasang sebelumnya akan terpisah ( hanya untuk beberapa jenis template ). Dari banyak template yang saya coba pasangi
breadcrumb yang langsung terindeks, tidak satupun yang membuat kode
breadcrumb tetap utuh.
Silahkan pilih mas bro....
Mau
membuat breadcrumb biasa, atau mau
membuat breadcrumb yang cepat terindeks. Tujuan dan
fungsi keduanya tetap sama, yang membedakan, hanya cepat tidaknya terindeks di hasil pencarian search engine.
Oce mas bro,... semoga artikel
cara membuat breadcrumb di blogspot ini bermanfaat.
Happy Blogging....
). Sesuai dengan namanya, Google SERP Checker akan membantu kita cek posisi artikel di hasil pencarian Google dot com, google.co.id, .am, .as, dan dot dot google lainnya 
