Banner 468 x 60

Loading...
Loading...

Menu Breadcrumb Metro Style

cara pemasangan  Menu Breadcrumb Metro Style di blog, masuk Edit HTML >> Expand Template.
Kemudian masukkan kode css dibawah ini sebelum kode ]]><b:skin>

CSS nya adalah :
#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 Code <div class='blog-posts hfeed'> 

Dan copykan di bawahnya :

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

0 Response to " Menu Breadcrumb Metro Style"

Loading...