SMSCreate print friendly PDF for your website in 3 steps
Portable Document Format (PDF) is the most common and widely used format for exchange of documents, newsletters .etc. This article demonstrates how to create online print friendly (optmized, without the hustle & bustle of sidebars, ads .etc) PDF for your website (Blogger used in e.g.)
Step 1: Stylesheet:- Add the following CSS code in the <HEAD> section. [CSS details]
Step 2: Use the above stylesheet to hide/display sections:- Go to Template -> Edit HTML tab (Do not expand template widgets). Sections you want to hide while printing, add them to class 'noprint'. Sections you want to show only in print mode, put them in class 'print'. And the rest will be shown in both modes.
e.g. To hide sidebar use,
<b:section class='sidebar noprint' id='sidebar' preferred='yes'>
Now, Take another example where you want to show/hide selective widgets in 'main-wrapper'.
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Feed2' locked='false' title='Recent Articles' type='Feed'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
say, you want to hide 'Feed2' in print mode, display 'Blog1' in both modes and display 'HTML3' only in print mode, change the above code to following:-
<div id='main-wrapper'>
<b:section class='main noprint' id='main1' showaddelement='no'>
<b:widget id='Feed2' locked='false' title='Recent Articles' type='Feed'/>
</b:section>
<b:section class='main' id='main2' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<b:section class='main print' id='main3' showaddelement='no'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
Note the differences in bold & red color. Save the template.
Expand widget template, and embed any custom code you have included within <div> </div> or <p> </p> and put them in appropriate class i.e. print or noprint. You can put post-footer, comments-block, post-footer-line post-footer-line-1 .etc. in noprint class to save both page & ink (if printed on paper later).
Tip: Do print preview for cross check.
Step 3: Print PDF button:- Sign up at Web2PDF Online and get the javascript code or use the following code
replace XXXX with your author_id and modify values of left, right, top & bottom margin as per your requirement.
Now, for a demo, check the 'print PDF button' at the end of each post on this blog.
Currently, Web2PDF supports only English language and has report feature that shows statistics of downloaded PDFs.
Tip: If your report shows large number of downloads, you can monetize this medium too by printing custom made text ads in light shades in header, footer or sidebar area. Now, US based publishers having a valid SSN may apply for Yahoo Ads for Adobe PDF program.
Suggested Reading:-
So, save trees & print as PDF.
Related Articles