Add Floating Social Media

Friday, October 25, 2013

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/AVvXsEitgaXp3VJ5a0JddThSFmVwdZcRKBY7vDKw9YmASWhEr5wkjr6106Si3e81g4dRBB4mOf48dzXi4SBS75Lvmm6vKLnyUB3UuiMI_yibUK4ARKhxc-nBQCCqWrL7MqX7ZOhT-CJqalNFeVc/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/AVvXsEhAhCsVX1KevRWDIyaDsi3aRy-sR0DqZuQztxkcsRqHXJBicZ6qTB14-_ta1uOB8DH7rx7FWo__qiwD45j3-Mmnv-R-_Vov6RSg4h-x4_xubNfPSgPZ-nNT26U-tGb5IRhmnp8h1-R5vD8/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/AVvXsEhRS3JHCuTOV7GhY0aBRfEgo1gC-BDNjiSW5NCYQEg2T5rpmRk3qJIoaM-Qis3TuzuYE1iY2fsxXnV8jK6AcyPRwa3FfC05t-Y4ecWKrTwLS3UhNmhW7PeBWkh3nwvjXWe0jiPOpR-pfY8/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/AVvXsEhcN1u7uVFUOeTjMp0aY9IyBFl1lEcyMnd-TKdCXhQQgKZS1hP5cuTCg6LeoMNM_rdGqRD4a_7rbbXfV8a88ZkDvbAadM4S2pFovdxYzi94rOqhqc16P2CIwIO9ZnPun4-xBF9xKhmQR_A/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.

Share On Google+Add This To Delicious Tweet/ReTweet This Share on Facebook StumbleUpon This Digg This

abdelali tibicht

name is full abdelali tibicht, my country is morocco, care techniques and the development of blogging, my goal through this blog, is to help bloggers develop their blogs through my modest experience gained during my career blogging can.

Follow Me On Twitter Or Facebook

Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.