Membuat Navigasi Breadcrumb di Blogger

Posted by Herman on Wednesday, August 25, 2010 30 comments

Tidak terasa sudah satu minggu saya tidak update blog ini. Hal ini dikarenakan saya sedang sibuk menata ulang konten di blog ini dan menambah beberapa tool ke dalamnya. Salah satunya adalah navigasi Breadcrumb.

Breadcrumb merupakan salah satu plugin milik Wordpress yang berfungsi untuk memudahkan pembaca dalam menelusuri halaman blog. Jadi ibarat peta atau sitemap dalam blog.

Plugin ini biasanya diletakkan diatas halaman posting. Contoh tampilannya seperti ini:
navigasi breadcrumb
Selain dapat memudahkan pembaca dalam mengetahui lokasi halaman yang sedang ditelusuri, plugin ini juga dapat mengoptimasi halaman blog di search engine (SEO). Bahkan dianjurkan langsung oleh Google lho. Tidak percaya? Berikut adalah kutipan yang saya ambil dari ebook 'Google Search Engine Optimization Starter Guide'.


Ingin mengetahui lebih banyak teknik-teknik SEO dalam ebook Google Search Engine Optimization Starter Guide? Silahkan baca disini.

Ok saya rasa cukup penjelasannya, untuk pengguna wordpress anda bisa download plugin Breadcrumb disini. Sedangkan untuk pengguna blogger ikuti langkah-langkah berikut untuk memasang navigasi breadcrumb:

1. Buka Blogger. Masuk ke menu Design -> Edit HTML

2. Beri centang pada 'Expand Widget Templates'.

3. Setelah itu, cari kode <b:if cond='data:post.title'>

4. Letakkan kode berikut dibawah <b:if cond='data:post.title'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</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 != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
5. Selanjutnya cari kode ]]></b:skin>

6. Letakkan kode css berikut diatasnya

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}
7. Jika sudah simpan template anda dan lihat hasilnya.

Semoga bermanfaat :)


Recent Posts:

30 comments

Car Reviews said... 28 August, 2010
mantap,gan. Asiknya kalau bisa kode html, gampang berinovasi. Coba praktek juga di blog saya ahh
Herman said... 28 August, 2010
@Car Reviews: iya gan, silahkan dicoba :)
faqeeh said... 17 September, 2010
makasih gan,, saya baru blajar...
Faqeeh said... 17 September, 2010
@Hermanoke bget
ardhi95 said... 18 November, 2010
thx banget gan nice
HermanBlog emang keren deh
Rosadtea said... 18 November, 2010
sukses gan
Kurniawan Rizky said... 06 December, 2010
wah ini dia yg saya cari,,,saya cari template yang kayak begini susah bgt,,,eh taunya ada HTML nya,,,,makasih mas,,,udah saya coba berhasil,,,visit my blog ya
Kurniawan Rizky said... 06 December, 2010
:D
raul said... 07 December, 2010
gan..saya sudah banyak copas html codenya dari sini..info disini bener banyak bantu saya dalam belajar blogging.
terima kasih banyak gan, terus berimprovisasi dan jangan lupa dishare ya gan...suwun gan..
zeroclothing said... 17 March, 2011
Thanks gan...
mantab.. Berguna Sekali :D
chankqal said... 30 April, 2011
;) mantab sudah terpasang di blog saya
Udiee Tukang Bcanda, S.Pd. said... 10 May, 2011
dimanakah shoutbox-nya ini blog ??
lynura said... 07 June, 2011
mantap ... langsung coba gan. heheheh...
thanks.;)
rejopro said... 20 August, 2011
thn gan Berhasill.. dr kemarin gak bsa2
Pian Uhuy said... 21 August, 2011
ga ngefek gan
Arief Ghazali Anwari said... 25 August, 2011
bisa gan berhasil thx =))
Distributor Natural Nusantara said... 24 September, 2011
Kok blog ku gak ngfek ya....http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif
playboylasut said... 08 October, 2011
mantap...
ryan mika said... 28 November, 2011
wah bro thanks banget yah,,,
randboyz said... 06 December, 2011
bro kok ga ngefek, kira2 kenapa ya? :-o :-/
Dee said... 11 December, 2011
terimakasih banyak, akhirnya saya bisa juga, awalnya bingung, ternyata setelah pakai tutorial ini bisa juga hehe..
KomRak said... 19 December, 2011
makasih gan :)
rachmad_boy said... 24 December, 2011
thank gan.. Suksess :)
kesukaanku said... 22 February, 2012
Makasih....gan
EdWin7 said... 22 March, 2012
Thanks, Gan info nya
Indoemu said... 01 July, 2012
wow mantap wow....
ane udah keliling kesana kemari..
gak ada yang bisa..
akhirnya yang ini bisaaaaaa....

makasih banyak gan :D

numpang parkir ya gan..
indoemu.blogspot.com
Deden Sudiana said... 11 July, 2012
Saya Coba y gan.. but saya copas artikel nya buat belajar ane,mampir gan di http://denz79.blogspot.com
Muhammad Fajar said... 08 August, 2012
mksih gan tutorialnya brmnfaat bnget, jgn lupa mampir ke blog ane ya http://webfajar.blogspot.com
teknologikomputer9 said... 03 November, 2012
seberapa besar kah pengaruh ini kepada SEO
zabdanhandicraft.com said... 25 November, 2012
Setelah Pusing nyari cara pasang Breadcrumb Akhirnya nemu juga yang cocok buat templete blog. Thanks Ya Gan.......

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment