Cara Memasang Breadcrumb di Blogspot termudah

Salam meong.... Kali ini miau akan membahas mengenai fitur navigasi yang biasanya di letakan pada bagian atas judul postingan blog, atau biasa di sebut breadcrumb. Pengertian breadcrumb adalah suatu sistem navigasi yang berisikan kategori atau label dari postingan blog milik kita dan bisanya selalu di awali dengan tombol menuju home atau beranda (halaman depan blog). Sebagai contoh silahkan lihat gambar di bawah ini. Pada bagian atas judul postingan 30 ILMU PELET, MAHABAH, PENGASIHAN, KIRIM MIMPI BASAH ada tulisan Browse >> Beranda Miau >> dst. Itu yang di sebut breadcrumb.

Pada dasarnya Breadcrumb merupakan sistem navigasi SEO dalam satu baris dengan tautan link internal halaman blog milik kita yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman utama (beranda / home) dengan cepat. Mungkin secara sederhana bisa di pahami seperti ini: search engine selalu membaca label atau tags dari setiap postingan blog, namun karena saat ini google sudah tidak menggunakan meta tag keyword lagi untuk melakukan indeks suatu website atau blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Karena hal inilah, semakin relevan sebuah label/kategori dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google. Berikut ini miau akan berbagi sedikit pengalaman dalam membuat breadcrumb tersebut, silahkan ikuti langkah megal-megolnya miau ya, hi.hi.hi. Pertama silahkan login terlebih dahulu ke bloger anda kemudian pada menu dashboard klik templete

 

Setelah muncul tampilan di jendela baru lalu anda klik Edit HTML seperti pada gambar di bawah ini yang di lingkari warna merah.

Setelah muncul tampilan seperti gambar di bawah ini silahkan klik Lanjutkan

   

Lalu akan muncul sebuah tampilan seperti pada gambar di bawah ini, silahkan anda klik kotak kecil yang bertuliskan Expand Template Widget

   

Setelah selesai, miau sarankan anda mencopy / mem_backup seluruh kode – kode tersebut terlebih dahulu ke dalam MS. Word misalnya. Kemudian silahkan anda tekan tombol Ctrl F pada keyboard komputer anda. Lalu masukan kode berikut ini ke dalam kotak kecil Find:

]]></b:skin>

Untuk lebih jelasnya silahkan lihat gambar di bawah ini

Setelah memasukan kodenya maka akan secara otomatis menampilkan letak kode tersebut pada halaman HTML nya, klik Highlight all supaya kodenya di blok berwarna untuk memudahkan anda. Silahkan anda copy dan pastekan kode berikut ini tepat di atas kode yang sudah di highlight tadi. Kodenya adalah sebagai berikut:

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

Setelah selesai lalu anda cari kode berikut ini dengan bantuan Find tadi

<div class='post hentry'

Setelah muncul lalu klik highlight all, kemudian silahkan anda copy dan pastekan kode berikut ini tepat di bawah kode yang di highlight tadi. Kodenya sebagai berikut:

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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> » <data:post.title/> </div> </b:if> </b:if>

Setelah selesai silahkan klik simpan templete lalu klik tutup.

Sekarang silahkan anda buka salah satu postingan halaman di blog anda dan akan ada perubahan di sana. Selamat mencoba ya, meong... hi.hi.hi.

Bila anda merasakan manfaat dari tulisan ini silahkan mengapresiasi dengan meng_klik iklan baris di bawah 2 atau 3 buah juga cukup tanpa ada kewajiban membeli.

Bagi anda yang suka copy paste tolong sertakan link sumbernya!!.

Rating: 4.5

Related Posts Tutorial:

Cara Memasang Breadcrumb di Blogspot Termudah
Cara Download video di youtube Termudah
Cara membuat blog Wordpress.com dan Blogspot.com Terlengkap
Cara Terlengkap Memasang Alexa di blogspot dan Free Wordpress
Cara Membuat Akun Facebook, Sejarah dan Tips Penggunaannya
Cara menghilangkan Babylon dari Firefox dan Google Chrome