Print Your Post Body Only Without Sidebars, Header In Blogger

Hey guys, this is one of the features that i was looking for from couple of days and that is a print option for a particular blog post. Ther...

Hey guys, this is one of the features that i was looking for from couple of days and that is a print option for a particular blog post. There are many ways to print a page but those all print the entire page with all sidebars, headers etc, wasting your ink and making the post text smaller.

So by this way, your blog readers would be able to print your blog's post body only with a single click. You simply have to add few codes in your Edit HTML option. Have a look at the print sample, so that you know what we would end up with.

Click To Enlarge

Notice that it only prints the main post body. Few of my buttons are appearing as they are out of the side bar area. This feature is a good add to your blog luxurious ride for the readers :)

Lets get started.

Step 1:

Go to Dashboard >> Edit HTML and tick the check box. Oh and yes don't for get to download your template for backup purposes. Its always safe to have a backup :)

 Now search for the following code: (Ctrl + F)

</head>

 Once you have found it, place the following code just above it. This is the code by which we define which areas of our blog should be printed.

<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>

 Step 2:

Now search for the following code:

  <div class='post-header-line-1'/>

And paste the following code just below the above code.

 Type 1:

Print this post



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>Print this post</a>
</b:if>

Note: You can change the text by change the text, ie (Print this post)

 Type 2:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<form> <input type="button" value="Print This Post" onClick="window.print()" /> </form>
</b:if>

Note: Same here. You can change the button text by change the text, ie (Print This Post)
 
 The print button would appear as shown in the picture in the starting of the post. I recently applied this feature and it works pretty well. Hope that helped. Tell me what you think about this feature in the comment section below. I would love to hear you :)