Blue Sky Navigation Menu Bar With Social Media Links

Today I'm going to explain how to add Sky blue blogger navigation menu bar with social icons.Navigation bar is very important part of your website.Because it helps visitors to navigate our website and make easy to  them find relevant content of our site.We are using CSS language for this navigation menu bar.To grab this menu bar for blogger website just follow the steps mentioned below.

How to add Blue Blogger Navigation Menu Bar With Social Media Buttons/Icons

1. Go to Blogger Dashboard > Template
2. Backup your template
3. Click on Edit HTML
4. Find  ]]></b:skin>
5. Add below code just above it

/* The CSS Code for the menu starts here bloggersstand.blogspot.com
#topMenu{border:1px solid #7DF; border-radius:6px; background:#00AAEB; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFRbzw1MNMLUUc7jtcIOhfkRdSBhyBiOd9pednWQVsOj0SRjcshz_it7wPRqCWZ2WBPULa3bREZz-t-npquRulhIO7Qpa5zHd4NttdOhmnhz_3OvkHwZ1cTG2q7BhE1tVfInDyypn5YoQ/s1600/bk_topmenu.png) 100% 0 no-repeat,-moz-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* FF3.6+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFRbzw1MNMLUUc7jtcIOhfkRdSBhyBiOd9pednWQVsOj0SRjcshz_it7wPRqCWZ2WBPULa3bREZz-t-npquRulhIO7Qpa5zHd4NttdOhmnhz_3OvkHwZ1cTG2q7BhE1tVfInDyypn5YoQ/s1600/bk_topmenu.png) 100% 0 no-repeat,-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00c1fa),color-stop(100%,#0094dd)); /* Chrome,Safari4+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFRbzw1MNMLUUc7jtcIOhfkRdSBhyBiOd9pednWQVsOj0SRjcshz_it7wPRqCWZ2WBPULa3bREZz-t-npquRulhIO7Qpa5zHd4NttdOhmnhz_3OvkHwZ1cTG2q7BhE1tVfInDyypn5YoQ/s1600/bk_topmenu.png) 100% 0 no-repeat,-webkit-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* Chrome10+,Safari5.1+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFRbzw1MNMLUUc7jtcIOhfkRdSBhyBiOd9pednWQVsOj0SRjcshz_it7wPRqCWZ2WBPULa3bREZz-t-npquRulhIO7Qpa5zHd4NttdOhmnhz_3OvkHwZ1cTG2q7BhE1tVfInDyypn5YoQ/s1600/bk_topmenu.png) 100% 0 no-repeat,-o-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* Opera 11.10+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFRbzw1MNMLUUc7jtcIOhfkRdSBhyBiOd9pednWQVsOj0SRjcshz_it7wPRqCWZ2WBPULa3bREZz-t-npquRulhIO7Qpa5zHd4NttdOhmnhz_3OvkHwZ1cTG2q7BhE1tVfInDyypn5YoQ/s1600/bk_topmenu.png) 100% 0 no-repeat,-ms-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* IE10+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFRbzw1MNMLUUc7jtcIOhfkRdSBhyBiOd9pednWQVsOj0SRjcshz_it7wPRqCWZ2WBPULa3bREZz-t-npquRulhIO7Qpa5zHd4NttdOhmnhz_3OvkHwZ1cTG2q7BhE1tVfInDyypn5YoQ/s1600/bk_topmenu.png) 100% 0 no-repeat,linear-gradient(to bottom, #00c1fa 0%,#0094dd 100%); /* W3C */background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFRbzw1MNMLUUc7jtcIOhfkRdSBhyBiOd9pednWQVsOj0SRjcshz_it7wPRqCWZ2WBPULa3bREZz-t-npquRulhIO7Qpa5zHd4NttdOhmnhz_3OvkHwZ1cTG2q7BhE1tVfInDyypn5YoQ/s1600/bk_topmenu.png) 100% 0 no-repeat,filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c1fa',endColorstr='#0094dd',GradientType=0 ); /* IE6-9 */}
#topMenu ul.sf-menu li{border-right:1px solid #80CFFF}
#topMenu ul.sf-menu li a{color:#CBEBFE; text-shadow:#008FE8 1px 1px}
#topMenu ul.sf-menu li li a{color:#CBEBFE}
#topMenu ul.sf-menu li a:hover{color:#FFF}
#topMenu ul.sf-menu li li{}
#socialIcons li{border-left:1px solid #2BC9FD}
#topMenu{width:960px; height:46px; position:absolute; top:125px; left:0; -webkit-box-shadow:0 6px 6px -6px #999; -moz-box-shadow:0 6px 6px -6px #999; box-shadow:0 6px 6px -6px #999}
#topMenu ul.sf-menu li{float:left; padding:0 15px; font-size:12px;list-style: none;margin-left: -10px;}
#topMenu ul.sf-menu li a{text-decoration:none; text-transform:uppercase; font-weight:bold; padding:4px 0}
#topMenu ul.sf-menu li a:hover{text-shadow:none}
#topMenu ul.sf-menu li li{padding:0; border:none}
#topMenu ul.sf-menu li li a{font-weight:normal; padding:4px 12px}


#socialIcons{position:absolute; right:0;  margin:0 0}
#socialIcons li{float:left; padding:0 10px;list-style: none;}
#socialIcons li a{display:block; text-indent:-9999px; width:24px; height:19px}
#socialIcons li a:hover{background-position:0 -19px}
#socialIcons .twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCzkU17j0OjXVeQU4qmq5g_esSWZuXp1h9eaBfMCxal1A9k0E-yG19AOpJbxxWwo-YLLXZh4g5PBVKRkHKf1jxa7td0pDUlPB7-O0NsBapLeoOfAvH-ZXtYsIKRExQCcmGJ2d_QEJeyag/s1600/ico_twitter.png) 0 0 no-repeat}
#socialIcons .facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT31TKtXocrPuVYpjw_-JtL2y9Eux0JuYk-bVcCC_M7Y_cSFEYIkFI5CO5usHwfUGWHgULNpiPKCOzRGX8hKHUhgD3qH37yxn6b18vT0H7mNv0uKAzraYR9Kj1YlI3dzepTCcCLp3Hvaw/s1600/ico_facebook.png) 0 0 no-repeat}
#socialIcons .flickr{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkLkFY_1i2WoRQoa7_J0aTxz9-Ccku-nnEJB5m8niaGCR3RCufx86d8xYh2LOMclIIG_dqnZ4muIIu_0hcD0KT5Syq3ruyUFc58CawskixJaMQjUgvovMWLQ_87_nfeppykoVFOhRAm60/s1600/ico_flickr.png) 0 0 no-repeat}
#socialIcons .linkedin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEpVDWAptXi110KtUuuFkCpDDjrkMAm-RDSTa2j4jGMJ4MrBXEeC65uNWocvRwzclZU6VR9ekSueE1FFgQrsQc3i6pa0CxVE3G_7CCEbDDaLRTBGqXATKYWpaRl4qy4jZXOxRVGK0RGKA/s1600/ico_linkedin.png) 0 0 no-repeat}
#socialIcons .vimeo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNhn1sPWsxCWAi-d_n6bbpQ3FAOUQ9UkjVDtq2LzLyw4jL3QSiHx7_syVsCZmlTrez9gAmGFX_S3wW67w6rt7P6PYCYJI2F5RpUkQcmmNi6GnkHLRxX2itqYP4yegnwI6behlL3cofCt0/s1600/ico_vimeo.png) 0 0 no-repeat}
#socialIcons .googleplus{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYsnFM0TYx2YyvjulYjcau-nL4fWZwlsVrQyaBsceUBf4SCpVffwK119BRL8ZADx3f6mhggQCnaKIn3AbWPXPcd8oPOXua9fNYzcC_XlLPhEMOD6-jPuvFGGFXL7ttmr-SGYJJQjLbv9Y/s1600/ico_google.png) 0 0 no-repeat}
#socialIcons .rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimcYHfCBkdjGnHcTL9mWEI5rUyaUgKDrbIWugsenN3Mh1zr0rMk6ypioVJqtZ0cHv1MgrHc-usu2uCCCMwuv_eTz_DoOIxqFFmrMYInEJO5DexiqveNQAFShGawecZr28BrSflssZTl-4/s1600/ico_rss.png) 0 0 no-repeat}

5. Go to blogger Layout
6. Click Add Gadget and select 'HTML/Javascript'
7. Paste below code.

<div id="topMenu">
<ul class="sf-menu sf-js-enabled sf-shadow" id="menu-topmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="http://bloggersstand.blogspot.com/p/contact-us.html">Contact Us</a></li>
</ul>
<ul id="socialIcons">
<li><a class="twitter tooltip" href="http://www.twitter.com/bloggersstand"  target="_blank">Follow us on Twitter</a></li>
<li><a class="facebook tooltip" href="http://www.facebook.com/bloggersstand" target="_blank">Join us on Facebook</a></li>
<li><a class="linkedin tooltip" href="http://www.linkedin.com/" target="_blank">Join us on LinkedIn</a></li>
<li><a class="googleplus tooltip" href="https://plus.google.com/115587840274121878323" target="_blank">Join us on Google+</a></li>
<li><a class="flickr tooltip" href="http://www.flickr.com/" target="_blank">Watch us on Flickr</a></li>
<li><a class="vimeo tooltip" href="https://vimeo.com/" target="_blank">Watch us on Vimeo</a></li>
<li><a class="rss tooltip" href="http://bloggersstand.blogspot.com/feeds/posts/default"  target="_blank">RSS Feeds</a></li>
</ul>
</div>

*Change  All Colour Link/Username With your Profile Link or Id.

9. Now save your HTML/Javascript'..Done !!

If you have Any Query regarding This Blue Sky Navigation Menu Bar..Feel Free To Ask,Just Drop Your Comment.