This tutorial explains how to add a small print button below the post titles to print. This post explains two version of adding print button: “Using a custom designed print button” & “Using a third party print button(BEST)”.

How To Add Print Button To Only Print Blogger Post?

Printing can be important to people, who are lazy to read it online or in a hurry to read it right there. Not just reading it right there, but some readers prefer to keep the blog post as a reference. It is wise to give freedom to the readers by placing a nice print button on the post. We know that Blogger is known for its great customization techniques, but unfortunately there had been great challenges to designers to produce a code to print just the posts. Today, we are going to look at two versions of adding the print button: Custom Designed Print Button and the Third Party Print Button(Without Bugs). Printing is also a mode of taking backup for your blog posts in the form of hard copies.

You might also like:
1. Converting blog posts to pdf
2. Sending blog articles as pdf via E-Mail.

Lets starts discussing the 2 versions:

Click “Template” > Click “EDIT HTML

Step 2: Search(Ctrl+F) for:


Paste the below CSS before </head> :

#header-wrapper,#header,.header, #sidebar-wrapper,.sidebar, #footer-wrapper,#footer,.date-header,.comment-link,.comment-footer,#comments,#blog-pager,.feed-links, #backlinks-container, #navbar-iframe,.noprint {display: none;}.post,#content-wrapper,#main-wrapper,#main{width:100%}</style>

To hide more elements from your blog which are not required, please add all those element id or class names along with the above ones.

Finally, Save the template.

Adding the print button:(End of post or Below Post title)

Click “Template” > Click “EDIT HTML” > Click “Expand Widget Template“.

Step 2: Find(Ctrl+F) for:


ORJust before <data:post.body/> add the below code: |||||||||[This step will create the button below post title]

<span style='background: url(</b:if>

Once you are up with the button code. It would look something similar to the one shown below:


1. Prints only first page
Reason: If the site uses the CSS attributes float and overflow.
Fix: Change the values to none and auto respectively.
2. Prints many blank pages
Reason: If all the elements are not hidden properly.
Fix: Hide all the elements on your page individually.

Version 2: Adding a third party print button 

This version of the print button plugin is a better one because, it is powered by a third party vendor. Lets see how this can deliver things for us.

Step 1: Visit

Step 2: Choose Blogger/Blogspot from there.

Step 3: Choose your style.

Note: I would prefer you to go with the second option of obtaining the code and manually inserting it on to your Blog template. Reason: We can add the code below the title/below post or any other place in the post.
[If you are lazy or scared to do it manually go for the first option]

<b:if cond='data:blog.pageType == "index"'><a expr:href='data:post.url + "?pfstyle=wp"' style="margin-right:1em; color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="" alt="Print Friendly and PDF"/></a><b:else/><b:if cond='data:blog.pageType == "archive"'><a expr:href='data:post.url + "?pfstyle=wp"' style=" margin-right:1em; color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="" alt="Print Friendly and PDF"/></a><b:else/><script src="" type="text/javascript"></script><a href="" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="" alt="Print Friendly and PDF"/></a></b:if></b:if>

Insert the code before/after Step 5: Save the template.

You are done! The third party plugin is nice and can be used to print the post and as well take the PDF format of the post.

It can slow down the post pages a bit because the JavaScript and the icon images needs to be fetched away from your site. Otherwise, it is really nice.

Please let us know, what can be improved and your suggestions via comment section.Hope you enjoyed this tutorial. Thanks for reading this article. Catch you again with more useful tutorials and articles. Have a good day. Please take some time to subscribe to our RSS feeds.


About The Author

Karan Vyas is the founder at, a 19 year old student pursuing his B.Tech in ECE.He is passionate blogger,Web Developer having vast knowledge on reverse engineering,hacking,software developement.Apart from this he is involved in witchcraft black magic and hypnotism.

Leave a Reply

Your email address will not be published.