How to add the can of sharing buttons ( share box) in your blogger blog - blogspot

In this article I 'll show you how to add the Pricipals sharing buttons in a box to show your blogger blog - blogspot .This box contains buttons with official counter; Twitter, Facebook , Google Buzz, Stumbleupon and others.
 
To add this box to your blog, blogger , blogspot, follow these steps :
1- connect to your blogger and go Overview >> Edit HTML and check the box gadgets Develop models.
2 - look for the following line:
<div class = ' post -header -line- 1 ' />

and if you did not find the previous line in your blog model , find the next <data : post.body />
And just after that line Add the following code:



 

<b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <br /> 

<style type='text/css'><br /> .multisharebox {<br />   background: 

none repeat scroll 0 0 #EFEFEF;<br />   float: right;<br />   margin: 

5px 0px 3px 10px;<br />   padding: 0 5px 0;<br />   text-shadow: 0 

1px 0 #FFFFFF;<br />   width: 260px;<br />   border:4px solid 

#d8dfea;<br /> }<br /> .fb-like-boxtop {<br />   background: none 

repeat scroll 0 0 #EDEFF4;<br />   border: 1px solid #D8DFEA;<br />   

color: #000000;<br />   float: right;<br />   font-size: 11px;<br />   

margin: 0 0;<br />   padding: 5px 10px;<br />   text-align: left;<br />   

width: 230px;<br /> }<br /> .fb-like-boxtop a {<br />   color: 

#000000;<br />   text-decoration:none;<br /> }<br /> .fb-like-

boxtop a:hover {<br />   color: #000000;<br />   

text-decoration:underline;<br /> }<br /> .fb-like-box {<br />   

background: none repeat scroll 0 0 #EDEFF4;<br />   border: 

1px solid #D8DFEA;<br />   color: #000000;<br />   float: right;<br />   

font-size: 11px;<br />   height: 60px;<br />   margin: 5px 0;<br />   

overflow: hidden;<br />   padding: 5px 10px;<br />   text-align: left;<br />   width: 230px;

<br /> }<br /> </style><br /> <br /> <div class='multisharebox'><br /> <table><tr><br /> <td><table><tr><br /> <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'/><br /> <b:if cond='data:post.isFirstPost'><br /> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'><br /> </script><br /> </b:if></td><br /> <td><script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + data:post.url'/></td><br /> <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'/><br /> <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td><br /> <td><a expr:share_url='data:post.url' name='fb_share' rel='nofollow'
type='box_count'/><br /> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td><br /> </tr></table></td><br /> </tr><tr><br /> <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><br /> </tr><tr><br /> <td><div class='fb-like-box'><br /> Do you like this post?<br /> <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;'/><br /> </div></td><br /> </tr></table><br /> </div><br /> </b:if>


If you want to add this box on every page , delete the first line and the last line.
That 's it for this tutorial is the next time.