Blogspot Bloggers Official Sharing Buttons

Blogger has been rolling out new features to improve the looks and usability of the blogs. Blogger is now testing out a new Social Sharing icon set consisting of Email, Blogger,Twitter(with goo.gl shortener),Facebook and Google buzz buttons. The set looks simple and elegant with some cool mouse over effects. These Sharing buttons are still in draft(still not published on the official draft blog) and so wont be available in your regular dashboard.If you need to take a peek at these new sharing icons, then take a look at my post page(and try sharing it :P ).

You are still reading. So  i guess that you are really interested in implementing these Sharing buttons on your Blogger Blog.

Then don’t wait. Just follow these simple steps

• Login to Your Blogger in Draft Dashboard at http://draft.blogger.com
• Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Show Share Buttons” Option

• You can Drag and Drop the Share buttons and place it where you want.

• Now if everything went right, then you should be able to see the Share buttons on your Blog. If not then read on. :)
• If it didn’t appear then don’t worry, That is because you are having a modded template. Just Got to the Edit HTML page under the Design Tab and locate 

<p class='post-footer-line post-footer-line-3'>

Or if that is not there then find

<div class='post-footer-line post-footer-line-3'>

and place the following code just below any of these lines[whichever is present in your template].

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

and Save your template.

Optional Tweaks

• Show the Sharing Buttons on Post pages only - Find the Following Code in your template

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

and wrap it within conditional tags as

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>

• Hide Some of the Sharing Buttons – If you want you can hide some of these buttons using CSS. For example to hide the Blogger sharing button, add the following code above ]]></b:skin> in your template 

.sb-blog{display:none}

sb-email , sb-twitter, sb-facebook, sb-buzz and sb-blog are the different Button Classes. If you hide the mail or  buzz buttons, then it might look a little bad as these have rounded edges,