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/AVvXsEjaO7PDxSUV3eRyvTSB0n9oaHTFCPtlxAjP0pIvwnRPLVPPDgHhHn_bGRo0KO4cviwIV-SIRIaqGxRpuFPn0ZYUcaxFfpuaew22zBNXkSIdiGmFzo_sa1k501WcO2ekLJYyvs2C3if4OOo/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/AVvXsEg0VG7CvK4TPJidoQk3hu32hOAHPGLn4S83CqA0DWN2UkoSZNzzqW1ySLYowDY1u1KZIhekf02XdEm4b6EIoBZMI6YZIcmrEN3p_CoXRhHhxDI8DLNxijseYqsbJ6HMIGyVZ5JNBXqZTD0/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/AVvXsEjC7FBImQ-978PMGN2WPn64lhL6N4OJXtKQ6DHUzpqSF3X7UxVqWW-pQ-G3fxyjuCIAKLENsnFGBd7RuvSabiNvm7IfWR-tMI0ZfYCN5s9AK-2VtnIswgTbyJbt4rUTh46KLM5TRgsNa1g/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/AVvXsEjcV3BQW9QKfGzTe1dSsZXl9-F-dsi7KLEEYLt60OciR7s1F9LIANSVAOr38dgAj6LklHNWMsu9jDzGilJRpxJl3g6rIvIIULztOvESOBifyzPMRr5tscv-ofjN8m3D4Ss7U9oXE4dPxIY/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. 

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post

• Metro Style Social Icons for Blogger To add a beautiful day than its predecessor, How to Add Metro Style Social Widget for Bl
• How to make money from your blogHow to make money from your blogMany people who write blogs today simply want to share their opinio
• How To Submit Your Sitemap To Google Webmaster ToolsHow To Submit Your Sitemap To Google Webmaster ToolsStarted a New Blogger Blog? Want to rank it bet
• 9 Best SEO Tools To Solve All Your Blog’s Optimization Issues9 Best SEO Tools To Solve All Your Blog’s Optimization IssuesFacebooktterGoogle+inkedInShareDo you
• Add "Link To This Post" Widget Below Every Post In Blogger Peace be upon you and God's mercy and blessings, today will learn how to add automatic links
• How to Send Copyright Claims to Web Hosting Provider?Copyright Claims to Web Hosting ProviderOn the Internet, you own what you create with your own effo