Cara membuat breadcrumb gaya metro UI

Cara membuat breadcrumb gaya metro UI

Cara memasang breadcrumb metro UI, halo sobat bloggers, kebetulan nih saya menemukan sebuah artikel memasang breadcrumb bergaya metro style atau metro UI (user interface) yang pada saat ini lagi ngeteren – ngetrennya gaya tampilan windows 8, kebetulan sekali breadcrumb ini cocok untuk template blog saya yang bergaya metro UI, breadcrumb metro style ini sama seperti breadcrumb pada umumnya hanya saya memiliki tampilan windows 8 dan tentunya menggunakan kode css yang berkesan modern, Baiklah tanpa basa – basi mari langsung saja , berikut cara memasang breadcrumb bergaya metro style di blog anda:

1.    Seperti biasa buka blogger kemudian buka bagian template dan klik edit html

2.    Temukan kode   ]]></b:skin> (tekan ctrl+f untuk pencarian lebih cepat).

3.    Setelah ketemu kode tersebut masukan kode berikut tepat sebelum kode ]]></b:skin>

Masukan kode dibawah ini:

#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; 

}

Kemudian cari kode <div class='blog-posts hfeed'>

Setelah ketemu masukan kode dibawah ini tepat dibawah kode <div class='blog-posts hfeed'>.

Masukan kode berikut:

<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>

Terakhir simpan template

Jangan lupa untuk mengecheck apakah bredcrumb nya sudah berhasil dipasang atau tidak

Share :

Tweet

More

Related Post