Tutorials Html How to add floating share box using HTML and css3

How to add floating share box using HTML and css3

July 01,2012 Read: 1130 Times

Adding a floating share box to your blog is the best way to bring more traffic to your blog or posts . Visitors always find an easier way to share the post if they find any interesting point on your post and like to share them in their social profile. Using the floating share box we can easily provide them a nice way to share the post.

You can see that, now-a-days most of the traffic come from Social Sites. Floating share box (social bookmarking) widget by the right or left of every page is just one of the wonderful widgets, you must add to your blog if you gather more free traffic from Facebook, Twitter, Google + and other Social Sites.

You must have seen in many Wordpress blogs are using floating share box. Now it’s time for any blogging site to add a floating share box widget. In this tutorial I’m going to share a very simple but effective snippets about how to create a nice floating share box. It will appear outside of your post sections and as you scroll the page, this widget will also scroll with your post. Let's go-

Demo

Download

- Create Share Box Body Content:

- CSS3 For Share Box:

#pageshare {
    position:fixed; 
    bottom:15%; 
    left:10px; 
    float:left; 
    border: 1px solid black; 
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background-color:#eff3fa;
    padding:0 0 2px 0;
    z-index:10;
} 
#pageshare .sbutton {
    float:left;
    clear:both;
    margin:5px 5px 0 5px;
} 
.fb_share_count_top {
    width:48px !important;} 
.fb_share_count_top, .fb_share_count_inner {
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
} 
.FBConnectButton_Small, .FBConnectButton_RTL_Small {
    width:49px !important; 
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
} 
.FBConnectButton_Small .FBConnectButton_Text {
    padding:2px 2px 3px !important;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;font-size:8px;
} 

div#page-content{
    height: 900px;
    width: 800px; margin: 0 auto;
}

- Add A Simple jQuery Script:

Sometimes user screen size may not enough big for showing share box widget. That means, It may be overlap with your post. To remove this bug we can use a simple jQuery snippet. If use screen size big more than 1110px ,than we only show floating share box, other wise we hide share box.

if( $(window).width() >= 1180 )
    $('#pageshare').show();

// Update when user resizes browser.
    $(window).resize(function() {
        if( $(window).width() < 1150 ) {
            $('#pageshare').hide();
    } else {
            $('#pageshare').show();
    }
});

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!