Home » Blogger Tutorials, Tricks and Hacks » Blogger Tricks » How to Make your Page Printer-Friendly

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How to Make your Page Printer-Friendly

How to Make your Page Printer-Friendly

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

703 views

You’ve probably experienced printing you page and then unnecessary images and text like your header, footer, ads, etc. appear on your page, which is kinda annoying.

Thanks to Martin Gajurel this problem is solved. In this tutorial, we’ll see how Gajurel was able to print without the previously mentioned problems appearing. He added CSS and that did the trick to remove them.

 

Here’s how to do it.

1. Go to Blogger Dashboard > Template > Edit HTML
2. Search for <b:include data=’blog’ name=’all-head-content’/>
3. Add this code just below <b:include data=’blog’ name=’all-head-content’/>

<style media='print' type='text/css'> #header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #lower-wrapper, #footer-wrapper, #footer, #credit, .comment-form, .post-footer, #blog-pager, .post-feeds, #backlinks-container, #navbar-section, footer {display: none;} #content-wrapper, #main-wrapper, #main { width: auto !important; overflow: visible !important; float: none !important; color: black; font-size: 12pt; background: white; border: none; } #main a { text-decoration: underline; color: blue; } </style> 

4. In Lines 1,2,3, Gajurel has added codes that are exclude in Print paper. For Line 3, you’re going to make content width automatic to a printing paper and Line 4, you’re making a link to be underlined.

Note: You may also add Print this Button wherein users can click that button and they can print the page. Here’s how:

1. Dashboard>Template>Edit HTML.
2. Click Expand widget. It is located at the top right part of code window.
3. Search for the spot where you want to add Printer Button then add this code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href="javascript:window.print()"><img border="0" style="margin-right:5px" src="YourImageUrl"/>Print this article</a>
</b:if>

4. Save.

Liked It ? Please Share

Comments

5 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Gagan Masoun says:

    easy to understand….!!! :)

  2. top markotop bnget niihh gan

  3. kizi game says:

    You’ve probably experienced printing you page and then unnecessary images and text like your header, footer, ads, etc. appear on your page, which is kinda annoying.

  4. Yes , You’ve probably experienced printing you page and then unnecessary images and text like your header, footer, ads, etc. appear on your page, which is kinda annoying.

  5. Ali raza says:

    It makes my layout dashbord black and white. Is it ok or not. Check this snap shot. http://3.bp.blogspot.com/-VmPH7rBHNog/UkUYwY01YAI/AAAAAAAALOI/QQ3e5RwhjgA/s1600/black.png

    Thank you.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here