Blogroll

News Update :

Saturday 13 October 2012

How to Add Share Box to Blog in 5 easy Steps


People loved to shared many things most of the people like this posting of the author and share it with many friends. Now Here's is a tutorial on how to add a share box including Twitter, Fb, Google Buzz and Stumble Upon to your blogger blog. Follow the easy steps below given.

share+box
  • Log in to Blogger Account. Click design >> Then click edit HTML.
  • Tick 'Expand Widget Templates' .
  • Click Ctrl+F and then paste this code .
<div class="post-header-line-1">
  • Lastly , copy this code just below it.
Note : If your's blog template doesn't have <div class="post-header-line-1">, scroll down until you found <data:post.body/> and just paste above it .
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>.multisharebox {background: none repeat scroll 0 0 #EFEFEF;float: right;margin: 5px 0px 3px 10px;padding: 0 5px 0;text-shadow: 0 1px 0 #FFFFFF;width: 260px;border:4px solid #d8dfea;}.fb-like-boxtop {background: none repeat scroll 0 0 #EDEFF4;border: 1px solid #D8DFEA;color: #000000;float: right;font-size: 11px;margin: 0 0;padding: 5px 10px;text-align: left;width: 230px;}.fb-like-boxtop a {color: #000000;text-decoration:none;}.fb-like-boxtop a:hover {color: #000000;text-decoration:underline;}.fb-like-box {background: none repeat scroll 0 0 #EDEFF4;border: 1px solid #D8DFEA;color: #000000;float: right;font-size: 11px;height: 60px;margin: 5px 0;overflow: hidden;padding: 5px 10px;text-align: left;width: 230px;}</style>

<div class='multisharebox'><table><tr><td><table><tr><td><a class='twitter-share-button' data-count='vertical' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/><b:if cond='data:post.isFirstPost'><script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script></b:if></td><td><script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + data:post.url'/></td><td><a class='google-buzz-button' data-button-style='normal-count' data-locale='en_IN' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' rel='nofollow' title='Post on Google Buzz'/><script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td><td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td></tr></table></td></tr><tr><td><div class='fb-like-boxtop'><a expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>BlogThis!</a> | <a expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>Email This!</a> | <a href='javascript:window.print();'>Print This!</a> | <b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> comments</b:if></a></b:if></div></td></tr><tr><td><div class='fb-like-box'>Do you like this post?<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=230&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:230px; height:40px;'/></div></td></tr></table></div>

</b:if> 
  • Save Template. Thats it ...

No comments:

Post a Comment

 
Design Template by panjz-online | Support by creating website | Powered by Blogger