adding Awesome Social Navigation Bar For Blogger ..
/* CSS Top Menu */
.main-nav {display:block;margin:0 auto;float:left;padding:0;width: 100%;background:transparent;}
.main-nav ul {width:100%;padding:0;margin:0;text-align:left;}
.main-nav li {list-style-type:none;float:left;padding:0;}
.main-nav li a {position:relative;font-family:'Droid Sans';font-size:15px;font-weight:400;background:transparent;color:#838888;display:block;margin:0;padding:18px;line-height:100%;}
.main-nav ul > li > a:after {content:"";position:absolute;width:0;left:0;right:0;margin:auto;
bottom:-1px;height:3px;background:#4791d2;opacity:0;visibility:hidden;transition:all 0.2s ease-out;}
.main-nav ul > li > a:hover:after {opacity:1;visibility:visible;width:90%;}
.main-nav ul li a:active, .main-nav ul li.highlight a {line-height:100%;text-decoration:none;}
.main-nav ul li a:hover {background:#fdfdfd;color:#4791d2;text-decoration:none;}
.main-nav a#pull {display:none;}
.main-nav li.facebook,.main-nav li.twitter,.main-nav li.youtube,.main-nav li.googleplus,.main-nav li.linkedin{background:#fff;text-align:center;color:#838888;float:right;transition:all 0.2s ease-out;}
.main-nav li a.facebook:hover,.main-nav li a.twitter:hover,.main-nav li a.youtube:hover,.main-nav li a.googleplus:hover,.main-nav li a.linkedin:hover{color:#7076c5;}
.main-nav li .facebook .fa.fa-facebook,.main-nav li.twitter .fa.fa-twitter,.main-nav li.youtube .fa.fa-youtube,.main-nav li.googleplus .fa.fa-google-plus,.main-nav li.linkedin .fa.fa-linkedin{color:#838888;transition:all 0.2s ease-out;}
.main-nav ul li.facebook:hover .fa.fa-facebook,.main-nav li.twitter:hover .fa.fa-twitter,
.main-nav li.youtube:hover .fa.fa-youtube,.main-nav li.googleplus:hover .fa.fa-google-plus,
.main-nav li.linkedin:hover .fa.fa-linkedin{background:#fdfdfd;color:#4791d2;}
<nav class='main-nav'>
<ul>
<li class='home1'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='Link '>About</a></li>
<li><a href='Link '>Disclaimer</a></li>
<li><a href=' Link '>Contact</a></li>
<li><a href=' Link '>Guest Post</a></li>
<li><a href=' Link '>Link Exchange</a></li>
<li><a href=' Link '>Sitemap</a></li>
<li class='sorting-01 facebook' title='Follow us on Facebook'><a href='https://www.facebook.com/khatriscreation'><i class='fa fa-facebook'/><span class='inv'/></a></li>
<li class='sorting-02 twitter' title='Follow us on Twitter'><a href='https://twitter.com/khatriscreation'><i class='fa fa-twitter'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus' title='Follow us on Google+'><a href='https://plus.google.com/103411954659172316653'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='sorting-06 linkedin' title='Follow us on LinkedIn'><a href='http://in.linkedin.com/in/khatriscreation'><i class='fa fa-linkedin'/><span class='inv'/></a></li>
<li class='sorting-04 youtube' title='Follow us on Youtube'><a href='https://www.youtube.com//channel/UCjnp5qo1dGflx33MPKdBPjQ'><i class='fa fa-youtube'/><span class='inv'/></a></li>
</ul>
<a href='#' id='pull'>MENU</a>
</nav>
Customize:
Change Highlight green Color With Your Link.
Change Highlight Red Color With The Text Appear In Box.
Change Highlight blue Color With Your Social Media Username.
now all done..
happy blogging
Welcome To khatriscreation And Let Me First Introduce Myself. I’m Sudarshan khatri From Nepal And I Manage khatriscreation. I’m Not A Professional Blogger By Education I’m Self Trained Guy And I Am 13 Years Old. Well Talking About Me I’m A Normal Guy Who Lives The Life Fullest, Loves Searching New Things On Internet.I love to share my expenience and education to the peoples so i have managed this blog .khatriscreation is totally about blogging,seo,widgets and blogging tips.
ConversionConversion EmoticonEmoticon