How to Add a Print Button in Blogger

The most amazing feature of blogger is that you have millions ways to customize your blog for the perfect look. You can do whatever you want with some simple lines of coding. Today we will learn how to add print button in blogger.

Although nowadays all modern browsers like Firefox, Chrome, Opera or Internet Explorer provide the flexibility to print a web page by going to “Print” in their "Options" or "File" menu or by pressing "CTRL+P", allowing users to print blog posts with just a single click is something that is pretty cool. When users can print blog posts with just one click then why they should be doing some complicated processes? In this article, we will learn how to add a print button in blogger.

The First thing you have to do is to log into your Blogger Dashboard. Now After logging in, go to your blog >> Template >> Edit HTML >> Search for <div class='post-footer'> and just above it paste the following code. Once everything is done, press “Save Template” button to conclude the process.

<div style="float: left; padding-left: 10px;">
<a href="javascript:window.print()" rel="nofollow">Print this Article</a></div>

But, it 's a very simple text button. I think you will like some customization too. To give your button a beautiful touch, you need to edit your blogger template with a bit of CSS. You can create any kind of image using any popular photo editing or deigning tool Like Photoshop (or you can simply download a copyright free image from Google too!) and apply CSS to make it work. Here is a small example of how you can stylize your print it button.

<div style="float: left; padding-left: 10px;">
<a href="javascript:window.print()" rel="nofollow"><img src="https://lh4.googleusercontent.com/-ilAK0t4_uCc/VDSPVHyZUGI/AAAAAAAAEys/iE6vT4P_9kI/w85-h24-no/printButton.gif" /></a></div>

Now, lets see what we have done in Business Verdict. You can see that we have placed our print button right after the time stamp.

How to add a print button in blogger

For this print button, we actually have used the wide icon gallery of the popular "Font-Awesome" font. What we have done is that we have embedded the font in the blogger template and placed the icon in the right place and Baam! It's done!!
So first put this code before  <b:skin> (To find <b:skin>, press CTRL+F and paste <b:skin> in the search box and hit Enter).

<link href='http://weloveiconfonts.com/api/?family=fontawesome' rel='stylesheet'/>

And then paste the following code wherever you want the print button to appear.

<a href='javascript:window.print()' rel='nofollow'><i class='fontawesome-print'/></a>

That's it. Now you have learned how to add print button in blogger. By the way, what do you think about the print button in your blog? Is it really helpful for the blog users or it is just a waste of space? Let us know.

Check out our other blogger tutorials.

Happy coding! Happy blogging!!