How to Make Floating Social Shares

Availability of information about the author of a blog should be the primary concern of a blogger, because of the lack of information about the author of the blog, the blog will be managed by a professional look and can also make our reputation in the internet world increasingly uphill. Floating social media will emerge as we get closer to the mouse direction. In addition to giving information about the author, this widget also makes the blog look nicer and make the blog more and more recognized by people.

In this post, I will share how to make a cool floating social media in the blog, so we will look the better blog. The steps are very simple, add the widget HTML / Java Script in blog layout, then copy the following script into it and then click save. Here's the script:

<style type="text/css">

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/AVvXsEjxyFh_eNUxdA_euN16bt3NaKGEOW6tN88FGA2sBwz-1mhUAni85qw0wDaq9kO60e7Gt_twa_RrtN-Gu6Ck19hmRUXBrd8IRtkRowJ5wVuGbLMEhk0kM5XC3OncLL5X3Fv_Qon544cnAVI/s1600/Twitter.png)no-repeat;

background-position:center center;

}

ul#social .googleplus a      {

    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRbRbOqGrpO87RjOI_iQ9EfJ7ksm3yGpQtQYMUJF_6blt5bw-58WE1uqRXmh-rMlGTKr3wBw6Hs3Q1yoMGM166eHbZwChGHlA3ThTLZ8DlGTdT-sw1Te5Fs13L3aUWLy9mNNT96h4N8gI/s1600/GOOGLE+PLus.png)no-repeat;

background-position:center center;

}

ul#social .facebook a      {

    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1JmAE_3jmAxwauY9EKQDEWEFdsk3t2EwYeTqtpF_egsPqraKcrcZMKi_YTt0s8dSpYKOBMP-z3s8kCSQB9fLPnnRrR6MIipD7ymfhjyhXX0gMbV04pMxP9_F-WFSItmoatVWdY7dHehQ/s1600/Facebook.png)no-repeat;

background-position:center center;

}

ul#social .rss a      {

    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkycg6l47ToECxTrgZfJLCU1DmVf6oMJkgPsc0QoglCfQJOPKXsK9cjyn51VNBPaJ3BTjB8dlIXJ4u0nCvR0dTObbdasmz-QibPkpkKVGxcp4c-EVlfcVfIjSYVtQLLuQdLXjt-BOR_w/s1600/rss.png)no-repeat;

background-position:center center;

}

ul#social .pinterest a   {

    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN9dnHeaNq1SCJqcyIUal18R-zaJhrwPCd6QOHySYyt5K2tr5Yd3kMtL6OYMAVu9-MdzVvhCiG9XdbFicsOw7s97-mjqT3pTzY-GrpiOh7a3F7L-TkksWB3fkYxOh9df-Og8rusJlRRAs/s1600/Pinterest.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>

<br />

<ul id="social">

<li class="twitter"><a href="#" title="Twitter"></a></li>

<li class="googleplus"><a href="#" title="Google Plus"></a></li>

<li class="facebook"><a href="#" title="Facebook"></a></li>

<li class="rss"><a href="#" title="Rss"></a></li>

<li class="pinterest"><a href="#" title="Pinterest"></a></li>

</ul>

Oke, after you know the script, let me help you to integrated in your blog's widget. Here the steps:

1. Sign in Blogger.com
2. Fill the pasword
3. Click Lay Out
4. Click Add Widget
5. Choose HTML/Java Script
6. Save

That's all my explanation about how to make this widget. It is easy, isn't it? Hopefully this widget is useful for us. Thanks