Adding Print Button To Blogger Posts

Valid until 31 January 2015 (unless noted)

Sometimes we found some websites with "print button" or "print this page" option just after the article in website page. You can also add this feature to your blogger / blogspot blog. Although might be not essential but it is not a bad idea to add this feature. So lets try to add print button to blogger blog.

Steps :

1. Log in to your blogger account
2. Go to Layout - Edit HTML - click (Tick) Expand Widget Templates
3. Copy below code and paste it precisely 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>

4. Find (Ctrl-F) this tag : <p><data:post.body/></p>

5. Copy and paste below code just after <p><data:post.body/></p>

<a href='javascript:window.print()'><img border='0' src='http://i196.photobucket.com/albums/aa54/angga_ugm/printButton1-1.gif'/> Print This</a>

Changing the print button
Just change the image's URL (green color) with any image's url you want for print button
Example :

http://i196.photobucket.com/albums/aa54/angga_ugm/printButton1-1.gif


http://i196.photobucket.com/albums/aa54/angga_ugm/printButton1.png


http://i196.photobucket.com/albums/aa54/angga_ugm/printButton2.gif


http://i196.photobucket.com/albums/aa54/angga_ugm/pc_01.gif


http://i196.photobucket.com/albums/aa54/angga_ugm/pc_02.gif


http://i196.photobucket.com/albums/aa54/angga_ugm/pc_06.gif


http://i196.photobucket.com/albums/aa54/angga_ugm/pc_07.gif


http://i196.photobucket.com/albums/aa54/angga_ugm/pc_22.gif


http://i196.photobucket.com/albums/aa54/angga_ugm/pc_24.gif


http://i196.photobucket.com/albums/aa54/angga_ugm/pc_25.gif


http://i196.photobucket.com/albums/aa54/angga_ugm/print_icon.jpg