Wednesday, May 7, 2014

Cara membuat Navigasi Breadcrumb You Are Here keren di blogger


Cara membuat atau memasang Navigasi Breadcrumb


Sebelumnya saya agak bingung dengan istilah ini, sebenarnya sudah tahu lama mengenai hal ini, namun saya tidak mengetahui apa nama/ istilahnya. Setelah mencari-cari di google, akhirnya saya mendapatkan istilah ini adalah Navigasi Breadcrumb.
Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.
Bisa dibahasakan/ dijelaskan dengan kata lain Navigasi breadcrumb sendiri adalah sebuah navigasi atau penunjuk halaman yang umumnya berfungsi untuk membantu memberikan informasi kepada  si pembaca tentang di artikel mana dan di menu apa si pembaca berada. Contohnya bisa dilihat seperti gambar di atas.

Cara membuatnya adalah sebagai berikut:

  1. Pastinya dan harus Log in ke akun blog sobat terlebih dahulu.
  2. Klik Rancangan --> Edit HTML --> ingat Klik Expand Template Widget.
  3. Letakkan kode berikut ini, di atas kode ]]></b:skin>
    .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;
    font-size: 90%;
    line-height:1.4em;
    border-bottom:1px solid black;
    }
  4. Kemudian sobat cari kode seperti ini :
    <b:includable id='post' var='post'>
    atau :
    <div class='post hentry'>
  5. Pastekan kode berikut ini tepat di bawahnya
    <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>
  6. Lalu simpan / save template dan lihat hasilnya.

Semoga bermanfaat, dan selamat mencoba :)

No comments:

Post a Comment

Silahkan Berkomentar di bawah tentang artikel ini. Mohon berkomentar dengan baik dan sopan, anda sopan kami segan.