Printer Friendly in Blogger
Hello everybody!
Last week I worked in a new hack for Blogger, 
Printer friendly
In fact I haven't made nothing, only I adapted a existing hack to blogger.
Amit Argawal in his post "How to Enable Printer Friendly Pages in your Blog" show how to do this modification, but if you follow the instructions, you'll see that don't work.
Searching and keeping investigation about this function I've found a Stephen Chapman where in his post titled Print Button, I asked for help and he answered my question in the good way, Thank you Mr. Chapman!
Let's get to the point!!
First of all,
back up your Template (Dashboard -> Template -> Edit HTML -> Download full Template)Add the next code between <head></head> tags:
<style media='print' type='text/css'>
#navbar-iframe {display:none ; height:0px;visibility:hidden;}
.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>
This code define that all the object who have "noprint" style, will not appear in the Print post.
Now you have to select which part/s of your blog you don't want to print, such as header, sidebar, footer, comments...
When you find in your template the code of one part that you don't want print you have to enclose them with this code:
<span class="noprint">..</span>
One example is no print a image, so the code will look like this:
<span class='noprint'><img src='http://itm1980.googlepages.com/separacio2uo.jpg'/></span>
Do you understand? Good!
The fastest way to not print a big area in your blog (sidebar) is enclose the div elements
And the last step, is add the print button.
We have many style of this button:
Text button:
<a href="javascript:window.print()">Print Page</a>
Image button:
<a href='javascript:window.print()'><img border='0' src='http://img519.imageshack.us/img519/6389/printerzv7.png'/></a>
Find the place where you want to show the button (I recommend add this button in the comment section) and put the code.
Done!
I have to make special mention to JMiur, the blogger of Vagabundia that has helped me a lot to finish outlining these codes, Muchas gracias!
18 comment/s:
nice your topic i get it and success, great job man
Hi Budi,
Thank you for your comment I wish that works perfectly ;)
Seems to be OK except that you don't say in which file we have to copy the code. There is so many php files in WordPress !
Thanks
Hello Laurent,
This "hack" it's for blogger, I never said that is for wordpress ;)
If you've wordpress I'm sure that you can find a plug-in that works for it.
Searching 2 min I found in google a web site with one possible plugin, see this web site.
Unfortunately that does not work with the new blogger templates - but I found a workaround - see here
http://groups.google.com/group/blogger-help-customizing/browse_thread/thread/184b3f9905cd2f05/cd2746d3b33b8c03#cd2746d3b33b8c03
Hello Martin,
I'm sorry for you, but all the people who have tested this hack, has said that works :(
I'll see your blog and try to detect what's wrong ;)
This helped me a lot, the reason I made a blog was to make it like a journal for everyone to see, but I want to be able to print it out. This helped to remove the unwanted items, but when I print a post it only prints one page and cuts off the later half of the post. How do you add page breaks to fit the post to the margins of more than one page?
Hello Dean Family,
Thank you for you comment, I'm thinking how to do your question, how to add page breaks...
Check it the <span class="noprint">..</span> code are in the correct place, maybe some picture or block of code are inside.
Anyway I'll ask to my friends (how know more than me about html code) if it's possible add page breaks.
Hello Ignasi,
Sorry to disturb you but I'm not a geek. I haven't understand.
It's OK to add the code between head tags
But I haven't understand where to put < span class="noprint">..< /span>
I would like to print just the recipe, no sidebar. How should I do ?
Thanks a lot
Anne
Salut Papilles et Pupilles!
le code <span class="noprint"> </span> l faut le code situer avant et apres de tout le code que tu ne
veux pas imprimer
Pour example,en une image qui a ce code :
<img src='http://itm1980.googlepages.com
/separacio2uo.jpg'/>
tu auras que mettre ainsi:
<span class='noprint'><img src='http://itm1980.googlepages.com
/separacio2uo.jpg'/></span>
Si tu as besoin mois aide, je suis ici ;)
Muchas gracias. Merci Ignasi. Je vais essayer. I will try ! Indeed, it's just the sidebars I want not to print. In each post.
No problem!
If you only want to "hide" the sidebar when you want print, put
the <span class="noprint"> just before the <div id='sidebar-wrap'> and after, just in the end of the sidebar-wrap endins put </span>
Thks a lot but I still have a pb.
For example
< div id='linkbar-wrapper' >
< b:section class='linkbar' id='linkbar' maxwidgets='1' showaddelement='no' >
< b:widget id='LinkList1' locked='false' title='Linkbar' type='LinkList'/ >
< /b:section >
I try that :
< span class="noprint" >< div id='linkbar-wrapper' >< /span >
< b:section class='linkbar' id='linkbar' maxwidgets='1' showaddelement='no' >
< b:widget id='LinkList1' locked='false' title='Linkbar' type='LinkList'/ >
< /b:section >
< /div >
And i've got an xml error : The element type "div" must be terminated by the matching end-tag "
Sorry to disturb you like that
Hi Papilles,
Don't worry, you don't disturbs me ;)
One question, do you have some software like dreamweaver to manipulate html code? It'll be easier if you have one.
The problem with your code it's that you put < /span > in the wrong place.
The code start with:
< div id='linkbar-wrapper' >
so it's ends with < /div > that it's situated almost in the end of the template.
The easier way it's use a software that show where is each pace of this code.
If it's too much, send me your template at itm1980@gmail.com and I'll change the code. :)
Thank you so much. I'll sent you. I haven't dreamweaver.
Check your mail box, I sent you the new template :)
Thank you so much ! Muchas Gracias. I'm so happy !
You're welcome!
I wish I could help you :$
Post a Comment