Navigasi Breadcrumb di blogspot

Navigasi dalam blog merupakan tombol cepat yang bisa kita gunakan untuk menuju ke halaman- halaman/ link-link tertentu. Dengan adanya navigasi adalah memudahkan setiap pengunjung untuk menjelajah dari isi blog karena biasanya navigasi ditanamkan beberapa link yang sebagian besar adah link dari sebuah artikel yang dianggap penting, dan juga bisa menuju ke label tertentu. Mungkin kita telah mengenal beberap anavigasi dalam blog. kali ini kita akan bahas mengenai navigasi breadcrumb. Yaitu sebuah navigasi yang memudahkan untuk kembali ke halaman sebelumnya atau halaman tertentu. 
Biasanya susunannya yaitu browse >Home > label > judul posting.  Bagi sobat yang belum tahu cobalah lihat demonya disini [lihat di atas judul artikel]

Langsung saja bagaimana cara pembuatannya.
  • Pertama Login ke akun blogger sobat.
  • Pada halaman Dashboard Pilih Tata Letak - Edit HTML
  • Jangan lupa centang kotak kecil Expand Template Widget
  • Back up dahulu untuk antisipasi kesalahan fatal, Download Template Lengkap
  •  Carilah kode ]]></b:skin>  [tekan F3 atau Ctrl + F untuk memunculkan jendera pencarian]
  •  Letakkan Kode-kode di bawah ini di atas kode ]]></b:skin>  tadi
    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }
    sehingga menjadi seperti ini:
    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }
    ]]></b:skin>
  • Lalu cari kode berikut ini:
    <div class='post hentry uncustomized-post-template'>
  • Letakkan kode-kode berikut tepat di bawah kode tadi
    <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' rel='tag'>Home</a>
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    </b:if>
    &#187; <span><data:post.title/></span>
    </b:loop>
    </b:if>
    </b:loop>

    </div>
    </b:if>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <div class='breadcrumbs'>
    Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
    </div>
    </b:if>
    <b:else/>
    <b:if cond='data:navMessage'>
    <div class='breadcrumbs'>
    <data:navMessage/>
    </div>
    </b:if>
    </b:if>
  • Klik Simpan
  • Lihat hasilnya dengan membuka satu artikel saja...
  • selesai

Sangat mudah dan simple bukan. Kita berjumpa pada postingan selanjutnya.
BELAJARLAH DARI SEBUAH KESALAHAN, MENCOBA- DAN TERUS MENCOBA SAMPAI KAU BISA

Bookmark and Share

Posted by: Mas Eko
Download info - Tips trik - update - sharing, Updated at: 13:01

18 - komentar:

Unknown said...

Keren..... uey boleh di coba niee

Rizki said...

Memasang breadcrumbs navigasi sangat dianjurkan... bisa mendongkrak posisi blog di jajaran search engine.

Cuma mau koreksi.... itu ada yg salah tuh. Yg bener Edit HTML bukan Edit HMTL.

abu said...

Good..infonya good...ane aplikasikan ah...maklum ane kan g bgtu familiar dengan masalah IT..apalagi masalah scrift..wah repooooot...hehehe..

Didik M.A said...

HARI + ABU:
MAKASIH SOBAT

rizki:
makasih koreksinya...sobat..maklum nulis-nulis pas lagi gak konsen..lagi ngantuk waktu itu..

coodelz said...

ok satu lagi posting yg sama ama yg kubca tadi

Bang Salom said...

mantab didik postingannya, ditunggu lagi trik2 selanjutnya...sekalian aku jitak tuh AC, dibalas ya

Berita Bola said...

aku coba dech, sepertinya ini perlu dipasang di blogku..makasihya, kasih komen balikya

fashion said...

wow, keren ya sob

randyhawai said...

wah mangstabh neh, tutorialnya keremxx.. lanjutkan bro..

putra linggau said...

keren sob... terus terang info ini pertama kalinya aku dapat.. pasti nanti akan sangat aku butuhkan
thanks

astaga.com lifestyle said...

nice info gan.. bermanfaat bagi mereka yg pemula..

secangkir teh dan sekerat roti said...

boleh juga sepertinya nih.. :)

akhatam said...

Wah mantep triknya sob!!!

pembolangmaya said...

alhamdulillah ane udah pasang gan,,
and breadcrumb bantu seo kite

Tutorial Blogger said...

Perlu dicoba nih, blogku belom punya ginian...

makasih gan sharing-nya :)

ID File said...

Thanks infonya, Sukses

true woman indonesia said...

makasii infonya ... :D

flash card gratis said...

terima kasih atas informasinya

Post a Comment

Tiada gading yang tak retak, baka banyak pula hal yang salah dari aku. maka, tinggalkan walau hanya secoret komentar sebagai lankah ke depanku untuk lebih maju

NO SPAM NO PORN!