Thewebtricks| Web help | Tec news | Social Media: Add facebook like button + print this post button to blogger

Facebook like button these days are too much used,each and every good running website you see contains facebook like button so that user can like the article and hence it gets shared on their facebook profile which promotes articles by sharing,one other thing which is quite useful for blogger is print this post button which allows user to print particular article in a particular format,

so to add both of these buttons to your blogger below your post just follow some steps:-
[only to add them at the bottom of the posts on post pages]
1.[Add print this post button]Log in to your dashboard, go to edit html and click on expand widget template,

and search for </head> and before that header end tag place this following css code,

<style type="text/css" media="print">
#header-wrapper,#header,.header, #sidebar-wrapper,.sidebar, #footer-wrapper,#footer,.date-header,.comment-link,.comment-footer,#comments,#blog-pager,.feed-links, #backlinks-container, #navbar-iframe,.dontprint {display: none;}
.post,#content-wrapper,#main-wrapper,#main{width:100%}</style>

,this css will define how your blogger post is to be printed when print this post button is clicked,next step is to add this button,go to edit html and click on expand widget template,

and search for <data:post.body/> ,below that paste the following piece of code

<b:if cond='data:blog.pageType == "item"'>
<span style='background: url(http://2.bp.blogspot.com/_u4gySN2ZgqE/S50y8gqg78I/A
AAAAAAABbw/PHubFP5CPwA/s1600/print-this.png) left no-
repeat; padding-left: 25px;'><a href='javascript:windo
w.print()' rel="nofollow" >Print this post</a></
span>
</b:if>

"add float:right; to make it go to right side of the post or

float:left; to make it float left,add this code just after this padding-left: 25px; "

click on save template and button is added.
[we suggest to make this float to right side as when you add facebook like button,facebook like button will automatically float to left side]
2.[Add facebook like box]Log in to your dashboard click on edit html check expand widget template,

search for

<data:post.body/> and after this code you will see the recently added print this post button code just below that code add this piece of code for facebook like button,

<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php
?href=" + data:post.url + "&layout=standard&show_faces=false&
width=100&action=like&font=arial&colorsch
eme=light"' frameborder='0' scrolling='no' style='borde
r:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>