Home » , » Print your Blogger Posts by adding a Print Button

Print your Blogger Posts by adding a Print Button


A “Print this Post” button would be much useful on blog posts(especially on tutorial and recipe blogs). Before adding the Print this button to your blog, you have to make your blog Printer Friendly. You can do this by adding some CSS to your blogger template. You can decide which parts of your blog page should be printed and which parts shouldn’t be. For example it would be better if your blog’s header , sidebars and comments don't appear in the prints. We can achieve this adding some printer specific CSS. If you want you can check out how this page will look when printed, Click File Menu of your Browser and Click Print Preview. You will notice that the header, footer, sidebars comments and other unimportant text wont appear in the print. I have hidden them all using CSS. Here are the steps to implement the same on your blog.

Making your Blog Printer Friendly

1. Login to your blogger account and go to Layout > Edit HTML and look for


2.Just above this line, we will insert our CSS  which will define how the page should be printed, and what all shouldn’t be printed on it.(you can further modify it according to your needs.you can decide which selectors should be displayed and which shouldn't)

<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;}

3.Save the template and view your blog. Now from the File menu of your Browser Click on the Print Preview

4.Adjust the CSS(hide more selectors) until all unwanted elements are hidden on the Print Preview Page.

5.Now your Blog is Printer Friendly.

Adding The Print This Link

1. Go to Layout > Edit HTML and Click the Check box to expand the Widget templates.

2.Look for


and below that paste the following code

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

This will add a Print This link below your post(on the post page).

Bugs :(

1. The complete page is not getting printed.It prints the first page only and truncates the rest.

Solution : - If your template uses the CSS properties float and overflow, then this problem might arise. A method to fix this is to reset the float and overflow styles of the selectors to the default values none and visible respectively(reset the selector styles in the printer css)

You can try printing this Tutorial using the Print this link below :)

Print this post
Source: http://www.bloggerplugins.org/2008/12/print-your-blogger-posts-print-button.html


Post a Comment

Play : Agame | Y8 Games | Y3 Games
Copyright © 2011. Blogger Tips And Tricks 2012 - All Rights Reserved

Proudly powered by Blogger