CSS Hover Icon Sliding Navigation Menu for Blogger Blogs

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

Homes

Download

MySql

Html5

Contact

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