How Add Share Buttons By Blogger Released In Draft

Hi friends as next feature by the blogger to be released was share buttons by them. As they have added the codes to the templates a long time before but haven't released them officially. And today they have released it officially in draft.blogger not blogger.So if you wanna use these share buttons to your blogger.You have to use draft.blogger to sign in to your blog instead blogger and just activate the widget first from there.The share buttons are very beautiful i liked them a lot.But before i too would like you to see the demo of share buttons how they look like.

Just you can check here the demo of working buttons at bottom of the post title.



Now i would like you all to have this feature activated in your blog so that you can have those buttons in your blog when u want.

So i will continue with the tutorial for adding these buttons in blogger.

Installation Of Share Buttons

1.Just Login To draft.blogger.
2.Now Go to Design > Page elements > Click on the Edit Button of Blog Posts Widget.
3.Now popup window will open and just check mark the share button widget and your buttons are activated now.

Now just check your blog if the share buttons appear at the bottom of the post,then its good.Else keep follow the tutorial.

Adding Of Share Button Codes If Not Working

Just go to Blogger Design > Edit HTML > Check mark Expand Widgets Template > Press Ctrl + F

Now If you want the buttons to add at end of post then you find for any off these lines in your codes.

<div class='post-footer'>

or

<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'>

or

<data:post.body/>

And now after getting any line you can add the below codes after it.

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

Preview it if its ok.Now save your template.

Now If you want the buttons to add below the post title.

Find for the below line in codes and add the above codes before it.

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

Yo will either get all three lines in codes or only red line so no need to worry just have to add codes before it only,either you get one or all three.

I am sure now you will be able to add the share buttons to your blog and if you have nay problem in doing so leave your comment below.