When I read a good and informative article on someone's blog or any other website, if I really like it I usually look for options to keep the article for my reference in the future. Only bookmarking the link is not sufficient enough because in case the website itself goes down, the link is of no use anymore.
Some blogs/websites offer options to save the article as a PDF document. Another very common option is to allow the reader to print the article. But, because Blogger does not provide this option by default, we will have to find a way ourselves.
At first, I thought how hard its going to be. Hook an event here, write a script there, and voila! But, wait a minute (I thought to myself)...don't I have this sidebar showing quite a few widgets, the social networking icons in the header area, the post icons, the quickedit (pencil) icon under the post, comment form, and what not. I dint want any of this to show up on the page when someone prints my articles.
With a little bit of scripting and CSS knowledge, you can add this very useful option in your own blog that your users will really appreciate. Here's how:
- Open your blog's Layout Settings and click Edit HTML.
- Check Expand Widget Templates.
- In your template code, under <head> element, add the following lines:
<script type='text/javascript'>
//<![CDATA[
/* generate and use any GUID here */
var NAME_PRINT_WINDOW = 'C7DE3BE342E8486AA77A19F1E0EFCEC1';
function init() {
if (window.name == NAME_PRINT_WINDOW)
window.print();
}
function printPost(href) {
window.open(href, NAME_PRINT_WINDOW,
'scrollbars=yes,resizable=yes,width=640,height=480,menubar,toolbar,location');
}
//]]>
</script> - Now, find <body> tag and change it to <body onload='init();'>.
- Then, find <p><data:post.body/></p> and just above it, add the following:
<span class='item-action'>
<a expr:href='data:post.url' onclick='javascript:printPost(this.href);return false;'>
<img class='icon-action' src='http://mail.google.com/mail/images/print_icon.gif'/>
Print this post
</a>
</span>
That's all to it; in case you find any problem while making it work, leave me a comment. And, on how to make your blog more printer friendly, I'll discuss it in the next post.


