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.
9 comments:
Thanx Alot
مدونة الباسم
Hi there,
If you want to change the appearance to a 'flat-style' (no border, no hover effect)
sample see on my blog: www.Leechermods.com
add this to yout CSS section:
.sb-email {
background-position:0 -66px !important;
}
a.sb-email:hover {
background-position:0 -66px !important;
}
a.sb-email:active {
background-position:0 -66px !important;
}
.sb-blog {
background-position:-21px -66px !important;
}
a.sb-blog:hover {
background-position:-21px -66px !important;
}
a.sb-blog:active {
background-position:-21px -66px !important;
}
.sb-twitter {
background-position:-42px -66px !important;
}
a.sb-twitter:hover {
background-position:-42px -66px !important;
}
a.sb-twitter:active {
background-position:-42px -66px !important;
}
.sb-facebook {
background-position:-63px -66px !important;
}
a.sb-facebook:hover {
background-position:-63px -66px !important;
}
a.sb-facebook:active {
background-position:-63px -66px !important;
}
.sb-buzz {
background-position:-84px -66px !important;
width:22px;
}
a.sb-buzz:hover {
background-position:-84px -66px !important;
}
a.sb-buzz:active {
background-position:-84px -66px !important;
}
Thanks man!
Thank so much for sharing this. I have the old design, and could not figure out how to get it to work on my blog. And, been searching on how, and with it being so new, I'm glad I found your fix!
whollyfreebies.blogspot.com
Thanks, this was very helpful!
thank you for this! but is there any way to remove this from the static pages? thanks!
@miranda these are the codes
<b:if cond='data:blog.pageType != "static_page"'>
----share cods here----
</b:if>
embed share codes between the two lines as i showed
hi thanks for this, i do that but i face a problem, http://weblog.farhikhtegan.com/
long scroll bar!, is there any way to fix that?
Hey
Just droping be to thank you for the great tips.
If not of people like you, some of us will never find our way out in this competative field.
Here is my blog
http://relationships-relationshiptips.blogspot.com/
If you will be so knid to check it out
and offer ideas i will be most grateful.
Post a Comment