How to add floating dropdown menu on Blogger

Floating Dropdown Menu is most popular and easy to use on blogger.It gives nice asthetic beauty on your blog and can customize as per your theme on your Blog. It is easy to use and totally CSS coding .By simple modification you can easily get your Own Floating menu for your Blogger.

Table of Contents

Benifits of Floating Dropdown menu

Now a days Floating dropdown menu, Floating Share buttons,Floating share icons are most popular on blogging sector due to ease to handle and asthetic Purpose.Navigation menu is an essential part of any blog or website. It helps visitors to easily navigate throughout the whole blog. A dropdown menu is a simple horizontal menu with an extra dropdown list. This extra list helps in adding more number of links to your navigation menu. Suppose if you have large number of post categories in your blog then a simple horizontal navigation menu will fail to provide required space to your links.

So, using a dropdown navigation menu is a better choice rather then using a simple horizontal menu. Having a floating dropdown menu in your blog is another plus point because accessing a floating dropdown menu is very easy. It always remains on top of the blog whether the visitor scrolls the blog up or down. So to make your blog`s navigation system easily accessible for your visitors you must use floating dropdown navigation menu on your blogger blogs.

Features of Floating Navigation Menu

The Main features of floating menu are listed below:

Light weight CSS code which do not effect your blog`s loading speed.
In built Social media icons.
Beautiful CSS color gradients are used for menu design.
Easy to add and customize.

How to add CSS-dropdown menu in blogger

Login to your blogger dashboard from your Google account.
Select your blog where you want to add floating dropdown menu.
Select Template option.
Click Edit HTML (Just clickk on arrow beside Customize tab .)
Find </head> in the template code.
Paste following code just below it and save the template.
Preview your blog to see the new floating dropdown menu in action.

#wc-soc-menu{
margin:0 auto;
display:block;
padding:0;
font-family: 'georgia', sans-serif;
}

#wc-soc-menu ul{
float:left;
margin:0;
padding:0;

}

#wc-soc-menu li{
float:left;
list-style:none;
line-height:50px;
margin:0;
padding:0
}

#wc-soc-menu li a, #wc-soc-menu li a:link{
color:#f0f0f0;
display:block;
margin:0;
padding:0 10px;
font-size:16px;
text-decoration:none;

}

#wc-soc-menu li a:hover, #wc-soc-menu li a:active, #wc-

soc-menu .current_page_item a {
color:#fff;
padding:0 10px;
}

#wc-soc-menu li li a, #wc-soc-menu li li a:link, #wc-soc-

menu li li a:visited{
font-size: 16px;
background:#f84242;
color: #fff;
width: 150px;
margin: 0;
padding: 0px 10px;
line-height:30px;
position: relative;

}

#wc-soc-menu li li a:hover, #wc-soc-menu li li a:active {
background:rgba(197,52,52,1)

color: #fff;
}

#wc-soc-menu li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:168px;
margin:0px;
padding:0px

}

#wc-soc-menu li:hover ul, #wc-soc-menu li li:hover ul, #wc-

soc-menu li li li:hover ul, #wc-soc-menu li.sfhover ul,

#topwc-soc-menu li li.sfhover ul, #topwc-soc-menu li li

li.sfhover ul{
left:auto
}

#wc-soc-menu li:hover, #wc-soc-menu li.sfhover{
position:static

}

#wc-soc-ico img
{
margin-left:-6px;
height:35px;
margin-top:9px;
}
</style>

<div id=’wc-soc-nav’>
<div id=’wc-soc-menu’>
<ul>
<li>
<a href=’http://ergwifi.blogspot.com/’>Home</a>
</li>
<li>
<a href=’#’>Love »</a>
<ul>
<li><a href=’http://ergwifi.blogspot.com/search/label/Love’>Feelings</a></li>
<li><a href=’http://www.majheri.com/’>Nepali Literature</a></li>
<li><a href=’http://www.majheri.com/taxonomy/term/9′>Gajal</a></li>
</ul>
</li>
<li>

<a href=’#’>Location »</a>
<ul>
<li><a href=’http://www.whatismyip.com/’>your IP add</a></li>
<li><a href=’http://www.maplandia.com/nepal/midwest/bheri/surkhet/’>Surkhet</a></li>
<li><a href=’https://www.facebook.com/hamromalarani’>Malarani</a></li>
<li><a href=’https://maps.google.com/’>Google Map</a></li>
</ul>
</li>
<li>
<a href=’#’>Gallery »</a>
<ul>
<li><a href=’http://ergwifi.blogspot.com/p/gallery_21.html’>PhotoGallery</a></li>
<li><a href=’http://songspk.name/’>Hindi songs</a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/MP3′>Best songs</a></li>
<li><a href=’http://emp3world.com/’>English Mp3</a></li>
<li><a href=’https://www.youtube.com/’>Video</a></li>
</ul>
</li>
<li>
<a href=’#’>Books »</a>
<ul>
<li><a href=’http://ergwifi.blogspot.com/search/label/Documents’>Imp Documents</a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/Civil%20engineering’>Engineering</a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/Excel%20files’>Excel files</a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/IELTS’>IELTS/TOFEL Test</a></li>
<li><a href=’http://www.astrosage.com/freekundali/home.asp’>Kundali </a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/Astrology’>Astrology </a></li>
</ul>
</li>
<li><a href=’#’>News »</a>
<ul>
<li><a href=’http://www.bbc.com/news/world/’>World news</a></li>
<li><a href=’http://www.bbc.co.uk/nepali/news/’>BBC Nepali</a></li>
<li><a href=’http://www.ekantipur.com/’>Kantipur</a></li>
<li><a href=’http://www.thehimalayantimes.com/’>Himalayan Times</a></li>
</ul>
</li>
<li>
<a href=’#’>Tricks »</a>
<ul>
<li><a href=’http://ergwifi.blogspot.com/search/label/facebook%20tips’>Facebook </a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/PC-tips’>PC trick </a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/Mobile’>Mobile </a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/Mobile’>CMD tricks </a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/Blog’>Blogger </a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/Notepad%20trick’>Notepad </a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/WI-FI%20hack’>Wifi Hacking </a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/Other’>Other</a></li>
</ul>
</li>
<li>
<a href=’#’>Download »</a>
<ul>
<li><a href=’http://ergwifi.blogspot.com/search/label/pc%20soft’>PC-Software</a></li>
<li><a href=’http://ergwifi.blogspot.com/search/label/Mobile%20apps’>Mobile software </a></li>
</ul>
</li>
<li>
<a href=’#’>About »</a>
<ul>
<li><a href=’#>This Blog</a></li>
<li><a href=’#‘>My FB page</a></li>
<li><a href=’#‘>Author</a></li>
</ul>
</li>
<li>
<a href=’#‘>Contact us</a>
</li>
<li id=’wc-soc-ico’>
<a href=’https://www.facebook.com/ergwifi‘ target=’_blank’>
<img alt=’Facebook‘ src=’https://2.bp.blogspot.com/-iKLppxYoaW0/Uws6PaZJ-yI/AAAAAAAAAHk/5Vp8DWfYXCU/s1600/48×48-Circle-49-FB.png’ style=’margin-left:50px;’ title=’Like us on Facebook’/>
</a>
</li>
<li id=’wc-soc-ico’>
<a href=’https://twitter.com/ERGWIFI’ target=’_blank’>
<img alt=’Twitter‘ src=’https://3.bp.blogspot.com/-48EGbQzzsdI/Uws6RmhElvI/AAAAAAAAAIM/4cB8dYeRA1c/s1600/48×48-Circle-49-TW.png’ title=’Follow us on twitter’/>
</a>
</li>
<li id=’wc-soc-ico’>
<a href=’https://plus.google.com/107334780196808616543‘ target=’_blank’>
<img alt=’Google Plus‘ src=’https://4.bp.blogspot.com/-hyEUL2pEdxo/Uws6PoLa8tI/AAAAAAAAAHo/cPPQeU-XbdE/s1600/48×48-Circle-49-GP.png’ title=’Follow us on Google plus’/>
</a>
</li>
<li id=’wc-soc-ico’>
<a href=’Your RSS feed address’ target=’_blank’>
<img alt=’RSS’ src=’https://4.bp.blogspot.com/-6NeaTmA0fxs/Uws6RGbKbnI/AAAAAAAAAIE/X-xp-2uBQ-g/s1600/48×48-Circle-49-RSS.png’ title=’Subscribe to our RSS feeds’/>
</a>
</li>