February 19, 2011

Cara Pasang Navigasi Breadcumb di Blogger

Cara Pasang Navigasi Breadcumb di Blogger - Wuih. . . Udah lama juga ea gak posting, jadi lumayan kangen.. hehehe
Tadi pagi waktu gw buka blog ini, ada salah satu visitor yang nanya kayak gini di shoutmix: "mas, gimana caranya buat masang navigasi yang ada di atas judul postingan kaya yang ada di blognya mas agung?"
Sebenernya gw sempet bingung sama pertanyaan itu, tapi mungkin maksud dari pertanyaan itu adalah navigasi breadcumb.


Sebenarnya apa sih kegunaan dari navigasi breadcumb tersebut?
kalo menurut gw pribadi dengan memasang navigasi breadcumb akan dapat memudahkan pengunjung dalam mengetahui posisi suatu artikel (dimana letak artikel dan termasuk ke dalam kategori apa artikel tersebut). Selain itu, menurut para ahli SEO dengan memasang navigasi breadcumb akan lebih memudahkan search engine dalam melakukan pencarian dan mengindeks artikel-atikel yang ada di blog kita.

Untuk memasang navigasi breadcumb di blogger, berikut langkah-langkahnya:
1. Login ke dulu ke blogger.com
2. Pilh menu "Design"
3. Klik "Edit HTML"
4. Untuk berjaga-jaga bila terjadi kesalahan, back up dulu template yang digunakan
5. Beri tanda centang pada "Expand Template Widget"
6. Cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atasnya

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

7. Cari kode <div class='post hentry uncustomized-post-template'> kemudian letakkan kode di bawah ini tepat setelah kode tersebut

<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>

8. Klik "Save Template"

Dikarenakan setiap template berbeda, maka mungkin aja ada template yang tidak memiliki kode <div class='post hentry uncustomized-post-template'> didalamnya. Sebagai gantinya coba cari kode <div class='post hentry'> dan ikuti langkah di nomor 7 sampai dengan selesai.

Untuk melihat navigasi breadcumb yang kita buat tadi, silahkan masuk ke halaman blog lalu klik salah satu judul postingan. Lihat dibagan atas judul, jika ada tambahan satu baris tautan seperti pada gambar di atas, maka navigasi breadcumb telah sukses dibuat.








Related Post on Agung X-Zeg Indraguna's World_

12 komentar:

aulia rahman said...

sya punya blog tp nggk ada tulisan desainny kalo itu gmn caranya...?

Agung X-Zeg Indraguna said...

@aulia rahman : maaf sob.. waktu nulis tutorial di atas blog gw pake bahasa inggris.. hehehe
kalo blog sobat pake bahasa indonesia, maka sobat tinggal pilih menu "Rancangan" pada saat sudah Login.

Rosadtea said...

Sukses, trims gan.

Agung X-Zeg Indraguna said...

@Rosadtea : eapz.. sama-sama.. senang bissa membantu !!

Rizky said...

Terimakasih sob, ane pasang dulu yah, soalnya punya ane ilang

sendiri said...

makasih ilmunya ya sob...

lathzan said...

ane terapkan belum berhasil gan.help meeeeeeeeeeeee.

RELOAD.ID said...

makasih... di coba dan berhasil.


sangat bermanfaat.

Unknown said...

makin mantab sob...
jadi makin keren blognya :)

Mire Tahu Tempe said...

Alhamdulillah, setelah sekian lama nyari breadcumb akhrinyaketemu juga yang pas. Saya pake ya mas :D

roberoy said...

tengkiyu, gan gmn ilangin 'buat link ke posting ini' ?

pelajar full kasus said...

blogger walking sob

Post a Comment