Pasang Breadcrumb (Navigasi) di Blog

hosting Pengertian breadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).

 

Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

 

breadcrumb

 

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

 

Baiklah, begini cara membuat breadcrumb-nya :

  • Login ke Blogger.
  • Langsung tuju Edit HTML.
  • Klik Expand Template Widget.
  • Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>

    .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #cadaef}

  • Setelah itu, cari kode seperti ini :

    <div class='post hentry uncustomized-post-template'>

  • Letakkan kode berikut ini tepat setelah kode <div class='post hentry uncustomized-post-template'>

    <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>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 != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

    • Simpan Template.

Coba sekarang lihat hasilnya, mantab kan ! oke deh..au revoir Thumbs-up

 

 

 

“ Gambar diambil dari : Biens-Naturels

Berlangganan artikel terbaru via Email
Artikel Lainnya :

26 comments

23 Desember 2009 21.19

nice post patut dicoba neh kayaknya..mantab mas..

24 Desember 2009 06.35

Mantap tutorialnya sob. Saya coba dulu ah! Makasi.

hmm, thank's sobh atas infonya.. info breadcrumb keren dah.. mampir balik yah :-)

24 Desember 2009 15.10

Lanjutkan ...

25 Desember 2009 05.22

Muy bueno el sitio me gustaria saber xcomo hacer para que en las entradas anteriores no se vea solo el titulo
DEsde ya muchas gracias
Tengo el mismo template que tenes vos !!!!

25 Desember 2009 07.24

ole ole buenos aries ando maradona
hueee...ck ck ck

25 Desember 2009 07.28

semanagat akhir tahun, makasih sob infonya . apa kabarnya nyh ?

duniakomputer-ku.blogspot.com
25 Desember 2009 08.54

mantap artikernya ,makin bagus aja ni blognya kalu dipasangin ini he 3x

27 Mei 2010 19.37

ko gda kode ni ya..
div class='post hentry uncustomized-post-template'
dah sya find tpi gda..
thx infony

31 Mei 2010 02.30

mantap sobat, makasih ye :)

30 Desember 2010 23.48

@naru_tio
cari aja kode ini,,,
div class='post hentry

29 Januari 2011 03.33

gan cara manipulasi pada kotak komentar ini gimana ya gan gw uda surfing tai ga ketemu2.
mohon pencerahnnya

31 Maret 2011 16.04

Thanks... TOP banget infonya gan...!!! siip... kereen deh infonya...

23 April 2011 13.59

sudah saia msukkan stlah kode div class='post hentry' tp stlah saia save kok mncul "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "{1}" associated with an element type "cond". hrus gmn ya gan... tolong di bantu...

24 April 2011 10.10

Ini breadcrumbnya akan muncul semua label kan om??
bukan cuman satu saja????????

24 April 2011 18.37

akhirnya bisa juga...
@gaptek... iya, itu akan muncul semua jka agan kasih label keyword bnyak di stiap postingan. kterangan bisa agan liat sndri diblog sya... ^^

2 Juli 2011 11.24

@All : sekedar saran buat yang templatenya beda. Bila gak menemukan kode div class='post hentry uncustomized-post-template' dapat dicari kode div class='post-title' sebagai gantinya (untuk kode breadcrumb ke-2). Bisa ditaruh di atas div class='post-title' atau dibawahnya...
Good Luck!

17 Agustus 2011 14.55

Alhamdulillah berhasil di pasang.
Trims

25 Agustus 2011 05.41

Terima kasih atas berbagi ilmunya...

30 Agustus 2011 14.38

Pakai breadcrumb navigasi ah....makasih

13 Oktober 2011 01.30

ora mempan nang blogku kang..

16 Januari 2012 08.52

Terima kasih atas brbagi tutorialnya sobat...alhamdulillah berhasil

28 Januari 2012 05.04

gak bisa bos padahal saya pake template Verde arriba

22 Februari 2012 16.16

mantaph......sudah lama vakum di dunia blogging,, sekarang intens lagi..hehe lupa kode kode dunia script jadinya nich... :P
makasih om

30 Juni 2012 12.38

sangat bermanfaat

14 Maret 2013 10.50

baca 5 menit, trs dipraktek in akhirnya berhasil blog ku skrg ada breadcrumb nya Kawan...

thanks author blog ini...

http://pak-iksan.blogspot.sg/2012/10/tentang-linetype-scale.html

Poskan Komentar

Reader Community

Recent Comments