Home » » Cara Membuat Breadcrumb

Cara Membuat Breadcrumb

Konon, Google sangat suka pada blog yang telah dipasang Navigasi Breadcrumb yang salah satu fungsinya untuk memudahkan pengunjung dalam menelusuri halaman blog anda.

Pada dasarnya Navigasi Breadcrumb ini terpasang diatas postingan ketika postingan itu dibuka. Artinya Navigasi Breadcrumb ini tidak mengganggu tampilan halaman beranda dan halaman berikutnya sehingga keindahan blog anda tetap terjaga.
Navigasi Breadcrumb menampilkan tiga link dari blog anda yaitu : Home, Label post serta judul post yang sedang dibuka pengunjung. Lihat gambar dibawah ini :



Ada beberapa cara untuk menampilkan Navigrasi Breadcrumb, tapi karena hasilnya sama, admin hanya menampilkan satu cara, dengan harapan dapat anda terapkan pada blog kesayangan anda.

Ini langkah-langkahnya.
  1. Masuk ke Blogger.
  2. Masuk Rancangan bagian Edit HTML.
  3. Kasih tanda cek pada Expand Template Widget.
  4. Jangan lupa Backup dulu template anda jika takut gagal.
  5. Copy kode dibawah ini dan paste tepat diatas kode ]]></b:skin>

    .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #cadaef;}
  6. Selanjutnya copy kode dibawah ini dan paste tepat dibawah kode <div class='post hentry'> atau cari kode ini <b:includable id='post' var='post'> Paste kode dibawah tepat dibawahnya.

    <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>
  7. Simpan Template.
  8. Lihat hasilnya (Buka salah satu postingan blog anda).
  9. Selamat mencoba, semoga bermanfaat.

Source : http://epg-studio.blogspot.com/2011/02/menambah-navigasi-breadcrumb-diatas.html#ixzz1Ice0l5K2

Written by : Rinda Marestiani - Blogger

Assalamualaikum im Rinda. of Rinda Marestiani. Asli Blitar Jawa timur,,, '94 Generation. Memiliki Ibu yang luar biasa bernama Sudarwati dan Bapak super hebat bernama Suroso. Nah pada tanggal 15 Agustus 2014, tepatnya jika menurut kalender islam pas bulan syawal, di peristri sama lelaki hebat keturunan Madiun Sumbawa yang bernama Candra Aditya. Kesibukan saat ini full time be a lovely wife, learn blog, and 24 jam nemeni suami kerja. Thanks

Join Me On: Facebook | Twitter | Google Plus :: Thank you for visiting ! ::

1 comments:

  1. mkasih tutornya,, aku pakai udah bisa ,, Thanks,,,

    ReplyDelete