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