Hoe to create Printer friendly webpages for blogger blog with CSS

Consider a situation where your readers has very less time available with them to read your post online or he/she may find your article valuable to him/her, so the readers tries to print your article and made available to him always. And what happen if your print version of your post version come with all cluster of sidebar and different kind of element that would not be require by your reader on print pages, so how to solve this problem, how to make your print pages of your blogger post free from all these cluster of your blogger/website.

Actually there is way all we need to add some very small CSS and some amount of coding. There is already an article written on this topic by Amit Agrawal you may also can read his post here.
I will be improvising his coding to give the printed webpage more extra professional features and looks. For demo print preview this post. How does it look ? cool ha..!

So simply we will start with the coding
Steps:
1: Add this below code ABOVE

]]></skin>

<style media='handheld,print'>
a,a:link {
  color:#000; 
  text-decoration:none
}
a[href]:after{
    content: &quot; (&quot; attr(href) &quot;) &quot;;
font-size:14px;
font: 100%/1.618em Georgia,&quot;Times New Roman&quot;,Times,serif;
}

.noprint {
  display:none
}
.yesprint{
display:block;
}
#wrapper:after{content:"This story was originally published at Eutectics (www.eutectics.blogspot.com) by Tushar Sharma. This printer-friendly version is made available for your personal and non-commercial use only.";}
</style>

Here a[href] is used to show any link within the blog post. #wrapper is the ID whole body structure of the Blog. Make sure you replace #wrapper with ID of first child after body in your HTML blogger template and also customized the text to appear at the end of printed page.

2: Add the following code where you have to render print button.

<a href='javascript:window.print()' rel='nofollow' title='Print This Story without clutter'>print</a>

3: Now in order to make different element of the blog not to display on printed webpages simply enclose them with the following code.

<span class=’noprint’>....</span>

Like for example sidebars, footer, header, and comments of your blog that would not be required by your readers.

4:Similarly enclose any code or text within the following piece of code that you have to show only on printed webpage.

<span class=’yesprint’>....</span>

Like for example I have enclose the following text in the above code. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='yesprint' style='width:100%'>
NOTE :- <i>
This story was originally published at Eutectics (www.eutectics.blogspot.com) by Tushar Sharma. This printer-friendly version is made available for your personal and non-commercial use only.</i></span>
</b:if>

5: Since we don’t want to display the above text by default but only on printed page therefore we should include this CSS above ]]></skin>

.yesprint{
display:none
}

More from author: You add more CSS property to step 1 code in order to make your printed webpage more user friendly for readers. For example I have make the blog to change its width to 100% by including the following code. 

.primarybpart{
width:100% !important;
}

Here !important is necessary to overwrite its previous value. Similarly we can change any CSS property just by including within the print script.(step 1 code)

Share on Google Plus