Adding a “Print this post” button into blog
One reader of my blog’s, told me that there’s no print button in my recipe blog, and it’s b
etter to have one, if someone wanna try the recipe out in kitchen… This is a good idea for me, so today I’ve added a “Print this post” button to my blog at blogspot…
1. Adding print styling code.
I logged into dashboard of my blogger account, chose the blog I wanted to enable printout of the post… Then clicked “layout”, afterwards “Edit HTML” tab, found closing </head> tag in the code, before this tag, I added the code below:
<style media='print'type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>
Then clicked “SAVE TEMPLATE”, so the print styling code has been added to the blog…
2. Adding “Print this post” button.
Again in “Edit HTML” page, I ticked the “expand widget templates” box, then searched for the line:
<data:post.body/>
Directly after this, I pasted the code below:
<b:if cond='data:blog.pageType == "item"'>
<span style='background: url(http://bloggerbuster.com/images/print.gif) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'>Print this post</a></span>
</b:if>
Then clicked “SAVE TEMPLATE”, now it’s all done!
Note:
In some blog templates maybe there’s
<p><data:post.body/></p>
instead of <data:post.body/>, if you see that kind of line you can add the button code after </P>
