Blogs are full of valuable information. Readers always want to keep best and interesting blog posts with them. The only possible way is to take a print-out of that post. But the task is not as easy as it appears. You may have a harrowing time dealing with various elements present on a blog page. A blog page typically contains the text, sidebars, headings, advertisements etc. But you want to print the content only and all other things are meaningless for you. These unnecessary things create difficulties in printing.
An effective solution to this problem is to add a printer friendly hyperlink and clicking upon this hyperlink will take you to a more printer friendly blog page. This solution is not devoid of problems also. You have to move one step further with the same content before you can actually print it. Another problem is the creation of a duplicate content. Search engines don’t prefer duplication. You might also incur losses from advertisements, if people link most often to the print-friendly version rather than the original.
Here comes the helping hand from CSS. It offers the best solution for users and webmasters alike. There are various media types that can be allotted to every CSS document. The commonly used media types include ‘screen’ and ‘print’. The following code depicts their use:
<link href=”print.css” type=”text/css” rel=”stylesheet” media=”print” />
<link href=”screen.css” type=”text/css” rel=”stylesheet” media=”screen” />
You can specify the media rules inside one CSS document. But the best way is to divide them into individual documents. By doing this, you will have less worries about inherited styles. The reason is the browser is utilizing only the print.css document to style the blog page. . If you appropriately design your HTML to have its layout and content blocks controlled by the CSS document, you will be able to specify the ids and classes related to those blocks and choose which ones to show and hide. To hide a block, use the code below replacing the id or class with your own.
#nav { display:none; }
There is another alternative to turn your blog into a printer friendly and environment friendly website. Create a new CSS File (print.css) and add the following lines and see the effect.
body {font-family: arial,helvetica,sans; font-size: 13px; background:fff; color:000;}
// Black Text on White Background
a,a:visited,a:link {color:#000; text-decoration:none}
// Do no underline links
.noprint {display:none}
In the second step, open the HTML source of your main blog template and include everything other than the content (like the sidebars, ad blocks, header logo, footers, etc) inside the following tag.
<span class=”noprint”> ….. </span>
You are instructing the browser not to print anything that appears inside the above tag. In the last step, add the following line inside the <HEAD> tag of your blog template.
<link rel=”stylesheet” media=”handheld,print” href=”print.css” />
We have now come to an end. To see how this works, go to File->Print Preview. This technique is not just effective for printed version of your web pages but even for PDFs.
Tags: Facilitate Blog Printing
(3 votes, average: 4.33 out of 5)
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Beantworten