Creating printer friendly blog pages

Have you tried to print your article of your blog and my blog.You may be surprised.You many differentiate with my blog and your blog probably. Printer

If your content is interesting,genuine every body supports it.But to make popular we have to make designing , attracting visitor etc..One of the way to attract visitor is to make a Blog beautiful.Not only in computer screen it should look beautiful in paper too.I have found many of the page are not printer friendly.For e.g try to print your page.If you have kept advertisement,Widget etc. it also comes in Printed Copy.The result may be negative as visitor may think you are creating this blog for money not for Supporting other.Thus making a printer friendly page is essential.If you want demo you can do by printing this page

I.Remember

By making your blog printer friendly it just affect on paper it will have no affect on your Blog.Your Blog will be viewed normal as pervious in computer screen.
It does not affect directly to your reputation,Traffic etc..
It helps to get rid of unnecessary stuff like ads,Widget,Etc..

II.Making Printer friendly page.

The tutorials it related to Template Html editor.By adding only simple code it can be done.To make printer friendly you can follow below steps.

A.Adding Code to make printer friendly page.

Go to Blogger.com(You will be redirected to Blogger Dashboard)
Go to Design in old interference(In new interference click on drop menu click on Template)
A new page will be reloaded click on edit html for both interference
Back Up your Blog.

Find <head> and add the following code just before it.

<!-- Printer Friendly by Blogger SInker -->
<style type='text/css'> 
@media print
  {
#linkbar-wrapper,#header-wrapper,#middleads-wrapper,#sidebar-wrapper,.sidebar,.comment-form,.post-footer,#blog-pager,.post-feeds,#backlinks-container,{display:none !important;}
#content-wrapper,#main-wrapper,#main{background-color:#FFF;border:none;color:#000;float:none !important;font-size:12pt;overflow:visible !important;width:auto !important;}
#main a{color:blue;text-decoration:underline;}
  }
@media handheld and (max-device-width: 480px), screen and (max-device-width: 480px)
  {
 ,#header-wrapper, #content-wrapper, #main-wrapper {width:480px !important;}
  }
</style>
<!-- BloggerSinker.blogspot.com printer friendly  end -->

The code has multiple choice.You can add or remove what ever you want.For example it you want to show header in print page remove #header-wrapper from the code.You can exclude by adding your widget like #html1 #html2 etc. and using {display:none !important;} tag.If you want to show sidebar remove #sidebar-wrapper , sidebar etc. from code.It s very easy if you frequently use this code.The code is not CaSe Sensitive so small error cannot do more effect on Template.

B.Adding Print Button in Blogger.

This button only helps to print the article when visitor or user click on It.Adding this may increase your designing.

Follow up to Step 4
Expand Widget of Html Editor
Find a appropriate place like
- For Adding In Footer You can add the code under it.
```
<div class='post-footer-line post-footer-line-2'>
```
- For Adding In the Post Top part you can add after it.
```
<h3 class='post-title entry-title'>
```
If you want make to appear left or right enclose the code with <span> tag like this(You can change right to left.Instead of using directly print code use it like this.
```
<span style='float:right;'><PrintbuttonCodeHere></span>
```

Add the following code

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

Change YourPrintButtonDirectImageUrl With the direct image Url.We can identify the direct image URl by checking the image extension .It ends with image extension like .jpg , .png , .Gif etc.
In the step 5 the line 1 is conditional tag which means it will appear in item(Post) pages only and last line is encloser of it.If you want to appear the print button in other page like homepage remove the line.
Happy Blogging,Bye with cheers

Subscribe At free
Thank you for visiting FacebookSinker.blogspot.com. Please don't miss any of the updates by subscribing to our RSS feed or email updates.

5 comments:

Green SinkerDecember 26, 2011 at 3:21 AM
Sorry for my poor English.If you have any problem comment please
AnonymousDecember 27, 2011 at 3:45 AM
thanks for syntax highlighter <a title="Syntax Highlighter for Blogger and Wordpress" href="http://bloggersinker.blogspot.com/2009/02/how-to-show-code-in-blog-post.html" rel="Syntax Highlighter for Blogger and Wordpress" target="_blank">
Green SinkerDecember 27, 2011 at 3:47 AM
@ Anonymous

My Pleasure for syntax highlighter
stephenCollinesDecember 28, 2011 at 9:39 AM
Have you tried to print your article and my blog blog. If You may be surprised.

Midwest Scrapbook
Green SinkerDecember 29, 2011 at 3:24 AM
@stephenCollines

Yes i am surprised but no need to be worry

Try this

Add the following code in step 5 of A line 5

#slideshow,#BlockContent [display:none !important;]

Replace { with [ and } with ]