Wednesday, 18 June 2014

Create Printer friendly webpages in blogger and websites with CSS

Create your webpage printer friendly so your readers can print blog post without any other blog element.

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
1: Add this below code ABOVE
<style media='handheld,print'>
a,a:link {
    content: &quot; (&quot; attr(href) &quot;) &quot;;
font: 100%/1.618em Georgia,&quot;Times New Roman&quot;,Times,serif;

.noprint {
#wrapper:after{content:"This story was originally published at Eutectics ( by Tushar Sharma. This printer-friendly version is made available for your personal and non-commercial use only.";}

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 ( by Tushar Sharma. This printer-friendly version is made available for your personal and non-commercial use only.</i></span>

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>

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.
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)
If you have any doubts regarding this post just drop your comment below.
Updated : July 4, 2014

16 Discussion

  1. If anybody is looking a best for make Printer so that is very popular.

  2. full functionable, premium wordpress theme solution for your website.
    cheap web hosting reseller plans lahore

  3. Very Nice for this blog !!! If you need Dell printer any technical problems dial toll free number +1-800-956-0247. Visit Website:-

  4. To get Avira antivirus technical support service provider, just dial +(800)-293-0867 phone number to resolve your PC and Laptop all kind of problem.

  5. Now get instant help support for McAfee antivirus, dial our McAfee tech support number 1-800-734-2803.

  6. If you want to schedule scanning and virus removal help, call us our AVG Malware Removal Number 1-800-683-5215, to get full support from our technicians.

  7. It is astonishing and brilliant to visit your site.Thanks for sharing this information,this is helpful to me...
    Web Design And Development Bangalore | Stunning Websites Bangalore

  8. I would like to say that this blog really convinced me, you give me best information! Thanks, very good post.
    printer support
    Keep Posting:)

  9. This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it.
    Please Visit- HP Printer Customer Service Phone Number USA

  10. Nice blog! Thanks for sharing this blog. If you want to print your documents then you simply consult us at Virphy our highly safe and confidential Printing PDF Files Online in India. For more detail=

  11. The writer of this blog has good knowledge about printers. In the same way our technical executives are perfect in handling HP Printer queries. You just call us at 0808-169-8077 HP Printer Support Number UK to get an immediate solution for your query from our knowledgeable technicians.


Note : All comments will be moderated. Do Not Spam.