Posted by Aak
Aak-share.com Updated at: 4:11:00 PM

Membuat Breadcrumbs di Atas Judul Posting

No comments:
Navigasi Label di Atas Judul Posting Blog atau kata lain adalah breadcrumbs, breadcrumbs yang akan saya share ini dengan background warna menjadikannya lebih cantik. untuk anda yang ingin mempercantik postingan dengan beadcrumbs berikut ini langkah-langkahnya :


Membuat Breadcrumbs di Atas Judul Posting Blog

anda cari code <b:includable id='post' var='post'> selanjutnya anda letakkan kode dibawah tepat dibawah <b:includable id='post' var='post'>

Code html
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'><a class='icon-tags' data-icon='' expr:href='data:blog.homepageUrl'>Beranda</a> &gt;
<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> &gt; <data:post.title/>
</div>
</b:if>
</b:if>


Selanjutnya anda cari kode ]]></b:skin> dan terapkan kode dibawah ini diatasnya

Code CSS
.breadcrumbs{
  background: #5498C9;
  padding: 13px 20px 13px 20px;
  margin-bottom: 19px;
  font-size: 13px;
  color: #fff;
  border-radius:3px;
  position: relative;
}
.breadcrumbs a{
  color:#F3F3F3;
  text-decoration:none;
}
.breadcrumbs a:hover{
  color:#95A5A6;
  text-shadow: 0 0 6px #95A5A6 !important;
  text-decoration:none;
}

Apabila sudah diterapkan semua, anda simpan templat. Untuk warna background anda dapat merubah sesuai kreasi anda.
Sekian dulu dari saya Membuat Breadcrumbs di Atas Judul Posting, semoga bermanfaat.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments