Making Printer Friendly Pages.

I was shocked when I print my Page.It was looking so wired in print paper.All the unnecessary stuff like AdSense ads,Header,navigation Menu,comment form,Footers,Sidebars.The are making such condition that it  was better to print page.But the problem was solved soon.By adding CSS we can make printer friendly page.We can remove sidebars,Scroll to Top button,Ads etc. using display:none method.We will also widen the content area of Blog.If we do so out blog page will be printer friendly.You can see demo if you print my page.Lets do it.

Adding CSS code.

1. Go to Blogger.com
2. Click in Template or Design.
3. Go to Edit HTML.
4. Find <b:include data='blog' name='all-head-content'/>
5. Adding the following code just below it.

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

6. Where
   • In Line 2 We have added code which are excluded in Print paper.You can add the other id or classes like link bar etc.. which is to be excluded.
   • In Line 3 we are are making content width  automatic to printing paper.
   • In Line 4 we are making underlining link.
7. If You have any problem You can Comment.

Adding Print this Button in a Blog.

You may wish to add this button in a Blog.After adding this button if visitor click on Print Button the button will invoke to print the Page.To add simply follow below steps.

1. Be sure you are in Dashboard>Design or Template>Edit HTML
2. Tick on Expand widget located at top right part of code window.
3. Print Button HTMl Codes.
4. Find below corresponding codes where you want to add the Printer Button.
   1. At Footer Find this code and add print button code under it.

      <div class='post-footer-line post-footer-line-2'>
      

   2. At  Right part of Post Title(Find this code
      <h3 class='post-title entry-title'> and replace with below code)

      <span style='float:right;'><button code here>/span><h3 class='post-title entry-title'>
      

      Replace Button Code here with print Button Code

   3. Below Post Titles find this code and add print button code under it.

      <data:post.body>

Bye.If you encounter any problem the comment us.We are always here to help you.

What my Blog looks after making it printer friendly.(Demo)

When I print my blog it looks like this?What’s about Yours.

Have you got the difference of my blog in screen and print paper.You can see no sidebar,header,navigation bar,widgets etc.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.