How to Make a Floating Social Bookmark With Easing Effects

How to Make a Floating Social Bookmark With Easing Effects . That's the title of today's article . By using this widget , you could add a blog , blog beautify , without the need to drain the wide places .
Below is a picture demo Floating Social Bookmark With Easing Effects , and below is a demo of his blog .

How to Make a Floating Social Bookmark With Easing Effect

1 . Login to Blogger

2 . Enters Into Template >> Edit HTML

3 . Search Code  [[></b;skin>  ( to speed up the search
    press Ctrl + f )

4 . Put the code below the above code [[></b;skin>

.social-buttons { position: fixed;  top: 130px; width: 45px; z-index: 9999; } .button-left { left: 0; } .button-right { right: 0; } .social-buttons #twitter-btn .social-icon,  .social-buttons #facebook-btn .social-icon,  .social-buttons #google-btn .social-icon,  .social-buttons #rss-btn .social-icon, .social-buttons #pinterest-btn .social-icon, .social-buttons #youtube-btn .social-icon { background-color: #33353B; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQ4n3ftrqhoVPZXNuAMnI-1g1R_EI0uexQBaaVg7UvVQOwbDPa5qK39eosfE_LSHMZE8YRUEiFK6gGAPR2ARI85UPHe868HLRASqLsEJhQixZovHKT4x84bf96SUNiFCq4hRKBaXTDeo/s1600/floating+mas-icons.png); } .button-left #facebook-btn span { background-position: right 10px; } .button-left #twitter-btn span { background-position: right -35px; } .button-left #google-btn span { background-position: right -127px; } .button-left #rss-btn span { background-position: right -80px; } .button-left #pinterest-btn span { background-position: 11px -177px; } .button-left #youtube-btn span { background-position: 11px -223px; } .button-right #facebook-btn span { background-position: 12px 10px; } .button-right #twitter-btn span { background-position: 11px -35px; } .button-right #google-btn span { background-position: 10px -127px; } .button-right #rss-btn span { background-position: 11px -80px; } .button-right #pinterest-btn span { background-position: 11px -177px; } .button-right #youtube-btn span { background-position: 11px -223px; } .social-buttons #facebook-btn:hover .social-icon { background-color: #3B5998; } .social-buttons #twitter-btn:hover .social-icon { background-color: #62BDB2; } .social-buttons #google-btn:hover .social-icon { background-color: #DB4A39; } .social-buttons #rss-btn:hover .social-icon { background-color: #FF8B0F; } .social-buttons #pinterest-btn:hover .social-icon { background-color: #D43638; } .social-buttons #youtube-btn:hover .social-icon { background-color: #C4302B; }  .social-buttons a:hover .social-text { display: block; } .button-left .social-icon {  -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; background-repeat: no-repeat; display: block; float: left; height: 43px; margin-bottom: 2px; width: 43px; } .button-left .social-text { display: none; float: right; font-size: 1em; font-weight: bold; margin: 11px 40px 11px 0px; white-space: nowrap; } .button-right .social-icon {  -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; background-repeat: no-repeat; display: block; float: right; height: 43px; margin-bottom: 2px; width: 43px; } .button-right .social-text { display: none; float: left; font-size: 80%; font-weight: bold; margin: 11px 0 11px 40px; white-space: nowrap; } .social-buttons .social-text { color: #FFFFFF; }

5 . Adding Jquery and javasript Next , still in Edit html . Put the following code before </head>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>

<script>

    $(window).load(function(){

        $('.social-buttons .social-icon').mouseenter(function(){

            $(this).stop();

            $(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});  

        });

        $('.social-buttons .social-icon').mouseleave(function(){

            $(this).stop();

            $(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});

        });

    });

</script>

6 . And then put the following code before </body>

<div class='social-buttons button-right hidden-phone hidden-tablet'>

<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a> <a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a> <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a> <a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'> <span class='social-text'>Follow via Pinterest</span></span></a> <a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a> <a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a> </div>

Change Your color code FB / Twitter Your / Your G+ / Your ID above with your ID , remember do not be mistaken , you know ...

7 . Click Save Templates

If you do not know where the code [[></b;skin> Click Ctrl + F , and if still not
See you , please see the picture below

Layout Code [[></b;skin>

 

Click 1x


That's How To Make Floating Social Bookmark With Easing Effect of me

If you are not intent please leave a comment ....
That's all from me , good luck , and before her , I say thank you for reading this article

Tweet

Blog, Updated at: 8:29 PM