Print your Blogger Posts by adding a Print Button

print-your-blog-posts

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

</head>

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;}
.post,#content-wrapper,#main-wrapper,#main{width:100%}</style>

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

<data:post.body/>
and below that paste the following code

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<span style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg78adWhpkOhOqf6Vg7IKSan9EnQOkFd7bhpUzuY0b9GO2VTu0hyphenhyphenDCtSR_KxIkL3vY9Sbm5yd0oVGuJRYxHBJ8xrQsChDEmKWuKSuQXWfQIN5gkF0Cos94XEnighSMlBuKuzYGtS1WFPyI/s1600/print-this.png) left no-repeat; padding-left: 25px;display:inline;'><a href='javascript:window.print()' rel="nofollow" >Print this post</a></span>
</b:if>

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

14 comments :

  1. it didn't work on my blog from bloger

    ReplyDelete
  2. It works but prints 8 pages ( 6 empty pages) instead of one or two.

    ReplyDelete
  3. I run a coupon website where I list sale items at stores. I'd like to provide a list of sale items with checkboxes by each item. Once a person checks a box, I'd like for them to be able to print whatever they've checked off so they can make a printable shopping list. Does anyone know of a script or widget that might work for Blogger?

    ReplyDelete
  4. Can be improved like

    should work on Chrome
    Should print only data, not the whole page

    ReplyDelete
  5. Thank you for your help, but the next question is:

    To remedy my issue, you say, "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" The question is, "How, where do I reset the floats and overlow styles of the selectors to default values?

    Thank You...

    ReplyDelete
  6. It,s work!!
    http://grunge-note.blogspot.com

    ReplyDelete
  7. How do I modify the float and overflow elements that you mentioned? My blog only print previews the first page.

    ReplyDelete
  8. Thank you very much, it's really work. Nice article.

    ReplyDelete
  9. In my blogger dash board in layout tab there is no edit html tab can you pleae help me

    ReplyDelete