Official Sharing Buttons on Blogger

Blogger has been rolling out new features to improve the looks and usability of the blogs. Blogspot 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 now 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 Blogspot Blog.
Then don’t wait. Just follow these simple steps

1. Login to Your Blogspot Dashboard
2. Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Show Share Buttons” Option
3. You can Drag and Drop the Share buttons and place it where you want.
4. Now if everything went right, then you should be able to see the Share buttons on your Blog. If not then read on. :)
5. If it didn’t appear then don’t worry, That is because you are having a modded template. Just Go to the Edit HTML page under the Design Tab , Check the “Expand Widget Templates”  Option 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'>

   Or if that is not there then find
   

   <data:post.body/>

   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

1. 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>

2. Hide Some of the Sharing Buttons – If you want you can hide some of these buttons using CSS. For example to hide the Blogspot 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,

Got into Trouble with implementing the sharing buttons? Ok leave a comment here and i will try to help you out. :)
Thanks to my friend Soufaine for digging this up.

Source: Blogger Widgets

Search Post

Label :