Home » » CARA MEMBUAT NAVIGASI BREADCRUMB DI BLOGGER

CARA MEMBUAT NAVIGASI BREADCRUMB DI BLOGGER


Kabarnya google menggunakan bredcrumb untuk menentukan serp di mesin pencari google. Pada beberapa hasil search google blog ini menunjukan bahwa memang google juga menggunakan navigasi breadcrumb dalam hasil pencarian google, meskipun belum sangat signifikan dampaknya pada serp tetapi dari pemantauan saya beberapa waktu terakhir memang kayaknya google lebih suka blog yang mempunyai struktur teratur.

Okey mari kita mulai...

Cara Pasang Breadcrumb Di Blogger Cara 1

1. Masuk ke blogger anda
2. Klik tab layout
3. Klik tab Edit HTML
4. Jangan lupa back up dulu template blog anda
5. Klik box beside Expand Widget Template expand
6. Cari kode ]]></b:skin>
7. Paste kode dibawah ini persis diatas kode ]]></b:skin>

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

8.Kemudian cari kode berikut
<div class='post hentry uncustomized-post-template'>

9.Paste kode dibawah ini tepat dibawah 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>

10. Save hasil modifikasi
11. Dan lihat hasilnya di blog anda.


Cara Pasang Breadcrumb Di Blogger Cara 2

1. Masuk ke blogger anda
2. Klik tab layout
3. Klik tab Edit HTML
4. Jangan lupa back up dulu template blog anda
5. Klik box beside Expand Widget Template expand
6. Cari kode ]]></b:skin>
7. Paste kode dibawah ini persis diatas kode ]]></b:skin>


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


8. Kemudian cari kode <b:includable id='post' var='post'>
Setelah itu letakkan kode berikut tepat di bawah kode <b:includable id='post' var='post'> tadi:

<div class='breadcrumbs'>
Browse: <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 != &quot;true&quot;'> / </b:if>
</b:loop>
</b:if> / <a expr:href='data:post.link'><data:post.title/></a>
</div>

9. Kemudian silahkan simpan perubahan template anda dan silahkan cek di halaman artikel (post page) apakah Breadcrumb sudah ada.


Cara Pasang Breadcrumb Di Blogger Cara 3

Navigasi breadcrumb di blogspot akan tampil berdasarkan label/tag dari postingan anda. Berikut tutorialnya.

1. Masuk ke blogger.
2. Pilih menu Tata Letak (Layout) » Edit HTML.
3. Centang tulisan Expand Widget Templates.
4. Cari kode beriku

<b:if cond='data:post.title'>

5.Tambahkan kode berikut di bawahnya.

<b:if cond='data:blog.pageType == "item"'>
<a href='http://namablog.blogspot.com/'>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/>
</b:if>

7.Jangan lupa ganti tulisan warna biru dengan nama blog anda.

8.Simpan template.

Anda bisa menambahkan garis di bawah navigasi dengan menambahkan kode di bawah kode <hr/><data:post.title/> di atas.


Selesai...... Semoga Bermanfaat.






Ingin tahu lebih cepat Tentang Artikel atau Info Terbaru yang di Publikasikan Oleh echa bintang timur ? Daftarkan e-mail anda di sini dengan secara otomatis anda dapat kiriman artikel terbaru dari echa bintang timur , Silahkan daftarkan email anda di sini ( Free )

Masukan email anda disini




Artikel Menarik Lainnya


14 komentar:

Belantara Indonesia mengatakan...

ada 3 macam breadcrumb....lalu apa bedanya masing2 nya ya?.....ga bisa liat contoh soalnya..hehehe...salam..

Asis Sugianto mengatakan...

Waduh mesti ngotak atik html nih,,, tapi keren banget tutorialnya sob,,, kapan2 saya coba dech...

sarif husin mengatakan...

luar biasa tipsnya,, saya mu tanya bikin tamplate seperti blog mas bagai mana?

akmal mengatakan...

sob tanya: kalo hanya nampilin label HOME dan LABEL TERAKHIR gimana yah... soale postingane banyk label thaks jawabannya

CÜpú kisяÜh mengatakan...

ane coba dan berhasil bang :)
makasih bang ..tips nya :D

tipshare mengatakan...

Tar mau dicoba, tanks infonya???
silahkan mampir balik www.tipsh4re.co.cc

Anonim mengatakan...

terima kasih yu infonya

Benteng Inpirasi mengatakan...

Wah,...tips bagus nih....
Coba dulu yah.....buat yang pengen mampir ke blogku silakan aja. sekalian silaturahmi...

Arifin mengatakan...

Wah,...tips bagus nih....
Coba dulu yah.....buat yang pengen mampir ke blogku silakan aja. sekalian silaturahmi...

muhaziz97 mengatakan...

sep-sep-sep....
Lagi-lagi bagus banget neeh posting...
Thanks yaaa ;)

lintasfacebook mengatakan...

Mas, saya banyak belajar dirumah mas ini, namun ada sedikit kendala yang membuat mata saya agak kurang sedap dipandang mengenai breadcrumb saya, saya ambil yang CARA NOMOR 2, dan ada double garis dibawahnya, maksud saya mas, gmana cara ngilangin garis dibawah tersebut. thanks banget mas <>

MENCARI TEMAN KENCAN WANITA mengatakan...

Greetings!What's up? :p It's good to know that you are still around this website. How did the last Google update affect your site? It seems that your blog is one of the strongest in the current SERP's! Hope you will maintain the quality, just don't forget about your friends Hope to see you soon!

KENCAN JAKARTA mengatakan...

I feel this is one of the such a lot vital info for me. And i am satisfied reading your article. But wanna statement on some common issues, The web site taste is perfect, the articles is in point of fact nice : D. Just right process, cheers.

IB UMOFX mengatakan...

untung saya pakek template blog saya sudah ada Breadcrumb hehehe... jadi tinggal posting saja..apalagi template blog saya seo markotop... visit to my blog BLOG SEO Markotop

Komentar anda tentang Artikel ini

Blog ini menggunakan Sistem DoFollow, jadi manfaatkan kesempatan ini untuk menempatkan link blog atau website anda agar di follow oleh bot mesin pencari. Sempatkanlah sedikit waktu untuk mengomentari Postingan Blogku, karna setiap kata yang anda berikan , sangatlah berharga untuk ku! Terima Kasih !!
Untuk yang tidak memiliki Account, silahkan pilih Beri komentar sebagai: Anomymous atau Name/URL

 

random post

My Link Banner

Pasang Iklan