Add Floating Social Media

Today I will give you added attractive and beautiful to help raise the visitor to follow you on social sites, which makes the user to follow all of your new, I hope you like it, and follow the all-new on our blog NEWTH3, I leave you with an explanation

HOW TO ADD FLOATING SOCIAL

Written explanation 

1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.

<style>
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 20%;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#social li {
    width: 100px;
}
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicCiCpntuQvQry8GNUClxfc59GuCxvpCnSspYl7CmbNt_5islbPQpECuSxUzcr77cbWrce0W6AYX-S95zovR60C-9urCBp1mDVSbJRZ7zv-ppeaPh1HUgtfun54lB_U_OTCfJAZjOubjI/h120/pctoolstips.blospot.in.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirJ1pWHnkoDZPt797cL7Id7ASt7FtqF5XUUhHpxSnvnOcClD4IhlylZeyQSl9nuNaJUMY6a84RqQHE9CSfPhdKRpn8d5QNQME3NxiwO3SvSMIihDD8cjze9CgFGRGeMcZUOVMoC0RzYI4/h120/pctoolstips.blospot.in.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkgjTRvHxeDxuRU5SD-Zzmha1D8i8HDbaZAAhpA0_BupZU3-ilvM_QJ4CdYMaTF8ZyWffro_hzOFbd5CBTyqJOuYqCJ4IfQjINMcmZt59hBWOqAcSkA8oYPD5dDP7P8iugm62XKS3aIqc/h120/pctoolstips.blospot.in.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqOldEZ9M0zPtOENepsjFA5fwP7zSXMInnwqvaBxejkHwd2F7B8ch6LUewEUtPYEMrXku7X2N8LXaI3QSrC1-lQC9SlO1AWWC8AmpPPZwIlI1STZzpRGlZU8QxpoJQgeqAswoaR30Z1g/h120/pctoolstips.blospot.in.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);

    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<ul id="social">
<li class="twitter"><a href="http://www.twitter.com/abdelali17" target="blank" title="Twitter"></a></li>
<li class="googleplus"><a href="https://plus.google.com/101067109114455597398" target="blank" title="Google Plus"></a></li>
<li class="facebook"><a href="http://www.facebook.com/telouma" target="blank" title="Facebook"></a></li>
<li class="rss"><a href="http://feeds.feedburner.com/abdelali17" target="blank" title="Rss"></a></li>
</ul>

4) Customize your setting.Find any word click F3 or Ctrl+F. 

♥ Replace it abdelali17 with your Twitter Username. 

♥ Replace it https://plus.google.com/101067109114455597398 with your Google+ Page url . 

♥ Replace it telouma with your Facebook Username. 

♥ Replace it abdelali17 with your Feed burner Username. 

5) Save your Widget.