How To Create Printer Friendly Webpages in Blogger Blog using CSS


Creating printer friendly webpages for your blogger blog will enable visitors or readers who have less time to read (and don't want to miss) your valuable and informative blog post print the page out for offline reading. This is another way by which visitors can read blog post online apart from "turning blog to ebook".


Creating printer friendly page for your blogger blog will enable you to add a "Print" button to your blog post pages so readers can print to read offline. Though some themes comes with "Print" widget but not all. A very good example is "SevidaThemes". Sevida theme is a cool theme that comes with a lot of features including ability to print posts to A4 Papers.

Therefore, if your blogger blog theme doesn't have "Print" widget now, you add it using then following steps below.


How To Get Started

Sign in to your Blogger Dashboard

In the left menu, click "Theme" >> "Edit HTML"

On the html editors page, use CTRL F to find this code : ]]></skin>

Paste below code right before ]]></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 OgbongeTechs (www.ogbongetechs.com) by Obalola Temidayo. This printer-friendly version is made available for your personal and non-commercial use only.";}
</style>

In the code above, a[href] is used to display 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 Theme. You can also customize the text to appear beneath the printed page.


Add the following code where you want the Print button to display in your blogger blog post.

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

I recommend you to place the "Print" button below post title in your blogger theme.. Search <data:post.body/> on the html theme editor page and place the code Above it (above all other codes added)

Now your "Print" button should start displaying below post title in your blogger blog. It makes reader who have less time to read your valuable and informative blog post easily print the page for offline reading.


Customization 

1. In order to make other element of the blog not to display on printed pages simply enclose them with the following code.

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

For instance, sidebars text, footer text, header text, and comments of your blog that would not be required by readers who is going to print your page into paper.

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

Instance, 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 OgbongeTechs (www.ogbongetechs.com) by Obalola Temidayo. This printer-friendly version is made available for your personal and non-commercial use only.</i></span>
</b:if>

3. Since we don’t want to display the above text on the printed page, include this CSS right above ]]></skin>
.yesprint{
display:none
}

Adding more CSS property to the codes first gave is to make your printed page more user friendly for readers.

For instance, i made the blog change its width to 100% by adding the css code right above ]]></skin> in my blogger theme.

.primarybpart{
width:100% !important;
}


Finally, this is where the tutorial on How To Create Printer Friendly Webpages in Blogger Blog using CSS ends. Now your blog reader who let have less time to read your updated blog post will now be able to print copy or copies of that same page.


Recommended : 

==> How To Convert Blog To PDF E-book To Read Offline





Subscribe To Our Newsletter
Follow Us On Twitter and Instagram

Comments