» » » Floating Social Bookmarking With Easing Effect

Floating Social Bookmarking With Easing Effect

Posted by Cloud VPS Labels: Tips , Tutorial 8:08 AM


Floating Social BookmarkingA social media like facebook, twitter, google+ can be used to share our post on the world wide web. With sharing our post or article to Social Media would generate some traffic for our blog from our circle. Our post will automatically appeared on their walls, friends, fans or follower we have.

Social Media is also observed the most number of peoples almost come on internet. There are so many others benefits for sharing your post on Social Media Sites. You have also seen Pro-Bloggers has Many of Fans in their circle.

Unlike content sharing, social media bookmarking merely bookmarks that reference them, example a link to the bookmarked page. Users  or visitors save links to web pages that they want to remember and/or share. These bookmarks are usually public, and can be saved privately, shared to specified people, shared only inside certain group or networks, or another combination of public.


How To Create

You might interest to add Floating Social Bookmarking on your blog, this feature has smooth easing effect, can easily add more fans or follower to your circle. This element needs Jquery, jqueryui and CSS style, but if you have some experience in styling then you can modify the style as your desired. This feature add more fans to facebook page, twitter follower, Google+ Circle, Pinterest, Youtube, Feed burner, but you can also modify as you like.

In this post, I will try to show you how to create floating social bookmarking with easing effect. It only take a few minute to do this, and it’s not hard at all. Follow the instruction below:

1. Add the following code above ]]></b:skin> or </style> in CSS style section

.social-buttons {
    position: fixed; 
    top: 130px; 
    width: 45px; 
    z-index: 9999;
}

.button-left {
    left: 0;
}

.button-right {
    right: 0;
}

.social-buttons #facebook-btn .social-icon {
    background-color: #33353B; 
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9EKC7QN0VvTMSOi88VwcpoCE6CAYva_nCTAXU06cX1gUtI_ihoaYyvIODIesvTeV4lPTM1qtOC2Afx-zonYR4RxibcY4STwyQsmjFDUhRxZNS4gRxcKZ6sm8WfkTHjreqKyEEkET173a/s1600/facebook.png");
}

.social-buttons #twitter-btn .social-icon {
    background-color: #33353B; 
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigoF5OYz7F-_Fawa5fBXrHa7AcdaPUF25ICUXPr7lHpyDYzVTQgAyPichtA1q6EenKBFDMqCCzlQnWFLVRErzWsfAmRND26xavawT5VDIpUdSuV_cC3Lm2rtyVek1D58KromsboSgaL7zk/s1600/Tweeter.png");
}

.social-buttons #google-btn .social-icon {
    background-color: #33353B; 
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSWM7drt_NLik6yXw4iopstePLXhuQaH8JK6oOmh9zEJhDAdjVWRJ1nQjPBohlMyRBkO9wRRx-XwFpzX7dt_enr7oLjWn7Bu-CRJAwCZXPLiWxdF8_-93EIt0zuoh8NRM7fyClr9ox0dAW/s1600/Google.png");
}

.social-buttons #pinterest-btn .social-icon {
    background-color: #33353B; 
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF4_5pWjK9C9J8Az_ucoBQ2ctuFg0i_sndiTa5veG9-0eYjk6Wr8zarHClFEb3f_ANr5OUWmF1zsP0WuxVfljuCx0l7jag1OFEPV0_G2SBUSl38BEZ4QsQLDg9icI6RTn5VY-pM1pMbekX/s1600/Pinterest.png");
}

.social-buttons #rss-btn .social-icon {
    background-color: #33353B; 
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu1WVIKvLpRn4jQy0MRbzwU2_GrCSHObyGKgq9viEHCOaF1yYOdPLQ5-mvgN2f5MadNEEqqOwvy3YEiYWgjV-to9dLOJqrMc_bRpiWg0FUuAL7SCKxvMuJOz6Vb00qJ3t5ZLEwpv3NhhF0/s1600/Feed-Burner.png");
}

.social-buttons #youtube-btn .social-icon {
    background-color: #33353B; 
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaZ9ihJ4OD1cjGiDfxGAx6o0jAnn9brFM2nPgtmxlQsGFGa3hweS4yrMnjWt0mAY_pfe-qPGQYtGPXkiKxO_xKG1VfaTtfEa5ZgwWVSie5rgkbJ94n5OqONwQ6LA_U32MfkUq4IYfSqaF-/s1600/Youtube.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 #pinterest-btn span {
    background-position: 12px -177px;
}

.button-left #rss-btn span {
    background-position: right -80px;
}

.button-left #youtube-btn span {
    background-position: 12px -223px;
}

.button-right #facebook-btn span {
    background-position: 12px 10px;
}

.button-right #twitter-btn span {
    background-position: 12px 8px;
}

.button-right #google-btn span {
    background-position: 12px 4px;
}

.button-right #pinterest-btn span {
    background-position: 12px 5px;
}

.button-right #rss-btn span {
    background-position: 12px 5px;
}

.button-right #youtube-btn span {
    background-position: 11px 5px;
}

.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;
}

Blue Color is the background icon, recommend to shave and upload to own server/account.

2. Find this code </head> and Add the following code above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.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>

Note:
Brown Color is Jquery, here using 1.7.2 version, if you have already add Jquery with same version or another version, you don't have to add this again. Example 1.8.3 or higher.

Brown color is Jquery easing effect, here using from cdnjs version 1.3, because it's very lite weight, you may download this and host on google drive or own server, same for Jquery 1.7.2 above.

3. Find this code </body> and Add the following code above </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>

Blue color is your ID of your social bookmarking.

4. Save the template, and see the results.