Wednesday 13 March 2013

CSS3 Hover WireFrame Navigation Bar For Blogger

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/AVvXsEjvf4OSMgdspjnQgADL_WU31iwQmVtn8AYGaTRi7WJQkiltEyCFSyFYssJ0HJas7JaS_kv_10UHxTKa7mrfkdRDgTkON16oTbYqX9l8LCUiObsU9VPzupymhLDVcANDpz5i_HQes62UYQM/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, replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvf4OSMgdspjnQgADL_WU31iwQmVtn8AYGaTRi7WJQkiltEyCFSyFYssJ0HJas7JaS_kv_10UHxTKa7mrfkdRDgTkON16oTbYqX9l8LCUiObsU9VPzupymhLDVcANDpz5i_HQes62UYQM/s1600/pink.gif in:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW6kpzUrihlF5ZnLflAb7xRaoJERfGyJ0k1FNz473jguSRdm9wVBpds2q-8XRv7MhuvaZvWhRLblYmxWDZIjssmG62xhCirIAEcpZfscIbZMjhI5RV-FLZ7z3MjSoiDn1nfsNbuXqg4zE/s1600/green.gif (For green hover)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNDMGqraRi7wWnAHI4E9Yo9Qu06JFlAi2D_flyGV2-u3oFY5U6_L-PlbaSuCoyhTiRU7POeppKr2_uxjtOs6YMqgsohEbpv266ey9TjyaznXwv3tzqe-zLtUPNxrRyMUw21CQPvSXfsKk/s1600/yellow.gif (For yellow hover)
Share:

0 blogger:

Post a Comment

Custom Search Box

Earn Money With Crypto

WazirX

Offers and Deals

Blog Archive

Contact Form

Name

Email *

Message *