Follow Me:

Wednesday, August 27, 2014

Add Print Friendly Button to Blogger

Print Friendly Button to Blogger
I have been seen lot of blogs like entertainment, fashion, technology and cooking adding a print button to their site so that users can print articles in just one click. Adding the print button gives a lot of help to users, say cooking site to print recipes form the site and help users who don't regularly use internet.
Its a very simple and is created using HTML a Javascript code. To add this in you blog you need to find the </head> tag in your blogger template and add the code before it.
<script type='text/javascript'>
function printDiv(div) {
var newWin = window.open("", "printwin");
newWin.document.write(div.innerHTML);
newWin.print();
newWin.close();
}
</script>
After placing the script find for <div class='post-header'-line-1> and paste the below code before or after it as you wish you can even add the code anywhere in you template.
<div style='text-align: right;'><a href='javascript:;' onclick='printDiv(this.parentNode.parentNode);' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpBQ6bS_mJCgJqZq2TEldgWAqDYEEfjNeJfVFzyMUN26sJmZ3UuLFBCajXN4TcmuGlcAFWxTYB5wWx4XuEYq95bRanINiEtRci86yik0P6hSgEgOeyqzdvV7l5o-CKwH99QGMjgoOW1eo/s16/printer.png) left no-repeat; padding-left: 18px;'>Print</a></div>
You can change the print icon by removing the image and adding your own print mage.

No comments:

Post a Comment

Creative Commons License