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:

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.