Cari Artikel Blog Ini

Total Tayangan Laman

NAVIGASI BREADCRUMB DIATAS POSTINGAN

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.

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
9 Comments

9 komentar :

sichandra mengatakan...

ooh ini namanya navigasi breadcrumb toh... dari kemaren2 saya cari tutorial ttng ini , tapi gak ketemu2 juga... makasih yaa sob ^_^

astheams mengatakan...

dicoba dulu, do'ain ya biar berhasil!!!

astheams mengatakan...

Makasih...

astheams mengatakan...

Gimana ya, biar di bawahnya ada garis?

Ades mengatakan...

@astheams : Tips ini telah memiliki garis (double) sesuai dengan contoh diatas postingan.

E-YunK ( Bangkit Chairul Akbar) mengatakan...

koq di template sya gag ada kode post hentry'> ya?

Dwijayasblog mengatakan...

T . O . P .
Alhamdulillah, trick yang kau beri tepat sasaran. Ah, akhirnya muncul juga itu 'breadcurmbs'. Thanks for making my blog more SEO friendly. Thank you, Thank you, Thank you.

Siswo Priyono mengatakan...

Gan,..ane berhasil memamasang Breadcrum tapi judul Postingan yang awalnya bergerak jadi berhenti tdk mau bergerak lg ( animasi teks berjalan) bisa kasih solusinya Gan? thanks

teknologikomputer9 mengatakan...

Breadcrumb itu bisa menambah score SEO gak mas

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!