Cara Membuat Menu Navigasi Breadcrumb Di Blogspot

Cara Membuat Menu Navigasi Breadcrumb Di Blogspot

Menu Navigasi Breadcrumb ini merupakan salah satu penunjang SEO dalam sebuah blog. Dilihat dari pengertinya yaitu adalah sebaris link tautan internal pada bagian atas postingan atau dibawah halaman situs web yang memudahkan pengunjung untuk kembali ke bagian sebelumnya atau ke halaman dasar dengan cepat.

Cara Membuat Menu Navigasi Breadcrumb pada blogspot memang harus dilakukan secara manual. Tidak seperti pada wordpress yang memang kebanyakan templatenya sudah SEO Friendly alias sudah tersedia navigasi breadcrumbnya Nah untuk membuat blogspot SEO Friendly ada baiknya kita memasang navigasi breadcrumb di blog.

Saya yakin sudah banyak blogger yang sudah tidak asing dengan Navigasi Breadcrumb ini. Tapi siapa tahu masih ada yang belum tahu, dan juga bisa sebagai bookmark buat saya agar tidak repot2 mencari kesana kemari untuk membuatnya. jadi untuk para master blog lewati saja postingan ini. Hehehe

Untuk lebih jelasnya sobat bisa melihatnya dibagian atas setelah judul posting. atau perhatikan screenshot dibawah ini:

Demo

Berikut langkah-langkah membuatnya:

1. Masuk Rancangan/Layout
2. Pilih Edit HTML
3. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
4. Beri tanda centang "Expand Template Widget"
5. Tekan Ctrl+F (untuk mempermudah pencarian) Cari kode berikut:

]]></b:skin>

6. Copy lalu paste-kan kode dibawah ini tepat diatas kode diatas

.breadcrumbs {
border-bottom:1px dotted   #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

7.Kemudian carilah kode:

<b:includable id='main' var='top'>

8. Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.

<b:includable id='breadcrumbs' var='post'>  <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.labels'> Browse: <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> > <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> <a expr:href='data:label.url' rel='tag'> <data:label.name/></a> </b:if> </b:loop> <b:if cond='data:post.title'> > <data:post.title/> </b:if> </b:if> </b:if>  </b:includable>

9. Kemudian,cari lagi kode berikut:

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

10.Jika sudah ketemu,letakkan kode dibawah ini tepat diatasnya.

<b:include data='post' name='breadcrumbs'/>

11.Kemudian Simpan Templates dan Selesai.

Selamat mencoba dan semoga berhasil,,

Note: menu navigasi breadcrumbs ini hanya akan terlihat diatas artikel anda atau dibawah judul blog anda saat anda membuka halaman suatu posting bukan halaman utama blogspot anda.

source = http://pelajaran-blog.blogspot.com

Cara Membuat Menu Navigasi Breadcrumb Di Blogspot

Anda sedang membaca artikel : Cara Membuat Menu Navigasi Breadcrumb Di Blogspot dengan url http://arifpoetrayunar.blogspot.com/2011/08/cara-membuat-menu-navigasi-breadcrumb.html

Artikel Terkait: Cara Membuat Menu Navigasi Breadcrumb Di Blogspot

Cara Membuat Favicon Untuk Identitas sekaligus ciri khas suatu situs,biasanya seperti blog katalog,kumpul blogger dan yang lain biasanya mereka memak ...
Tabel Kode Warna HTMLBerikut Tabel Kode Warna HTML WARNACONTOHKODE Antique_white#FAEBD7 azure#F0FFFF Bisque#FFE4C4 blanched_almond#FFEBCD cornsilk#FFF8DC eggshel ...
Tips SEO Terbaru 2011 Berikut saya akan memberikan beberapa tips SEO yang bisa sobat gunakan sebagai pedoman blog sobat untuk tampil lebih baik di SERP google : 1. Bagus ...
Cara mengukur Berat / Size BlogPada waktu awal-awal membuat blog, saya sangat tertarik untuk menambahkan beberapa widget ke dalam blog saya. Mulai dari jam, kalender, serta beberap ...
Pasang Widget Google Plus / Google+ di Blog Sebelumnya saya pernah share Cara Daftar Google Plus dan Cara Bermain Game Online di Google Plus, tapi buat anda yang belum tahu dan ing ...