20/02/11

Cara Pasang Breadcrumb Blogspot

Tutorial Bertuah ~ Cara pasang Navigasi Breadcrumb di blogspot supaya lebih SEO Friendly. Sebelumnya mari kita kenal lebih dahulu apa itu BreadCrumb? Kalau diartikan satu artinya bisa saja "remah roti" tapi bukan itu yang dimaksud, Breadcrumb disini adalah sebuah bantuan navigasi yang digunakan dalam user interface sehingga memudahkan user untuk menavigasi halaman web/blog. Istilah ini berasal dari jejak remah roti yang ditinggalkan oleh Hansel dan Gretel di dalam sebuah dongeng populer.



Selain mempermudah user dalam menavigasi web/blog kita selain itu juga di senangi robot Google yang mengcrawl halaman weblog. Maka erat kaitannya dengan SEO, terutama SEO onpage. Sebaiknya kita memasang kode Breadcrumb sedini mungkin supaya cepat di indeks Google, hasilnya tampilan url posting blog kita akan lebih rapi dan cantik di tampilkan di SERP Google, sebagai contoh silahkan lihat tampilan SERP artikel NanLimo tentang SEO Contest Komodo Island is the NEW 7 Wonders of The World di bawah ini:
Cara Pasang Breadcrumb Blogspot
Dari gambar diatas terlihat pada bagian yang dilingkari warna merah itulah hasil indeks Google dari Navigasi Breadcrumb yang kita buat, biasanya pada bagian yang dilingkari itu adalah URL postigan kita namun setelah menggunakan Navigasi Breadcrumb tampilannya lebih rapi dan cantik serta memudahkan user/pengunjung untuk melihat kategori artikel tersebut yang terlihat pada lingkaran yang berwarna biru.

Lalu bagaimana cara membuat Navigasi Breadcrumb tersebut? Sebenarnya telah banyak yang membuat tutorial cara membuat navigasi breadcrumb, baik di wordpress maupun di blogspot. Kali ini tutorial cara pasang breadcrumb di blogspot agak berbeda dari yang sudah-sudah, ada sedikit sentuhan dari Blogger Bertuah, salah satunya Bang Ais, founder www.duosmith.com--Duo Smith Elios. Berikut ini adalah cara membuat breadcrumb di blogger.com/blogspot.com
1. Login ke blogger degan ID anda.
2. Klik Tata Letak / layout
3. Kemudian klik tab Edit HTML
4. Click Download Full Template and please back up your template first. Untuk menghindari bila sewaktu-waktu ada kesalahan.
5. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

6. Cari kode ]]></b:skin>
7. Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #e2e7b4;
}
.breadcrumbs a {
text-decoration:none;
color: #000000;
}
8. Silahkan cari kode berikut pada template anda :
<div class='post hentry'>

9. Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry'>
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Ganti Dengan Kata Kunci Utama Blog</a> &#187; <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 != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>
Simpan/save dan silahkan lihat hasilnya secara langsung di atas judul postingan "Cara Pasang Breadcrumb Blogspot" ini dan bisa juga di lihat pada bagian halaman posting blog kita masing-masing, maka hasilnya mirip dengan dengan gambar di bawah ini:
Contoh Navigasi Breadcrumb
Style template seperti ini akan menambah seo friendly sebuah template dan semoga akan semakin meningkatkan serp anda dalam search engine. Semoga berhasil dan kalau ada pertanyaan tentang Cara Pasang Breadcrumb Blogspot silahkan isi kolom komentar di bawah. Salam Blogger Bertuah. (*/dat)

65 comments:

SuryaPost.com mengatakan...

Thanks infonya..saya dah berhasil pasang..

Pelitedabo mengatakan...

Trima ksih ats panduannya... salam tuk smua..

roomantik mengatakan...

Makasih gan saya sudah berhasil pasang breadcrumb di atas judul post

tv mengatakan...

Terima Kasih,..Berhasil....

bagoes mengatakan...

selesai ujian,lgsung dicoba

Citimaxiss mengatakan...

Oops i did it..... Mantap
Thanks for share :)

ioneday mengatakan...

inilah info yang saya cari mass

PHOTOSHOP DASAR mengatakan...

Ya bisa...
tetapi kalau kita ingin meletakkannya di bawah kotak komentar bagaimana mas? tolong dibantu....

ochie mengatakan...

wah thanks. dari sekian artikel yang saya baca.artikel ini yang berhasil !!!

automotive mengatakan...

makasih tutorialnya, berhasil di pasang...

Guru Professional mengatakan...

berhasil mas.. trims..

j-r mengatakan...

mantap..terimakasih tutorialnya.!!

us.sugreen mengatakan...

weh mantep kek y nih mas
mau coba dulu deh

bang huda mengatakan...

mantab bang. sudah saya praktekkan

spy cam kamera pengintai mengatakan...

mas gan,.. punya sama blm muncul di halaman search google Breadcrumb nya,.. apa ada yg salah? apa harus nunggu dlu untuk di index?

khai mengatakan...

terimakasih..bermanfaat!

:D

Marda A'rauf mengatakan...

terima kasih,,
kalau ada waktu kunjungi blog saya juga ya :)

Tutorial Photoshop mengatakan...

thx gan
sukses

chxer mengatakan...

makasih om infonya
kalau ada waktu kunjungi gubuk tua saya om yg masih sangat beru di http://www.chxer.blogspot.com
jadi maklum n di tunggu om saranya heheh

Denny global mengatakan...

tríms atas tutorailnya, langsung ku coba deh...........

Andri Firmansyah mengatakan...

langsung pasang

Obat HIV Aids mengatakan...

mantap gan. coba ah.

aa irwan mengatakan...

keren tipsnya. slm knl.

Tarso Brekel mengatakan...

makasih gan, tapi sayang ane kagak berhasil

Pantun Pagi mengatakan...

Tipnya cukup detail dan lengkap, makasih sob..

safety start for my mengatakan...

makasih om atas tips nya buat saya soal nya saya baru di dunia blogker nih salam kenal

dp-media mengatakan...

Makash za mas....boleh di coba...(visit back za (http://dp-media.blogspot.com)

Sepeda Motor Injeksi Irit Harga Terbaik Cuma Honda mengatakan...

Langsung praktek ddan berhasil, terimakasih sob

Gadget nawan mengatakan...

Saya kira breadcrumb tu apa ternyata sitemap link label di post ya.. Alhamdulillah blog saya sudah tersetting dari template bawaannya
trims buat ilmunya ini agan..

didytul mengatakan...

gan kode ini kok gak ktemu ya?
gimana solusinya?
div class='post hentry'

blog rakata mengatakan...

mkasih gan wad info'a...
yg ini lbih simple dan gmpang dimengerti...

I Made Setyawan mengatakan...

Makasih info nya langsung dicoba saja biar seo frendly,suwun

Blogger Otodidak mengatakan...

Hatur nuhun infonya kang,
salam kenal dari saya :)

Goyang Karawang mengatakan...

mantap langsung dipraktekan bos.. thanks

Shafiq Mujahid mengatakan...

berhasil akhirnya ^_^

trii waluyo mengatakan...

thx sob,, akhirnya jadi juga...
terima kasih

AgaSifa mengatakan...

senang sekali bisa mampir, trims buat para master yg berperan di blog ini..
salam dari si newbie agasifa.blogspot.com

indy mengatakan...

maksih tipsnya, berhasil diterapkan. lihat blog ku. ^^

Apakah Blog Bisa Menghasilkan Uang? mengatakan...

thanks ya mas tipsnya, diterapkan dengan sukses :)

devi nurlaela mengatakan...

terimakasih agan,dah sukses nih...

http://melileastore.blogspot.com

seo:backlink otomatis dan gratis? mengatakan...

terima kasih banyak atas informasinya

yusrin mengatakan...

bagus gan......cuma mohon maaf saya udah utak atik sedikit script diatas soalnya tidak sesuai dengan template saya......

Oh ya, gan. saya tunggu ya follow baliknya.....
soalnya situs saya masih baru.....
saya jjuga sudah jadi followers agan.......

terima kasih ya....semoga lain kali kita bisa bertukar pikiran.

Ganes Putra mengatakan...

trims info, visit back http://www.bocahdoko.co.cc :)

efri mengatakan...

mantap

wahanahitam mengatakan...

makash infonya...

Kata indah mengatakan...

mantap, thanks infonya

Sopandii Yusuf mengatakan...

ok sudh berhasil terpasang :) tengkyuhh

Sopandii Art

Don't Touch Me

tris mengatakan...

Terima kasih tutorial nya sudah saya coba dan berhasil...

Anonim mengatakan...

tutorial nya ok mas, aku ijin copas

lagu kord gitar mengatakan...

terima kasih gan , aku sudah lama cari cara buat breadcumber

Free Download PES 2013 mengatakan...

Nice infonya Sob
jngan lupa untuk Berkunjung Balik Ke Blog Ane

Salam Xtreme Blog

cerita cinta mengatakan...

thanks om infonya,, membantu !! sekarang udah bisa.

Alat Bantu Sex mengatakan...

wah makasih banyak gan

Kursus Web mengatakan...

Thanks sharing ilmu yang bermanfaat. Kunjungan balik gan.

Kursus web mengatakan...

Informasi yang bermanfaat sekali

Industrial Maintenance mengatakan...

kalau mau pesan masih ada barangnya tidak pak?saya di daerah ragunan pasar minggu

Armstrong mengatakan...

berapa jam charge full pak?

motivator indonesia mengatakan...

saya mau nanya bagaimana cara beli barang di toko online?

percetakan jakarta mengatakan...

bisa merekam maksimal sampai berapa menit bos?

alat berat mengatakan...

kalau saya colokin terus USBnya ke komputer dia ngecharge tidak pak?

water filter mengatakan...

ada tidak alat perekam yang bisa langsung online di hp,atau mp4 terus berapa harganya?thanks bos

Furniture Jakarta mengatakan...

bisa untuk foto juga tidak?kadang-kadang kita kerja punya waktu sedikit mungkin tidak sempat rekam.jadi kita butuh untuk foto aja

Web Design Indonesia mengatakan...

bos mau tanya nih,kalau yang sampai 1 hari ada buat merekam kayak pen came gitu?dan berapa harganya?

pressure gauge mengatakan...

saya tertarik dengan kamera pengintai yang bisa 1hari bentuk jam weker (desk clock),harganya berapa?dan bentuk wekernya seperti apa?

ahli renovasi mengatakan...

it's wok... terima kasih, sudah saya praktekan

Posting Komentar

Silahkan Berkomentar disini...