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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaftb1luBGyB2YP_l4XkXSd9S4Rlj5fwy93tx97jjtLQdnLMKTdl7QFJQiIzEzHfXM63c8emhXdVhkdWo4gn-5gMjunOyY0iwZH2ThhBQmkXZQaRiND29Im5u8zgCU-dv0rmzUp_9Ow3M/s1600/btrix-home.png" style=""></a></li><li><a href="#"><span class="aname">Download</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFqbOMDpA1KIRBBSzVuyHw3-XugPzKn1v8u_0P-Q5GEpTq5_HuxVhWU1Uwn_iDLklQ8BLyLDXPAE2mebY3lCbQ9rhcfaPZfm2VFHjxXFq1SeuReC2dxY7P96heawDmvP_zk0XezP_A58/s1600/btrix-download.png" style=""></a></li><li><a href="#"><span class="aname"> MySql</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6sITGTbgRkd2xc3YyZGO6t-_Zr9UEtUIU2JHkTcZlxeQVK1gUCW3JZqIAa-rYHYzgwu5IhjLzXbGqqSOFUvHKXljLE4b7ANGYlYEaSRvRrH1jd5ZXcig-I12mMDRNwAq_F6UKmsKBWHQ/s1600/btrix-mysql.png" style=""></a></li><li><a href="#"><span class="aname"> Html5</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeNHXtFC7vREu_9YW9fJWKFK3PWlaVhKeX6vnMn5cmCx6hkS82dch7PXAYqmHnPTelZH8iKXpVT7uFgvgVvI7VagxqwRMUGars2otrYBGyymc950K0BrutlVjB7pM1YeXJeiV6u7uYKgg/s1600/Btrix-html.png" style=""></a></li><li><a href="#"><span class="aname">Contact</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBbljfnIuCHqhm-LHu7aOiD_MqzKiASI5h5UdJerJjeszlZBfx3YJC-2_kDxit2LFQaJ49BbOerNtIS88frSnpKl31iG9SyDVi8lIqSdLuuOSBN9caskbY-DQmN8bjhnPRYs3bVFf2rsc/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