Beautiful Floating Menu for Blogger

How to create floating menu for blogger, this one is really good and beautiful because it float in left sidebar and whenever user scroll down the page it automatically float with it and it create and ease for user to go on any page and it make easy to navigate any thing on your blog . It make your site user friendly

STEPS:

Goto your blogger dashboard > Teamplate
Edit html and find ]]></b:skin>
Now add below code just above the ]]></b:skin>

ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 10px; left: 0px; list-style: none; z-index:9999;}ul#navigation li { width: 100px;}ul#navigation li a { display: block; margin-left: -2px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; /*-moz-box-shadow: 0px 4px 3px #000; -webkit-box-shadow: 0px 4px 3px #000; */ opacity: 0.6; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}ul#navigation .home a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdV5oZjXmN2APUPXKcSm_sKVQaSWlDieKX2-Av1oWMKGgQcIm7qOntAiMbmDTwHh9LPmYCEpL6YQU3TGURDDDMXyj_bA5DXPPyCPvnLKd8Wpn_VSHeHl08NmyuqHikBViGJWABMwkYYNM/s1600/home.png);}ul#navigation .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRFw3ftIoJEPdsjs8nkIHk4IpNonhdabbxMcgA21cPCyp-_WxodKRniDNFa-FOcuGbM7aR5EXixncNKwGMImLazS7X2dJUQxxA0AR15sXZmQD2KYQyX_vvrxeBXmvDE4a6bGhqijWziAI/s1600/idcard.png);}ul#navigation .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicG4_bZEjA80ra2pOGff-tv7IwvmaHTxZuLJ1RUboErLXNohojV_bapL7nu9Wg-Q0BfUaVA7znRYL6z8m1IYYus4My3NqyHqPd9VwI43qepUBxifbhFdDdo4s7QbsQ4qjBNQhq2JaqyME/s1600/search.png);}ul#navigation .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLElmTQH7w_1MQqzUXLAFguDdh7k0HubJdqpbxA38-qcxFZecvsoOEO7d950NAKZry0JW3nt3baHBdGnWNP_RcOcPIqXKJrbO4Z-klELX0Zkv-gaLsFEDKC7iu142tbIuAVoVOKQ_rDAM/s1600/ipod.png);}ul#navigation .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhERqtGRIQXuk2vU6xPaGljKF4pW3EPHQ_7k2h2oKmU9NyZHDSiAliB1Y9epMIo0ZXmP2ufndTkP2ndgWrOsSuYamg00B0MzdmHDo_NhbGOJcjG2Ep2RrDoFSYnj_ru7foxGuG5Pwr9iz0/s1600/rss.png);}ul#navigation .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5F_JEBRCDNbggxcW54wFU1-2H5Ze8qXQR7nNKtw8-uA41DAq2A4AniKgXuUEb6fNMERGNEHWFPKhyphenhyphene6lCnNq2rlCiEdM4FgAKx8g5D6oWB_Dg6k-Ps-sB37gHjSLV96DFc2fVgFuuZo8/s1600/camera.png);}ul#navigation .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpoa-sa26DClymXBCZp1l-nKgEX8OF35mO2FauSmib9bdSOU5SZ450UFJc21hWi2xBKOKS6JH7IJNe4qoFURjWYVmTdALkZ4iwjgNbl60nNIo5qNuj06Z8cKpeu0oFVS20Ff5W_WdLn5c/s1600/mail.png);}

4. now find </HEAD> and paste below code just above </HEAD> tag

<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>

5. Now find <BODY> and paste below code just below it.

<ul id="navigation">
            <li class="home"><a href="#" title="Home"></a></li>
            <li class="about"><a href="#" title="About"></a></li>
            <li class="search"><a href="#" title="Search"></a></li>
            <li class="photos"><a href="#" title="Photos"></a></li>
            <li class="rssfeed"><a href="#" title="Rss Feed"></a></li>
            <li class="podcasts"><a href="#" title="Podcasts"></a></li>
            <li class="contact"><a href="#" title="Contact"></a></li>
        </ul>

Now replace # with your links and Replace there titles also.

Beautiful Floating Menu for Blogger

1 comments:

You Might Also Like it .......