Today we will discuss about adding an attractive dropdown navigation menu with social icons to your blogger blog. This navigation menu is created in pure CSS only. It is very easy to customize this menu according to the color scheme of your blog.Dropdown list in this menu is a plus point because it helps in managing more number of links as compare to normal horizontal menu. You can easily add this dropdown navigation menu to blogger by following our easy guide.
Adding navigation menu with social icons to blogger
Step 1: Login to your blogger dashboard and select your blog.
Step 2: Select Template option.
Step 3: In the template code find </header>
Step 4: Paste following code just below it and save the template.
<style>
#wc-soc-nav{
width:100%;
height:50px;
display:block;
padding:0;
margin:0 0 22px 0;
background:#f84242;
border-bottom:4px solid rgba(197,52,52,1);
box-shadow:1px 1px 4px #dcdcdc;
-moz-box-shadow:1px 1px 4px #dcdcdc;
-web-kit-box-shadow:1px 1px 4px #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px #dcdcdc;
}
#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='http://ergwifi.blogspot.com/p/hi-ergs-is-founded-at-2011-january-1.html'>This Blog</a></li>
<li><a href='https://www.facebook.com/ergwifi'>My FB page</a></li>
<li><a href='http://ergwifi.blogspot.com/p/contact.html'>Author</a></li>
</ul>
</li>
<li>
<a href='http://ergwifi.blogspot.com/p/contact-us.html'>Contact us</a>
</li>
<li id='wc-soc-ico'>
<a href='https://www.facebook.com/ergwifi' target='_blank'>
<img alt='Facebook' src='http://2.bp.blogspot.com/-iKLppxYoaW0/Uws6PaZJ-yI/AAAAAAAAAHk/5Vp8DWfYXCU/s1600/48x48-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='http://3.bp.blogspot.com/-48EGbQzzsdI/Uws6RmhElvI/AAAAAAAAAIM/4cB8dYeRA1c/s1600/48x48-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='http://4.bp.blogspot.com/-hyEUL2pEdxo/Uws6PoLa8tI/AAAAAAAAAHo/cPPQeU-XbdE/s1600/48x48-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='http://4.bp.blogspot.com/-6NeaTmA0fxs/Uws6RGbKbnI/AAAAAAAAAIE/X-xp-2uBQ-g/s1600/48x48-Circle-49-RSS.png' title='Subscribe to our RSS feeds'/>
</a>
</li>
</ul>
</div>
</div>
Customizing this menu
1. In the above code replace red colored # with your links and replace all greencolored code with your social network addresses.
2. Replace #f84242; with any other background color of your choice.
3. Replace rgba(197,52,52,1); to change hover color.
Nice post!!!
ReplyDeleteYou may like civil engineering