- CSS? Phillip at You've Been Haacked has a pretty cool "print" link on each post page of his blog that would seem to do the trick, by creating a new page & only pulling certain elements from the original. This works by opening a print dialog box, & having the box refer to a print preview page stylesheet. Would this work with blogger if the print-only stylesheet went in the template head?
- Javascript? Ben at Politics, Compassion and Justice is working on a .js version, in preliminary and backroom development, that looks a bit like this:
<a href="javascript:void(0);"All thoughts / ideas / plans / pre-formed notions for turning these into functioning blogger hacks are, as usual, most welcome.
onClick="openindex()">Print</a><SCRIPT
LANGUAGE="JavaScript">
function openindex()
{ var blogbody = <$BlogItemBody$>;
OpenWindow=window.open("", "newwin", "height=800,
width=1000,toolbar=yes,scrollbars="+scroll+",menubar=yes");
OpenWindow.document.write("<TITLE>Print Me</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#333>")
OpenWindow.document.write(blogbody)
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
self.name="main"
}
</SCRIPT>
Update: See Ben's CSS code to make this work. Great hack, Ben!
Update 4/12: Aditya offers another CSS method to make this work, using external stylesheets. If you've ever envied the Instapundit's stylesheet switcher (for various font sizes etc), Aditya points out that this hack could easily be extended to allow the application of multiple stylesheets to blogger content... So go ahead, give your Gran that 16 point font she's always wanted!
Filed in: blogger, blogtech, webtech, blogger-hacks,
]^23003]^23900]navy],](](]]]black],]3]1]2]3]1]1]4]1]2]3]1]1],](](]^23FFFff])])]Freshblog]Blogger^20Hacks^2C^20Categories^2C^20Tips^20^26^20Tricks],](],](](]^23900](](](]^23666](](](]^23900](],](](]75]20],](](]^23FFF])])]^23900]1.5]15],](](]^23999])])]^23900]^23CCC])])]^23900]30]^23003]^23003],](](]^23333](],](]^23003]^23039]^2306C],](](]^23CCC])])],](](]^23EEE])])],](](]^23CCC])])],](]^23006]^23666]15]3]25]20]^23003],](](],](],](](],](]^23003](](](],](](](],]black](](](],](](]black](](](](](],]^2336F]^23003](],](]Posted^20at^20^24TIME^20by^20^24AUTH.]20],](](]^23900])])]^23CCC])])]^23666]30]black]black],](](]^23333](],](]^23333]^23039]^2306C]Freshblog]]]Home]^24HOME]First^20Page]Email]^24EMAIL]Mail^20me^21]RSS]^24RSS]RSS^20Feed]Comments^20Feed]]Comment^20Feed^20]Archive]]]^24ARCHIVE]^20]]Freshtags]]]Horm])blog.horm.org]Hallucinations^20Of^20Reabsorbed^20Mind]Phorm])p.horm.org]Another^20Phormation]Etc]]]^3Cimg^20src^3D^22)psyc.horm.org/barimg/bar_psycho.png^22^20width^3D^2280^22^20height^3D^2215^22^20alt^3D^22PsycHo^3A^20Free^20Template^20Generator^22^20style^3D^22border^3A^200px^20solid^20black^22^20/^3E]^24PSYCHO]PsycHo^3A^20Free^20Template^20Generator]^3Cimg^20src^3D^22)psyc.horm.org/barimg/bar_firefox.png^22^20width^3D^2280^22^20height^3D^2215^22^20alt^3D^22Get^20FireFox^21^22^20style^3D^22border^3A^200px^20solid^20black^22^20/^3E])www.mozilla.org/products/firefox/]Get^20Firefox^21]^3Cimg^20src^3D^22)psyc.horm.org/barimg/bar_xhtml.png^22^20width^3D^2280^22^20height^3D^2215^22^20alt^3D^22XHTML^20Validator^22^20style^3D^22border^3A^200px^20solid^20black^22^20/^3E])validator.w3.org/check/referer]XHTML^20Validator^26^2361470^3BPsycHo}){kind=small}
The header, navbar, and sidebar are gone, but the text still doesn't take up the full screen (I set width to 100%; for main and content)
For Blog*Spot blogs that can't host an external print.css file, you can use ether a media="print" on your <style> tag, or wrap the rules you want to be for print in a @media print {} block.
#content {
margin-left:0;
float:none;
width:auto;
}
err... what...? :P
@media screen {}</style> <style type="text/css" media="print">
@media print {}</style> And it works great, now.
I just used <style type="text/css" media="all"> also media="screen" and media="print" (skip the strudel @)
Sorry for the many posts. The only other thing I did so futher customize it, was add the following to my print style (use span class=noprintout on the bottom of your post, for example):
/* http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/media_1.asp */
h1, h2, h3, h4, h5, h6 { page-break-after: avoid;
page-break-inside: avoid }
img { page-break-inside: avoid;
page-break-after: avoid; }
blockquote, table, pre { page-break-inside: avoid }
ul, ol, dl { page-break-before: avoid }
div#sidebar {
display: none;
}
DIV.adbanner {display: none;}
.noprintout
{
DISPLAY: none;
}
#b-navbar { height: 0px; visibility: hidden; display: none; }