Menu Breadcrumb Metro Style

Menu Breadcrumb Metro Style - Menu navigasi breadcrumb ini berfungsi untuk mempermudah para pembaca / pengunjung untuk menelusuri seluruh isi dari sebuah blog. Setiap blog yang pernah kita kunjungi pasti terdapat navigasi breadcrumb yang berada diatas title  post, mulai dari design sederhana sampai yang keren - keren / unik. Terkait dengan menu navigasi ini saya akan berbagi tips membuat Navigasi Breadcrumb yang bergaya metro style. Mungkin menu ini akan lebih cocok bagi mereka yang menggunakan template blog metro, seperti menu navigasi metro ui. Untuk tampilannya silakan lihat demonya dibawah ini :

• DEMO

Langsung kita lanjutkan ke cara pemasangan di blog, masuk Edit HTML >> Expand Template ( Tekan CTRL+A, CTRL+C, DEL, CTRL+V ). kemudian masukkan kode css dibawah ini sebelum kode [[ </b:skin>

#vn-brcmb{
  background: #02ab68;
  width:620px;
  margin-left:20px;
  border-width: 1px;
  font-family:&#39;Oswald&#39;, Arial, Helvetica, sans-serif;
  margin-top:40px;
  text-transform: uppercase;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
}
#vn-brcmb  li{
  float: left;
}
#vn-brcmb  a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ff8c00;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#vn-brcmb  li:first-child a{
  padding-left: 1em;
}
#vn-brcmb  a:hover{
  background: #ff8c00;
}
#vn-brcmb  a::after,
#vn-brcmb  a::before{
  content: &quot;&quot;;
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}
#vn-brcmb a::after{
  z-index: 2;
  border-left-color: #ddd;
}
#vn-brcmb  a::before{
  border-left-color: #ccc;
  right: -1.1em;
  z-index: 1;
}
#vn-brcmb  a:hover::after{
  border-left-color: #ff8c00;
}
#vn-brcmb  .current,
#vn-brcmb  .current:hover{
  font-weight: bold;
  background: none;
}
#vn-brcmb  .current::after,
#vn-brcmb .current::before{
  content: normal;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#vn-brcmb .current,
#vn-brcmb .current:hover{
  font-weight: normal;
  background: none;
}
#vn-brcmb .current::after,
#vn-brcmb .current::before{
  content: normal; 
}

Setelah itu cari kode <div class='blog-posts hfeed'>
Dan masukkan kode dibawahnya:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<ul id='vn-brcmb'>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></li>
<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;'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
</b:loop>
<b:else/>
</b:if><li><a class='current'><data:post.title/></a></li>
</b:loop>
</ul>
<b:else/>
</b:if></b:if>

Jika anda sebelumnya sudah memakai navigasi breadcrumb sebaiknya anda hapus terlebih dulu, agar tidak menjadi 2. Mulailah dengan kata " breadcrumb " untuk menemukan kode tersebut baik CSS maupun pemanggil breadcrumbnya

Demikian semoga bermanfaat, happy blogging.

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku