deZige

Modifikasi Tampilan Breadcrumbs Dengan CSS

Modifikasi tampilan breadcrumbs dengan css untuk menghasilkan breadcrumbs lebih baik dan menarik dengan menyesuaikan dengan background template blog

Modifikasi Tampilan Breadcrumbs Dengan CSS

Modifikasi Tampilan Breadcrumbs Dengan CSS - Tampilan breadcrumbs yang sederhana bisa kita modifikasi dengan tampilan yang lebih menarik dengan tambahan css didalamnya, baik itu dengan penambahan background atau dengan penambahan efek animasi dan gaya-gaya css lainnya, dalam hal ini breadcrumb yang akan di modifikasi adalah dari segi tampilan saja.

Untuk penempatan breadcrumb dari hasil modifikasi tampilan ini bisa diletakan diatas postingan atau dibiarkan melayang statis diatas atau dibawah halaman. Dalam modifikasi ini ada 2 pilihan warna yang digunakan, warna single (satu warna) dan warna gradient supaya lebih kelihatan timbul, kurang lebih hasilnya seperti gambar dibawah ini:

Modifikasi Desain Breadcrumb Dengan CSS

Breadcrumb Satu Warna


Letakan CSS dibawah ini dibawah <b:skin><![CDATA[ atau diatas ]]></b:skin> pada template.

CSS
#breadcrumbs {
  padding: 5px;
  list-style: none;
  background: #ccc;
  overflow: hidden;
  font: normal 14px Arial, Helvetica, sans-serif;
  border: 2px solid #eee;
  border-radius: 5px;
  box-shadow: 0 0 1px #000;
  text-shadow: 1px 1px 0 #ebebeb;
}
#breadcrumbs a{
  float: left;
  text-decoration: none;
  color: #000;
  position: relative;
}
#breadcrumbs a:after,#breadcrumbs a:before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -30px; 
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 16px solid;
  right: -16px;
}
#breadcrumbs a:after { 
  z-index: 1;
  border-left-color: #ccc; 
}
#breadcrumbs a:before {
  border-left-color: #eee; 
  right: -18px;
  z-index: 1; 
}
#breadcrumbs a:hover {
  text-shadow: -1px -1px 0 #ebebeb;
}
#breadcrumbs li a {
  padding-left: 26px;
}
#breadcrumbs .aktif:after,#breadcrumbs .aktif:before {
  content: normal; 
}
#breadcrumbs a.aktif:hover {
  text-shadow: 1px 1px 0 #ebebeb;
}

Breadcrumb Dengan Warna Gradient


CSS
#breadcrumbs {
  list-style: none;
  background: #C4C4C4;
  overflow: hidden;
  font: normal 14px Arial, Helvetica, sans-serif;
  border-radius:5px;
  text-shadow:1px 1px 0 #ebebeb;
}
#breadcrumbs a {
  padding: 5px 0;
  float: left;
  text-decoration: none;
  color: #000;
  position: relative;
  background: rgb(235,235,235);
  background: -moz-linear-gradient(left,  rgba(235,235,235,1) 0%, rgba(128,128,128,1) 94%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(235,235,235,1)), color-stop(94%,rgba(128,128,128,1)));
  background: -webkit-linear-gradient(left,  rgba(235,235,235,1) 0%,rgba(128,128,128,1) 94%);
  background: -o-linear-gradient(left,  rgba(235,235,235,1) 0%,rgba(128,128,128,1) 94%);
  background: -ms-linear-gradient(left,  rgba(235,235,235,1) 0%,rgba(128,128,128,1) 94%);
  background: linear-gradient(to right,  rgba(235,235,235,1) 0%,rgba(128,128,128,1) 94%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#808080',GradientType=1 );
}
#breadcrumbs a:after,#breadcrumbs a:before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -30px; 
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 16px solid;
  right: -16px;
}
#breadcrumbs a:after { 
  z-index: 1;
  border-left-color: #808080; 
}
#breadcrumbs a:before {
  border-left-color: white; 
  right: -18px;
  z-index: 1; 
}
#breadcrumbs a:hover {
  text-shadow:-1px -1px 0 #ebebeb;
}
#breadcrumbs li a {
  padding-left: 26px;
}
#breadcrumbs .aktif:after,#breadcrumbs .aktif:before {
  content: normal; 
}
#breadcrumbs a.aktif,#breadcrumbs a.aktif:hover {
  text-shadow:1px 1px 0 #ebebeb;
  background:none;
}

Sedangkan breadcrumnya sendiri letakan diatas <a expr:name='data:post.id'/>

HTML
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <ul id='breadcrumbs'> 
        <li> <a expr:href='data:blog.homepageUrl'>Beranda</a> </li>
        <b:if cond='data:post.labels'> 
            <b:loop values='data:post.labels' var='label'> 
               <li> <a expr:href='data:label.url' rel='tag'> 
                    <data:label.name/> 
                </a> </li>
                <b:if cond='data:label.isLast != &quot;true&quot;'/> 
            </b:loop> 
        </b:if> <li> <a class='aktif'><data:post.title/></a> </li>
    </ul>
</b:if>

Dua pilihan modikasi breadcrumb ini mudah-mudahan cocok untuk dipergunakan pada template blog kalian, jika kurang sesuai dari segi warna bisa mengganti nilai dari properti background dengan warna yang cocok dengan background template yang dipergunakan.

Semoga bermanfaat.

9 comments:

  1. Kalau sudah terpasang breadcrumb sebelumnya, gimana cara modifnya. Sudah saya terapkan step-step diatas tapi tampilan breadcrumbnya belum berubah. Terima kasih..

    ReplyDelete
    Replies
    1. Hapus dulu breadcrumb yang lama, letakan htmlnya pada tempat breadcrumb yang lama. Jangan lupa lakukan backup template untuk menghindari kesalahan.

      Delete
    2. udah jadi kang, tapi tampilan breadcrumb nya ga seperti contoh gambar diatas. saya leetakan kode breadcrumbnya bukan di atas kode <a expr:name='data:post.id'/> tapi di bawah kode <b:includable id='post' var='post'> karena breadcrumb bawaannya ada di situ, mohon solusinya. Hatur nuhun...

      Delete
    3. Maksudnya judul postnya loncat kebawah? itu karena ruangnya tidak cukup menampung panjangnya judul, untuk antisipasi bisa memperkecil ukuran hurufnya atau tidak menampilkan judul post dengan menghapus bagian html ini:

      <data:post.title/>

      Delete
    4. Alhamdulilah sudah ok, cuma posisi breadcrumb masih diatas judul postingan kang.

      Delete
  2. simpen dulu, thanks mas :)

    ReplyDelete
  3. Ketemu juga :D makasih mas :) keep sukses ..

    ReplyDelete
  4. Wah blognya keren kang I like This, breadcrumbs-nya sudah saya tes ok, taratenkyu...

    ReplyDelete
  5. sudah di coba belum berhasil...he...he...maklum masih bingung nih...
    perlu usaha lagi and terimakasih

    ReplyDelete

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin

Kontak SosMed

.
deZige