How to make your Blogger blog printer friendly?

Do you maintain a Blogger blog and struggling to make it look professional and feel premium? Well, it's not just the blogger template that matters, but the features and ease of use offered to the readers are the real factors among all other things. Popular blogs have always something new to offer and along with the awesome content published by them, some features impresses a lot.

Today, we are going to discuss about making your Blogger blog printer friendly. As you might have already noticed, regular non-optimized blog often results in a cluttered layout when you print any page. This is quite annoying as it results in wastage of paper and spoils the blog's branding.

For example, you may print preview this page from the Desire Mag Premium blogger template and see for yourself what we are trying to explain. So, how is this actually done?

Well, it is very simple and you do not need to play with lot of codings, javascripts etc. A simple media query does it all and you can get rid of any distracting element from the print page.

@media print { /* declaring the css media query */
#sidebar, 
#footer,
#comments, 
#nav {display: none!important;} /* removing unnecessary elements */
#wrapper, 
#content {width: 100%!important;} /* make content fit the page width */
.entry:after{
display: block;
content: "Copyright Notice: Unauthorized use and/or duplication of this material without express and written permission from this blogs author and/or owner is strictly prohibited.";
margin-top: 30px;
line-height: 21px!important;
font-family: 'Droid Serif','Georgia','Serif'!important;
font-size: 14px!important;
color: black!important;
border-top: 1px dotted #555;
padding-top: 8px;
text-align: center;
padding-bottom: 10px}
}  /* css media query ends */

The above CSS codes are just a sample of how a blogger blog can be made printer friendly. The actual CSS will vary with each blog depending on its structure and definitions used.

How to implement?

While the use of print media query is applicable for all platforms, Blogger users may place the above media queries in Edit HTML mode just above </b:skin> or otherwise go to Templates ► [Customize] and then [Advanced] ► [Add CSS] and paste the codes in the box preferably at bottom..

Now, let us explain to you what we have done with those code as show above. The concept is as simple as shown below but requires the knowledge of CSS to execute.

@media print {
Place your CSS codes here...
}

In other words, @media print{} allows you to define a separate stylesheet for your blog which is also called the 'Print CSS'. Here, you can reset the width of the content wrapper, hide all unwanted <div></div> such as for Sidebar, Footer, Comment, Share buttons, Header, Navigation Menu etc. and also add a footer note with QR Code as shown in line no.8-21 in the above code box.

The Print CSS will be effective only for the Print version of the page and as such you can easily target what to display and what not to within the print page. If you want to add a QR Code at bottom of the page, then you may consider to add the following line (refer line no.2-8) below:-

@media print {
body:after{
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://your-blog.blogspot.in//&choe=UTF-8);
padding: 3px 5px;
display: block;
text-align: center;
margin: 0 auto;}
Place your CSS codes here ...
}

A lot of references are also available when you search about CSS3 Media Queries in search engines. The compatibility of these media queries is decent in all widely used browsers. A snapshot of the same can be seen below which indicates compatibility in both Desktops & Mobile browsers.


We hope this article would be useful for all the Blogger users and would like to invite your feedback on it. Do comment below if you have any query related to the use of Print Media Query.