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

6 Discussion

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

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

    ReplyDelete
  3. Very Nice for this blog !!! If you need Dell printer any technical problems dial toll free number +1-800-956-0247. Visit Website:- http://www.printerfixit365.com/dell-printer-support.html

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

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

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

    ReplyDelete

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