Make Blogger Blogs Available For Print Plus Print Icon For Posts




| 6 comments

How to add a 'Print This Page' icon to your blog posts.In this post we will see how to make your blog posts available to be printed by readers.No matter what topic your blog covers it is a good idea to offer the option to print the posts.We will be adding some code to your template that will make the posts on your blog 'Print Friendly'.Basically readers can print the important information on the page and not the entire screen.I also have a print icon you can add to your posts that can be clicked to get the printing process started.

Update - I have recently added a post showing Print Friendly And PDF Buttons For Your Blog Posts.

Icon Preview

This is the icon you will be adding :

How to add a 'Print This Page' icon to your blog.

Steps To Make Your Posts Available To print

Adding The Print Page Code

1.Click Layout-->Edit html for your blog 
(Tick the 'Expand Widget Templates' box)

2.Find the following piece of code in your blogs html :


</head>


3.Add the code below Directly Before </head>


<style type="text/css" media="print">
#noprint {display: none;}
// Hide unwanted elements
body {background:fff; color:000;}
// Black text on White background
a {text-decoration: underline; color:00f;}
//Underline Hyperlinks in blue
}
</style>

Add The Print Icon

1. Now Find this piece of code in your blogs html :


<data:post.body/>


2.Add the following piece of code Directly Below <data:post.body/>


<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><br/><center><a href='javascript:window.print()'><img src='http://4.bp.blogspot.com/-sDWF6NT0Pdw/TXeh_SjVvEI/AAAAAAAAC98/VYe73Fl-MGo/s320/print-this-page.png'/></a></center>

I think the image i have used as the icon is perfect but if you want to use a different image replace the image code with your image :

http://4.bp.blogspot.com/-sDWF6NT0Pdw/TXeh_SjVvEI/AAAAAAAAC98/VYe73Fl-MGo/s320/print-this-page.png

Now click save and your Blog is ready to print with a cool new button.Drop your comments, views and questions below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

6 comments:

  1. I'm hoping this will be the solution I'm looking for... I'm using the latest wordpress, and I can't find this line: *data:post.body/>
    Thaks!

    ReplyDelete
  2. Hi Samuel,

    Are you trying to add this to a Wordpress hosted blog ? Or a Wordpress converted template on Blogger ?

    This tutorial is for Blogger only im afraid.

    You could find a add-on for this in the Wordpress add-on gallery.

    Paul.

    ReplyDelete
  3. I'm using Blogger and don't see the two lines of code you say to find. HELP! Thanks!

    ReplyDelete
  4. Same, cannot find those exact two lines of code...

    ReplyDelete
  5. it works on me, this trick is good...but, it print half of the whole blog, and it not print the post only...please, repair it again...and if i think, it will be good and cool if it can print the post only, isn't it?

    ReplyDelete
    Replies
    1. ARI you may have seen the link at the top of the post to a tutorial on a Print Friendly button.I would suggest you try that as it has more features..

      Delete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us