Social widget for posts with all social buttons with count



In this post I going to tell you how to install a simple social widget inside the posts having generally used social buttons with counters.
You can see the screenshot of the the widget above. Follow the below steps to install it.

Step 1. Go to your template code dashboard >> design >> edit HTML. Now click the box named Expand widget template.
Search for ]]></b:skin> and paste this code above it.
.social-bar { border: dashed #ddd; border-width:1px 0 1px 0; margin: 10px auto 10px; display:block; padding: 3px 0 1px 0px; overflow: hidden; }
.social-bar .social_button {float: left; display: inline; overflow: hidden; height:22px; }
.social-bar .social_button.dg { margin: 0px 0 0 20px ; padding-top: 2px;}
.social-bar .social_button.tm { margin: 0px 0 0 20px; padding-top: 4px;}
.social-bar .social_button.fb { margin: 0 0 0 20px; padding-top:3px;}
.social-bar .social_button.su { margin: 0px 0 0 20px; padding-top: 2px;}
.social-bar .social_button.buzz { margin-left:20px ; padding-top: 3px;}
Step 2. Now find this code <div class='post-header'> and paste this code below it.
<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='social-bar'>
<div class='social_button dg'>
<a class='DiggThisButton DiggCompact'/><script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
</div>
<div class='social_button tm'>
<div style='float:right;width:90px;height:25px'>
<a class='twitter-share-button' data-count='horizontal' data-via='technowit' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
</div>
<div class='social_button fb'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:27px;'/>
</div>
<div class='social_button su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>
</div>
<div class='social_button buzz'>
<a class='google-buzz-button' data-button-style='small-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</div></div></b:if>
Save the template and its done.

The above hack is for the widget to appear in the head. But if you want it to appear in the footer then search for
     <div class='post-footer-line post-footer-line-1'>
or  <div class='post-footer-line post-footer-line-2'> 
or  <div class='post-footer-line post-footer-line-3>
and paste the code in step 2 below any of those three.


Responses

1 Respones to "Social widget for posts with all social buttons with count"

ecommerce optimization said...

Thanks for your advises. It will be helpful for sure to set these values. I have bookmarked your site to transmit it to my colleagues.


July 3, 2013 at 7:42 AM
 

Followers

Links

Blog Promotion, Promote Your Blog
Submit Blog, Blog Directory Submission
Bloggers - Meet Millions of Bloggers Web Design Blogs
blog directory
Online Marketing
Return to top of page Copyright © 2010 | Platinum Theme Converted into Blogger Template by HackTutors