Awesome Floating Social media add in blogger 2014

Asslam o aulaikum
Here is a most beautifull widget for your blog on the botttom of page show a social media How to add this in your blog i give you this leatest trick follow my some stepes how to add this here carefully add this in your blogger blog and make your profile is most beautifull

Awesome Floating Social media add in blogger 2014

• Go to blogger.com
• Click on layout>add a gadget

• select HTML java script 

• add following code in content and save it

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZDo3kZde7FfXqHdkViMq6LKOg9pdxBpyUQjTBA0bWVqzyKrTiRToBJYQQNFZ4JfIn90liTdxOvsSiRS1SKSMXK91S2YLIucdujXd0iKVv9achlW4SuFA6XEdudrfMs1jXlfNt16sMiFgE/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM1yeKcmmyMpdm5LWbXhz57b_RH3UuM2rGfGTMJu6sSAsmxPmFTpWaBZqNiDUaRGzzL7U8lE8kyQy79U95pb-P25mozoeVsvLt04Ji5SxZ4mVafUiiY84IfaTAL6yl1sx1Hc6btpx39oBt/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB3cEPGMZoH6_FUn0sHBvkOhgJqGbIXXKdx7LPPLEdL6LjwIc_nJ6emTx-IFjUqXS6Apu-kH7AL4gj_mgoa7CSORreWYnxBoWgJckIJGas6wF_BXNzIIBUoOtFzzpuzhFi90wQ771XsEQE/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcrQjzx3dCdhZienVrGWcIB-SyyCVs2_lKecLImej48YjoijMFVjZvk6GMqj6Wxz3yJmUQyBu0RP1MEVEGhyiJzezwxaDoT41104UGmWxzGSWkEYobGzP-4fgMoIrcu2z1GIzr82GMc9iG/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7G8bDEF24Hira58iYtj2S65rCCKmys52tR3BK2H_LlXHs7X7gg0GrwdFpaaL5yHISV7e6CZOoXcSwsCNTqtfIMbzvDNkQK7tGqajcn1nOpl1ONjD7078ZdA0QWP4JClTNTH-DvVqNx7DC/s400/yahoo_64x64.png);
}
</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

<ul id="navigation">
<li class="rss"><a href="http://YOUR-BLOG.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="FACEBOK-PROFILE">Facebook</a></li>
<li class="twitter"><a href="TWITTER-ACCOUNT">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
<li class="e-mail"><a href="YAHOO!-ACCOUNT">Yahoo!</a></li>
</ul>

Editing in code                                               

ALL highlight In code replace with your links social media and save it