September 02, 2013

Add Floating menu for blogger blog

This sticky Floating menu helps your users navigate through your site without having to scroll up again if you don't have the Scroll back to top widget.

Add Floating menu widget for blogger blog

How to install/implement this widget.
1. Goto your blogger dashboard > Template

2. Edit html and find ]]></b:skin>

3. 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/AVvXsEj3P_purk4SmZNGHGCq36ev6vAPJ82nYdYwYnj-u0R5BZFFJ1SfU0ZB4pnJvKM-AHEeN9grfdY6w21rjBmXKsqtjH0iSVo-kaYlDF30du3-41H3Mt90ZXaixqypUbaD9ol5o8HJFmwbISY/s1600/home.png);}ul#navigation .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpri73ocuBaWjyKAE4FMEL0r1KFh5yj3An4SkeKaUm-XkvG7khTAu9Z1j8xyK8OZEv0VEU6M94pC6Yz5Dtme8Ja-qQRyjLe69O79zSlznRAdPolH_yE1ewpM0Rc5q0iUzq4tz_EP1_ktU/s1600/idcard.png);}ul#navigation .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj74ydKyOW4DBfH9Bz3606IBy-2adjcESmfDDxSA1BMJ8IhXME1IrWEmPaQMkM_jpY6esyWE4YPtJZbwE2eD-VJht9tis8P3-gOzIvBvSm2CZAX8TYoHcMGEPRfXIdw0H_a97nQ73zuCj0/s1600/search.png);}ul#navigation .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB-HKANsnsCWjxT5fC-Ix6cc1bUvviMHV3WgzvmvCQHCpRvdbeLaUNOg99Y6V-BN7TkadYZoyHrJPf5u4pzn5qPfwsAIYlBV0X5IY6ZepxV2qeu83tt53nXlL-ci27O8kmoXyopLnXkCo/s1600/ipod.png);}ul#navigation .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz498N0ci34Eq6h4z6Z5YQ_pGboZBOT_whmLUMxSkAQnld4ZI6LESiEKW84W2DZgC0NNQyFARoFljytiLIATB_QGLr5JY7uPajfPtmoR843DmDb0fwp1QkHgJAzT3ejnJZ1jFq0MxgJms/s1600/rss.png);}ul#navigation .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9tccHDS6b6n6B8KvseEURpCZToH-stWZxTfj9WrS8tqLmbWOsF67BHJgvEI-K056G0CjGhuUA__brHZgBLbfQFIS7XOzIlBZg5LtZVB7Lhr09KM2xqgEEAB4xutzHsnlmI5ixtk2LrGI/s1600/camera.png);}ul#navigation .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL49vpAW1OrHIC8ksw5qfM5KI_ASgC9Xw2OqwIfMunJ_Maa2skXC1mLEQRuRGKFhRAF5ZIeipyXhrYSh5i0MIp-ueuXl9wf8PYQnapCDthwzdvuNsYqT7gC6kIAER_oPmqC6hHFevdcOk/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.