Cara Menciptakan Breadcrumb Gaya Metro Ui
Cara menciptakan breadcrumb gaya metro UI
Cara memasang breadcrumb metro UI, halo teman bloggers, kebetulan nih aku menemukan sebuah artikel memasang breadcrumb bergaya metro style atau metro UI (user interface) yang pada ketika ini lagi ngeteren – ngetrennya gaya tampilan windows 8, kebetulan sekali breadcrumb ini cocok untuk template blog aku yang bergaya metro UI, breadcrumb metro style ini sama ibarat breadcrumb pada umumnya hanya aku mempunyai tampilan windows 8 dan tentunya memakai arahan css yang berkesan modern, Baiklah tanpa basa – busuk mari eksklusif saja , berikut cara memasang breadcrumb bergaya metro style di blog anda:
1. Seperti biasa buka blogger lalu buka bab template dan klik edit html
2. Temukan arahan ]]></b:skin> (tekan ctrl+f untuk pencarian lebih cepat).
3. Setelah ketemu arahan tersebut masukan arahan berikut sempurna sebelum arahan ]]></b:skin>
Masukan arahan dibawah ini:
#vn-brcmb{
background: #02ab68;
width:620px;
margin-left:20px;
border-width: 1px;
font-family:'Oswald', 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: "";
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 arahan dibawah ini sempurna dibawah kode <div class='blog-posts hfeed'>.
Masukan arahan berikut:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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 == "true"'>
<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
0 Response to "Cara Menciptakan Breadcrumb Gaya Metro Ui"
Post a Comment