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.

Artikel Menarik lainnya:

tips bloger

• Cara Menghilangkan Attribution blogger
• Cara mengganti Posting Lama/Home/Posting baru dengan gambar atau Icon
• Membuat artikel terkait dalam bentuk gambar yang berjalan
• Cara Membuat Artikel Terkait/related post Plus scroll
• Cara menampilkan kotak komentar di bawah posting
• Dasar Dasar HTML
• Kumpulan Kode Warna HTML
• Cara membuat spoiler show hidden pada blog
• cara memasang scroll pada label/category :D
• TuTorial Cara Membuat Scroll Bar di Widget
• Cara Membuat scroll bar untuk arsip blogger
• Cara Membuat Daftar Isi Blog
• Cara Membuat Menu Drop Down Di Blogspot
• 6 Trik Paling Jitu Meningkatkan Visitor
• Mendaftarkan Blog/Situs ke 300+ Mesin Pencari

tips n trick

• Cara Menghilangkan Attribution blogger
• BISNIS ONLINE ( CARA MENDAPATKAN UANG DENGAN BLOG)
• Cara Mendaftarkan Blog ke search engine Bing & yahoo Tutorial
• Cara mendapatkan Uang dari Ziddu ?
• Cara Membuat Tulisan Terbalik di Facebook ( ʞooqәɔɐɟ !p ʞ!Ⴈɐqɹәʇ uɐs!Ⴈnʇ ʇɐnqɯәɯ ɐɹɐɔ)
• Cara mengganti Posting Lama/Home/Posting baru dengan gambar atau Icon
• Membuat artikel terkait dalam bentuk gambar yang berjalan
• Cara Membuat Artikel Terkait/related post Plus scroll
• Tips agar Facebook kita Banyak Mendapatkan Komentar
• Facebook buat sms Gratis!!!
• Cara menampilkan kotak komentar di bawah posting
• Dasar Dasar HTML
• Kumpulan Kode Warna HTML
• Cara membuat spoiler show hidden pada blog
• cara memasang scroll pada label/category :D
• TuTorial Cara Membuat Scroll Bar di Widget
• Cara Membuat scroll bar untuk arsip blogger
• Cara Instal Windows 7 menggunakan Flash Disk
• Auto Like Facebook : Cara Bikin Status Banyak Disukai
• Cara Membuat Daftar Isi Blog
• Cara Membuat Menu Drop Down Di Blogspot
• 6 Trik Paling Jitu Meningkatkan Visitor
• Mendaftarkan Blog/Situs ke 300+ Mesin Pencari

Widget by [ Boykean-archive ]