How to Add a Print it Button to Your Blogger Blog

Advertisements
Allowing your users to print your blog posts with just a single click is something that is pretty cool. On the other hand, almost all browsers provide the flexibility to print a web page by just going to “File” and “Print”. Different people have different choices and different people like to have a print feature on their blog posts for different reasons. You may just like to add a continent way. When users can print your posts with just one click then why they should be doing some complicated processes? In this article, we will show you how to add a quick print button to your Blogger blog.

The First thing you will be doing is to login 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>

Now to give your button a beautiful touch, you need to customize it with a bit of CSS. You can create any kind of image using any popular photo editing or deigning tool Like Photoshop and can simply apply the modest 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="http://2.bp.blogspot.com/-kT9UBjBGSMI/UlyIVJP1tQI/AAAAAAAAC6o/flI31udqZ5c/s1600/print_button.jpg" /></a></div>

Congratulations: You have successfully learned how to add print it button in blogger blog. Not only that, but you can also stylize it according to your desire needs. You can also preview your posts to see everything is working in an order or not.   

We hope this tutorial has facilitated to understand how to add print it button in blogger. What are your judgments about adding a Print button to your blog? Does it is value to use these buttons or it is just waste of space? Let us know what you think about it.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

17 comments

June 15, 2013 at 10:51 PM

Not working :(

Editorial Team MOD
June 16, 2013 at 2:51 AM

What kind of error you are facing?

July 5, 2013 at 8:24 PM

so that javascript for print function, are there any javascript to bookmark function ?

August 21, 2013 at 3:07 AM

Good trick. Easly but very elegant guys... :)

August 28, 2013 at 3:31 PM

I still don't see a print button show up on the post or the blog page. I tried this with Print Friendly too and no go.

October 9, 2013 at 12:59 AM

Can you show us an example? I see you don't have a print button on your blog.

October 9, 2013 at 1:15 AM

When I hit control-P on this blog post I get a jumble of header and sidebar items and not just the blog post. That's why I'm looking for a button. I will try your idea.

Also, there is no image available in the "style" example that you gave us.

October 9, 2013 at 8:03 AM

Same here. I followed the instructions but I don't see any changes in my blogger layout.

Editorial Team MOD
October 14, 2013 at 5:14 PM

The tutorial is updated please retry. Sorry for the bug

Editorial Team MOD
October 14, 2013 at 5:15 PM

We have updated the tutorial, now its works fine. Just to give a test run go to Blogger >> Add new Post >> Revert to HTML VIEW >> And paste this code there

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

Now HIT Preview and See it works quite well.

January 29, 2014 at 11:38 AM

Hi!

I can't find the line anywhere in my html settings, can you give me an idea of where it is? I have found other lines with "post" and others with "footer" in them, but never in the order you've given. Would it be different in some cases?

Thanks!

March 19, 2014 at 10:19 AM

Not Working ...

March 19, 2014 at 10:21 AM

Sorry it's working now ... Thanks

Editorial Team MOD
March 20, 2014 at 9:11 AM

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

Editorial Team MOD
March 20, 2014 at 9:11 AM

Try this code!

November 9, 2014 at 7:37 AM

thnks, work!

February 5, 2015 at 8:23 PM

Thanks Brother, It's work for me, also i can customize this text -> "Print this Article"

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.