CSS3 Hover WireFrame Navigation Bar For Blogger

Hello Friends. In my previous posts, I have told you some codes to make navigation bars for blogger. I always prefer CSS to make navigation bars for blogger because it doesn't slow down the blog loading speed. So, once again, I am sharing a stylish wireframe navigation bar for blogger.

Follow The Instructions:

• Login to your blogger account.
• Go to Template > Edit HTML > Proceed > Expand Widget Templates.
• Now, find ]]></b:skin> in your template.
• Just below ]]></b:skin>, copy and paste this code:

/*menubar by pctricksguru*/
.pctricksguru_wireframeauramenu{
font-weight: bold;
font-size: 90%;
width: 760px;
margin: 0 auto;
}
.pctricksguru_wireframeauramenu ul{
border: 1px solid #BBB;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
overflow: hidden;
}
.pctricksguru_wireframeauramenu ul li{
display: inline;
}
.pctricksguru_wireframeauramenu ul li a{
color: #494949;
padding: 6px 12px 6px 6px;
margin: 0;
text-decoration: none;
border-right: 1px dashed #BBB; /*right border between menu items*/
}
.pctricksguru_wireframeauramenu ul li a:hover{
color: black;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd6_pzyrHtVd99-xT6wKXvfMfkpUcoTMQNccQzFwx2qZLIXCJ_jARmtml1ppr4FKsR8t_cjg0srhKnEyJMS6s8wPYoACP2TmVKeg8S-QoXrrVv3d-W2_Z7hc7U0L5KwNId6pM3kEslBg/s1600/pink.gif) center center no-repeat; /*background of menu item onMouseover*/
}

• Now Save your template.
• Now go to blogger dashboard and go to Layout.
• Click Add A Gadget and add a new HTML/Javascript gadget.
• Now, copy and paste this code:

<div class="pctricksguru_wireframeauramenu">
<ul>
<li><a href="#">Home page</a></li>
<li><a href="#">CSS Library</a></li>
<li><a href="#">Database</a></li>
<li><a href="#">Blog Videos</a></li>
<li><a href="#">Mobile App</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Support</a></li>
<li><a href="http://www.pctricksguru.com/">Get Help</a></li>
</ul>
</div>

• Save your gadget and that's it. Open your blog and check the navigation bar.

---

Note: Replace "#" with the required url. To change the color of the hower button, replacehttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSd6_pzyrHtVd99-xT6wKXvfMfkpUcoTMQNccQzFwx2qZLIXCJ_jARmtml1ppr4FKsR8t_cjg0srhKnEyJMS6s8wPYoACP2TmVKeg8S-QoXrrVv3d-W2_Z7hc7U0L5KwNId6pM3kEslBg/s1600/pink.gif in:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW62OBLMDjgzyDu3H4hDYaM5iQR-I_1Vs7jS-0E96UTzn0KBSDjsHEJeEgcCtQwYRCgZpk6hSOjfvl_dakHqv9JzL9sANvMT5m21S971TDhcbDC0MyBZPUuVwiLuafnrJmAXTLSc2cwHE/s1600/green.gif (For green hover)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwEPkSaS1katbXChwmOHhro_JYgPmvSO_xf6p3QTRRE2w6v5Mo6LwtKKeH81pqrH_WLPJp3wpARvUaUUVjphVIZpgBmrhf8Tl3gbdZHO-ypdy8JhoqsrY3Ut4cKONEZoRxXB7dmTlm6o/s1600/yellow.gif (For yellow hover)