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 :

how to add print button to blogger posts 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

how to add print button to blogger posts
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

how to add print button to blogger posts
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

how to add print button to blogger posts
http://i196.photobucket.com/albums/aa54/angga_ugm/print_icon.jpg

5 comments:

prafangga permana said...

pertamax....
mantap tips nya :))

lagibaca said...

makasih buat infonya yang sangat bermanfaat :D

dedy said...

oke, tips yang bagus mas. Tapi saya pke wordpress bs gak d terapkan d wordpress?

Lala said...

asyik...boleh nich dicoba. Thanks tutorialnya

Atap baja ringan said...

Tks ya, sgt membantu ane...

Post a Comment

Rules:
Comment must be in English, otherwise will be not listed.
Spam comment will be deleted, so don't waste your time for it.
Respect yourself, respect others.