See Demo
Adding the Side Floating Buttons
1. Login to your Blogger account.
2. Go to Design > Page Elements. (For New Blogger Interface Go to Layouts)
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Copy the code below and paste it inside the content box. (See how to Copy Easily)
<style> #nav-dcssb, #nav-dcssb li { margin: 0; padding: 0; list-style: none; } #nav-dcssb { } #nav-dcssb li { padding: 5px; } #nav-dcssb li.size-box { text-align: center; height: 60px; } #nav-dcssb li.size-small { height: 30px; } /* Floater */ .dc-social-float .tab { cursor: pointer; height: 44px; margin-left: -1px; } .dc-social-float .dc-social-float-content { background: #fff; border: 1px solid #bbb; padding: 10px; } .dc-social-float .dc-social-float-content { border-radius: 10px; -webkit-border-radius: 10px; } /* Slick */ .dc-social-slick .dc-social-slick-content { padding: 10px; background: #fff; border: 1px solid #ccc; } .dc-social-slick.vertical .dc-social-slick-content { width: 78px; } .dc-social-slick.horizontal.left #nav-dcssb li.size-small, .dc-social-slick.horizontal.right #nav-dcssb li.size-small { height: 60px; } .dc-social-slick.top { top: 0; } .dc-social-slick.bottom { bottom: 0; } .dc-social-slick.right { right: 0; } .dc-social-slick.left { left: 0; } .dc-social-slick.right, .dc-social-slick.left { padding-top: 2px; background: url(images/bg_slick_top.png) repeat-x 0 0; } .dc-social-slick.right .dc-social-slick-content { border-top: none; border-right: none; border-radius: 0 0 0 10px; -webkit-border-radius: 0 0 0 10px; padding: 10px 10px 20px 10px; } .dc-social-slick.left .dc-social-slick-content { border-top: none; border-left: none; border-radius: 0 0 10px 0; -webkit-border-radius: 0 0 10px 0; padding: 10px 10px 20px 10px; } .dc-social-slick.left.horizontal .dc-social-slick-content, .dc-social-slick.right.horizontal .dc-social- slick-content { border-radius: 0; -webkit-border-radius: 0; padding: 10px 10px 18px 10px; } .dc-social-slick.top.vertical .dc-social-slick-content, .dc-social-slick.bottom.vertical .dc-social- slick-content { border-top: none; border-bottom: none; } .dc-social-slick .tab { cursor: pointer; } .dc-social-slick.top .tab, .dc-social-slick.bottom .tab { height: 46px; } .dc-social-slick.left .tab, .dc-social-slick.right .tab { width: 46px; } .dc-social-slick.bottom .tab { top: 1px; } .dc-social-slick.top .tab { bottom: 1px; } .dc-social-slick.align-left .tab { margin-left: -1px; } .dc-social-slick.align-right .tab { margin-right: -1px; } .dc-social-slick.bottom.align-right.horizontal .dc-social-slick-content { border-radius: 10px 0 0 0; -webkit-border-radius: 10px 0 0 0; } .dc-social-slick.bottom.align-left.horizontal .dc-social-slick-content { border-radius: 0 10px 0 0; -webkit-border-radius: 0 10px 0 0; } .dc-social-slick.top.align-right.horizontal .dc-social-slick-content { border-radius: 0 0 0 10px; -webkit-border-radius: 0 0 0 10px; } .dc-social-slick.top.align-left.horizontal .dc-social-slick-content { border-radius: 0 0 10px 0; -webkit-border-radius: 0 0 10px 0; } .dc-social-slick.right .tab, .dc-social-slick.left .tab { margin-top: -2px; } .dc-social-slick.right .tab { left: 1px; } .dc-social-slick.left .tab { right: 1px; } .dc-social-slick.horizontal #nav-dcssb li { float: left; } .clear {clear: both;} </style> <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type='text/javascript' src='http://stylifyyourblog1.googlecode.com/svn/trunk/easingplusslickfloat.js'></script> <div id="dc-dcssb"> <ul id="nav-dcssb" > <li id="dcssb-twitter" class="size-box"><script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script> </li> <li id="dcssb-facebook" class="size-box"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </li> <li id="dcssb-plusone" class="size-box"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </li> <li id="dcssb-linkedin" class="size-box"><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script> <script type="IN/Share" data-counter="top"></script></li> <li id="dcssb-stumble" class="size-box"> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </li> <li id="dcssb-digg" class="size-box"> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </li> </ul> </div> <script type="text/javascript"> jQuery(window).load(function() { jQuery('#dc-dcssb').dcSocialFloater({ idWrapper : 'dcssb-float', width: '98', location: 'bottom', align: 'right', offsetLocation: 50, offsetAlign: 50, center: false, centerPx: 0, speedContent: 600, speedFloat: 1000, tabText: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_KNh4XdKl4TqoO7dHzgnYbh_uwlBmEEwvBUyZ6iAB6eIg5S7OV_5jUBug1TeEPkMF8Ij__wOVo9e_y9X3qQ9WgBpVoNrIiJ4ljgFp4WqzUoyWgOVfltbbXOI0qUPWUuPPlm43N0CcYw/s1600/tab_bottom_floating.png" alt="Share" />', autoClose: false, loadOpen: false, tabClose: true, classOpen: 'dcssb-open', classClose: 'dcssb-close', classToggle: 'dcssb-link' }); }); </script>
6. Save the gadget.
7. Drag the gadget and reposition it either Right sidebar or Left sidebar (Make it the First Gadget).
8. Click Save button on upper right corner.
Customizing:
1. Alignment & Speed
To change position of the widget , check Line 190-194 with each attribute having the usual meaning. To change the speed check the attribute namely speedContent and speedFloat (Time is in Microseconds).
2. Closed or Open
This widget has a option whether you want these buttons be visible when the page loads or let them remain in the Closed state. To change this option search for "loadOpen" attribute in the code (Line 200) .To let them be visible when the page loads set the option as true .
3. Adding /Removing Buttons
Buttons can be added or deleted easily .To delete any button remove the code in-between the li tags. To add buttons other than those present already just add a li tag with class attribute something like the following code:
<li class="size-box"> ----The Button Code---- </li>
4. Making it Appear on Selective Page
If you want this to appear on only Post pages then you will have to go to Design > Edit HTML (As per new Interface Go to Template > Edit HTML).Tick the "Expand Widget Templates" and Then search for the Title of Gadget (If you have not given any title then give a dummy title like "abcd" and search using CTRF+F for this term) . Now see the following code
<b:widget id='WidgetID' locked='false' title='abcd' type='HTML'> <b:includable id='main'> PUT CONDITIONAL TAG HERE <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> <b:else/> <style type='text/css'> #WidgetID {display:none;}/*to hide empty widget box*/ </style> </b:if> </b:includable> </b:widget>
List of conditional tags
Replace the "PUT CONDITIONAL TAG HERE" in the above code with any one of the thing.
1. Index (list) pages
Index pages include homepage, labels page and yearly archive page.
<b:if cond='data:blog.pageType == "index"'>
2. Post (item) page
<b:if cond='data:blog.pageType == "item"'>
3. Static Page
<b:if cond='data:blog.pageType == "static_page"'>
4. Archive page
<b:if cond='data:blog.pageType == "archive"'>
5. Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>
6. Specific page/url
<b:if cond='data:blog.url == "PUT_URL_HERE"'>
Now after putting the conditional tag, Preview the code and then Save.
Having problems, feel free to ask
See Demo
Nice tutorial. That's too much of a code for me.
I want your footer!
Great Tutorial never saw such a descriptive article you really put a lot of efforts to make it possible..
thanks for this ..
and I am really agree with Rahul please let us know about your Footer...
@Vimal Dwivedi
Thanks for the compliments :) ,about the footer,its just a image of triangle which is repeated in the X-direction.Will do a tutorial soon.
Nice. Thanks.
need the exacyly same thing but:
1. NOT scrolling (fixed)
2. opening SIDEWAYS (when clicked)
3. a bit smaller button (32px height)
A URL where you have implemented it.
Hai Prayang... ^_^
how to add facebook like on the widget?
just like your
Add the following code just before the closing of unordered list ( </ul> )
<li id="dcssb-facebook" class="size-box">
<div class="fb-like" data-send="false" data-layout="box_count" data-width="10" data-show-faces="false"></div></li>
I checked your blog, it has AddThis share buttons , so this button will appear without any problem, if it doesn't then also add this script just inside the gadget
<div id='fb-root'></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=280482745302734";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
That's a great tool and gadget to share all the articles directly but what about a open sliding social bookmarking tool must check this out Open Heart Social
Hi Prayag , thanks for the excellent tut.
I have one question, how can I add something like this in the comment section like you have.
"JOIN THE DISCUSSION
Any feedback, questions or ideas are always welcome. In case you are posting Code ,then first escape it and then paste it in the comments"
regards
Just go to Settings > Comments and in the Comment Form Message add the message which will appear above the Comment section
Please ask the questions in the Forum which are unrelated to the Post.
Hi, i think i followed everything quite correctly, the only problem i have add is that i am not able to get it as a side bar. rather it gets stuck at the point where i put the code in the widget[the right side] i changed the settings but it still is stuck there. any help?
Add the following CSS , it should solve the issue
#dcssb-float {left: 220px !important;}
sorry i might sound stupid, i added the above line somewhere in the code. but it still is on the right side of the page, even though i changed to left. i am not an expert in all this by any means.
and also its coming at the centre, so when someone clicks on the share button to get the options they cant see 'Twitter' and Facebook badge. help?
my issue is resolved now. thanks.
I'm using weebly, so no any plugin facility available there... So, this is something may work cause weebly has the option to insert java and html within its body tag.... Thank you so much for a great share... I'm going to give a try....
That's a great tool and gadget to share all the articles directly but what about a open sliding social bookmarking tool must check this out Open Heart Social
nice it cool