HackingUniversity - Hacks . Tricks . How-To's

17 August 2013

CSS Hover Icon Sliding Navigation Menu for Blogger Blogs

CSS-icon-hover-menuCSS icon sliding navigation menu for blogger blogs can be used in order to display your best pages on priority. You can easily add your about link and homepage links + it looks really awesome too, so basically it's a CSS based stuff so it is not going to make your blog load heavy but it works smoothly and like a charm. So if you are thinking how this menu looks like well I have a working demo below just check it out and then apply it to your blog.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

    #btrix-nav{height:87px;list-style:none;margin:10px auto;overflow-y:hidden;width:624px}#btrix-nav li{float:left}#btrix-nav li a{border-bottom:1px solid #555;border-top:1px solid #bbb;color:#FFF;display:block;height:61px;margin-top:24px;text-align:center;text-decoration:none;width:120px}#btrix-nav li a span.aname{color:#fff;cursor:pointer;font:bold 17px/61px Arial;position:relative;text-shadow:1px 1px 1px rgba(0,0,0,0.5);text-transform:uppercase;top:0;transition:top .5s ease}#btrix-nav li a img{position:relative;top:0;transition:top .5s ease}#btrix-nav li a:hover{cursor:pointer}#btrix-nav li a:hover img{top:-85px}#btrix-nav li a:hover .aname{top:85px}#btrix-nav li:nth-child(1) a{background:#3eb006;border-left:1px solid #bbb;border-radius:5px 0 0 5px}#btrix-nav li:nth-child(2) a{background:#9bc704}#btrix-nav li:nth-child(3) a{background:#0dc3ff}#btrix-nav li:nth-child(4) a{background:#51a2ec}#btrix-nav li:nth-child(5) a{background:#6e3cab;border-radius:0 5px 5px 0;border-right:1px solid #555}

  3. Now press Save Template.
  4. Now navigate to Blogger > Layout > Add Gadget.
  5. Choose HTML/JavaScript Gadget & paste below code into it.

    <div id="btrix-nav"><li><a href="#"><span class="aname">Homes</span><img src="http://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" style=""></a></li><li><a href="#"><span class="aname">Download</span><img src="http://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" style=""></a></li><li><a href="#"><span class="aname"> MySql</span><img src="http://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" style=""></a></li><li><a href="#"><span class="aname"> Html5</span><img src="http://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" style=""></a></li><li><a href="#"><span class="aname">Contact</span><img src="http://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" style=""></a></li></div>

  6. Now change the # tags with your links.
  7. That's it now Save your Gadget and align it where you this gadget to be rendered up, enjoy this awesome gadget. via - bloggertrix