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