Find What You Need

14 Apr 2011

Membuat Navigasi Breadcrumb Dalam Template Blogspot

Tag : Kode CSS Menambah Navigasi Breadcrumb Di Blogger Template Ala BloggerBuster


  Breadcrumb adalah salah satu cara navigasi dan teknik untuk mempermudah pengunjung blog kita mencari informasi ataupun kembali ke halaman sebelumnya yang berhubungan dengan topik yang kita baca.

Contohnya seperti berikut


Untuk membuat dan menambah supaya muncul navigasi breadcrumb silahkan masuk dulu ke Draft Blogger
Sign In di Blogger
Dalam Dasbor --> Masuk Ke Rancangan --> Edit HTML
Kemudian Centang Expand Template Widget

Cari kode berikut
<b:include data='top' name='status-message'/>

Kemudian ganti dengan kode di bawah

<div id='breadcrumb'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
      <div class='breadcrumbs'>
Welcome to <data:blog.title/>
</div>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='breadcrumbs'>

          <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 class='post-title entry-title'><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'>
<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>
</div>

Kemudian Simpan dulu hasilnya.

Sekarang kita tinggal membuat kode untuk CSS nya, untuk itu copy kode CSS berikut :

#breadcrumb {
  border: 1px solid $bordercolor;
  padding: 5px 15px;
  margin: 10px 0;
  line-height: 1.4em;
}

Kemudian cari kode ini dan tempatkan kode CSS diatas kode ini </b:skin> .

Jangan lupa hasilnya di simpan.


Keterangan :

-  Tulisan " Welcome To " bisa kita ganti dengan tulisan apa saja, karena tulisan ini tampil di halaman muka ( HOME ) bagian atas postingan kita, misalkan dengan title blog kita.


-  Bila ingin ada background, tinggal menambahkan kode CSS di elemen #breadcrumb.


Belajar Bersama






***** Semoga Bermanfaat *****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS

4 komentar:

Beben Koben Pada 14 April 2011 pukul 20.38 mengatakan...

Embah google <=- ini mah blog dummies
ini blog aslinya mah
Prodigy of Head ama
Ben Tools
:-* :D

Anonim mengatakan...

I'm impressed, I must say. Rarely do I come across a blog that's both educative and entertaining, and without a doubt,
you've hit the nail on the head. The problem is an issue
that too few people are speaking intelligently about.
Now i'm very happy I stumbled across this in my hunt for something regarding this.



my page - webpage ()

semih mengatakan...

ıldır transfer
güzelbahçe transfer
foça transfer
mordoğan transfer
aliağa transfer

8KPWQ

Anonim mengatakan...

kyrie irving shoes
kyrie irving
cheap birkin bag
goyard handbags

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template