Make Blogger Blogs Available For Print Plus Print Icon For 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 :

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2kQvSkN_wlQFDpbPuYf9e7bm-53xJwZV5kRKRUoPOrpK6WSxZ7fZvTIKL9nx2y28a3damYJq21nbQ22FQTbRKcYthPEJLuBNmZHwsytsOU-drKmOGPy1mz057BP2ot35sTQjBxt-7-HX/s1600/best+blogger+tips.png'/></a><br/><center><a href='javascript:window.print()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmvPxCe-x2iDSCs2X-wxUO8kCOy9w7qtePhQJgS9LNrViDfsuoiHk8233ylwlOXalen4_LuRHpEw7QzNBZnyW0KXP5NQnoXmo7x3b0Awum6fX3z5RelLdCbldCQbW-caElak1IFXvBVpdc/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 :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmvPxCe-x2iDSCs2X-wxUO8kCOy9w7qtePhQJgS9LNrViDfsuoiHk8233ylwlOXalen4_LuRHpEw7QzNBZnyW0KXP5NQnoXmo7x3b0Awum6fX3z5RelLdCbldCQbW-caElak1IFXvBVpdc/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.