
Live Demo:-
How to add this Social Bookmarking widget on your blog?
It's Easy to Install this widget in your blogger blog. To add it just follow the simple steps given below.- In Dashboard Go to Template > Edit HTML Button
- Ignore the Warning and Click the Proceed button
- Then Click Expand Widget Templates
- Search for
<b:includable id='post' var='post'>
- Below that place the following code
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/*<![CDATA[*/
#btnt-social { bottom: 10%; margin-left: -50px; position: fixed; }
#btnt-social ul { list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#btnt-social ul li { display: inline;background:none;margin:0;padding:0;}
#btnt-social ul li a { display:block; width: 32px; height:32px; margin: 5px 0; }
#btnt-social ul li a.twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixCxXCvzPUuXVRu81swMPZsvOI4BOHwr3EHAEwhyI7w4DwYr1F_zBfVFrL59Uolf5MVnMBUMYVjqmNf0wsaOEYAhohsOW0eegcnz4Py9J_F7J_Wk99gOBNtdOBSHqGa-YAfWt-rQ-Py87N/s32/twitter.png") repeat scroll 0 0 transparent; }
#btnt-social ul li a.facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcv5adr4Qtm-Cyj5vPDAq4slSAXEZ1VFp1GPFwMhQZGhml7EwQI5KlvOe_8beM7KvmZgBreLchtUTJbyC_LBX2oQFUh1MKG-8-DxN5MyJSgIuQWIiQnyZkea-Qtc7GDLmMo0COTgaVClmX/s32/facebook.png") repeat scroll 0 0 transparent; }
#btnt-social ul li a.stumbleupon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRwXDHwzfAF5BibpGgFbiH3dtqn6xWv98xwYpFA_PPI6RY3Mu_yTuDFTiT7vEuTNrB-24JkNkM2PDgexFlKuG-ZV0m7H8mxzpsoe3mwUEgEZU7SeKfr-w4QLRv8Kc09LB_45m3iAP3OGDg/s32/stumbleupon.png") repeat scroll 0 0 transparent; }
#btnt-social ul li .google-plus { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil6whMmZs-AlaD3MM6G4swXcTxGK4KEiaAHCMW0ke4vkSxsCMGFMpcAaTVYM5hWmgmlSo2JErgzT4tz6bG_3jOehalXv-Bxz9UGWHPUII5zOWWksRwiV3vXgvIA4XgcvTkpE8tUsjjOjJC/s1600/g-plus.png") repeat scroll -1px 0 transparent; }
#btnt-social ul li a.pin-it-button { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKXMnjGlZMy0szoYpbnR891ZEAsqVWN1QIGt8RNDgFvNzyfBQjjHkToefh7ua0Tvw2_FcJ2eewcx1JRGPcYe2kMLW694gCvWz9j8vTWMxQQ0bHJDJ2MwazR9M15myikbyRxsN2CPjZCxTz/s32/pinterest.png") repeat scroll 0 0 transparent; }
#btnt-social ul li .addthis_32x32_style .dummy .at300bs, #btnt-social ul li .addthis_32x32_style .at300bs, #btnt-social ul li .addthis_32x32_style .at15t { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGTjtGQY5m-9XI-vkOXG9hADolQQmZLxuTm-O-3He55gQiqIyP1T9rgfZeDqtkxnVIxedOMrr1FSMDmSxxuVvSnRfECWNUQa1Ns3_AgOBT30LRwAeckuj_XNVfFenrjeMCqZ3yfx2HsxmF/s32/sharethis.png") repeat scroll 0 0 transparent; }
/*]]>*/
</style>
<div id='btnt-social'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='google-plus' expr:href='" http://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Google+ '/></li>
<li><a class='pin-it-button' href='javascript:void(run_pinmarklet())'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script></li>
<li><div class='addthis_toolbox addthis_32x32_style'>
<a class='addthis_button_compact'/>
</div>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "blogtipsntricks.com",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></li>
</ul>
</div>
</b:if></b:if> - Now save your template And you can see your post page to check it.
Note:- This floating bar would display on post pages only and wont display on homepage.
If you Liked it! then feel Free to Share and leave a Comment. Please post any query About this Widget you have in the comment box below.
Hey chander,
ReplyDeletehow do you make this appear on the homepage too?
Simple Just Remove the following Code to show the widget in homepage.
ReplyDelete<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
</b:if></b:if>
And My name is not chander It's chandeep. Call me Chandeep :)
Admin. You should change addthis version to latest.
DeleteFind :s7.addthis.com/js/250/addthis_widget.js
Replace :s7.addthis.com/js/300/addthis_widget.js
The new addthis have more social site. I hope you change it :)
Peace, Danial
Thanks for Describing. :) I changed it.
Deletehow to have related post like you?please reply.
ReplyDeletehi...it doesnt work.. :(
ReplyDeleteNo,It works Fine In your blog(I checked it). You have to see the post page to see the widget working. :)
Deleteyes. after i fix it myself. please check your script, a lot of undefined code. Anyway thanks for the lovely script.
DeleteIt seems that you haven't changed anything except the margin. It should be changed because of your blogger template design. Most of the sites the widget works fine.
DeleteAnyway I'm glad It worked for you. :)
Please let me know what type of undefined code you found in this widget.
This is the capture screen of your code above. i highlighted the undefined code
Deletehttp://i1306.photobucket.com/albums/s563/syahrulzaman/capture.jpg
Ohh!! Thanks for mentioning the Errors I Just encountered this error. Now I fixed all errors.
ReplyDeleteI think this Error should be caused While Updating this post with latest version of addthis.
All the opening brackets a Replaced with the word Undefined.
Thanks for mentioning. :)
Keep in touch...
no problem. glad that i can help u a little bit.
DeleteI don't know what I'm doing wrong, I went to edit HTML and found , placed your codes and nothing happened, what am I doing wrong?
ReplyDeleteNever mind, got it!
ReplyDeleteExpand Widget Templates then Search it . You will find It
ReplyDeleteBro, Can you give your blog URL
ReplyDeleteThe problem is you've modified the margin of the widget. just reinstall the widget without modifying. It'll definitely Work.
ReplyDeleteThanks for using our widget... :)
Followed your instructions and worked for me, thanks.
ReplyDeleteIts a Cool looking Widget.. Thanks for the Share!!
ReplyDeleteHi,
ReplyDeleteI have started using your widgets extensively in my blog and that means I love every awesome widgets you code for blogger.
I recently installed this widget and is just working fine except that the widget is floating even below the post body i.e. in the footer of my template which I am not very comfortable with. Can please give me solution so that the widget stops floating below the post body?
Thanks a ton!
Sorry, It's not possible by editing the widget.
DeleteHello... Chandeep j
ReplyDeleteactually i am using Magger blogger template...when i opens a post to read...then belows , related post widget is not working but only widget text is showing...
i want to show related posts in the end of the post...
please help me...
your template is awesome looks
Thanks, this worked great. I didn[t need to expand the widgets, I just clicked Edit HTML and searched for that code and then pasted your code below it. Done!.
ReplyDelete