One of the most interesting and useful Blogger hacks I’ve recently discovered is the ability to save Blogger posts to PDF. In my own blogs, I tend to write long posts and tutorials, so I feel it benefits my readers to save or print off these articles for later use. So after stumbling across Web2PDF Online, I immediately set to putting this free service to good use.
Web2PDF Online offers a free service for bloggers and web publishers which enables a button to be placed on pages of your site; readers of your site can then use this button to convert your blog pages to a PDF document and save it to their computer or print off for later use.
There are two main options for adding the Web2PDF button to your Blogger powered blog:
- Customize the script to add a text link or the button of your choice.
The default button looks like this:
Whereas the customized script can enable any icon, button or text link you choose.
In this post, I’ll explain both of these methods and how they can be applied to Blogger templates to enable readers to save your Blogger posts as PDF documents to their computer.
First, you’ll need to create a free account with Web2PDF Online
In order to use this free service, you will need to create a free account with Web2PDF Online. This takes only a few moments, and will generate your “User ID” which you would certainly need if customizing your own “Save to PDF” button.
To create your account, simply visit this page and fill in all nescessary details. You will need to include the URL of the blog you want to place the button in, to be able to use the API correctly.
Once you have completed registration, make a note of your username and password to be able to log in and generate your scripts.
Generate a default button (the easy option)
To generate this script, log in to Web2PDF Online; the first page you will encounter is the “Overview” page where you can set the options used to save your PDF and even preview how this will look by inputting the URL of pages in your blog:
Next, go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the “Expand widget templates” box. Then search for the following tag in your Blogger template’s mark-up code:
This tag is likely to be surrounded by <div> or <p> tags; we simply need to locate the line in which this is located.
Once you have found this line in your template, paste the code generated by Web2PDF Online on the line immediately after this tag, and save your template.
This will enable the “Save to PDF” button to appear directly after your Blogger posts on each page of your blog so readers can easily save your posts to their computer.
How to add a customized button or text link for saving Blogger posts to PDF
For me, this method was far more difficult to master since there are no working instructions available on the Web2PDF site applicable for Blogger templates. After reading through Pixobte’s tutorial, I was able to modify the suggested script and finally made this function correctly for the highly modified Blogger templates in which I have tested this code.
In order to add a customised button or text link for your Blog readers to save your posts to PDF files, you will need to use your unique Web2PDF reference.
<!– START: PDF Online Script –>
var authorId = “C39A0A6A-25E7-4CEF-80923-3E490B33A4B4“;
var pageOrientation = “0″;
var topMargin = “0.5″;
var bottomMargin = “0.5″;
var leftMargin = “0.5″;
var rightMargin = “0.5″;
<!– END: PDF Online Script –>
Copy this unique reference to your clipboard and then paste in a simple text file for later use. It is important that you use your own unique ID number, based on the website URL you added when registering with Web2PDF Online. ID’s which were generated for a different URL will not function correctly!
Once you have got your unique ID, you need to copy the following section of code, replacing “your-unique-id” (highlighted in bold red) with your unique reference number:
<a expr:href=’"http://savepageaspdf.pdfonline.com/pdfonline/pdfonline.asp?cURL=" + data:post.url + "&author_id=your-unique-id" + "&page=0" + "&top=0.5" + "&bottom=0.5" + "&left=1.5" + "&right=1.5"’ target=’_blank’>Save as PDF</a>
Paste this section of code (including your unique ID number) just below the line including the <data:post.body/>tag in your Blogger template as explained above.
This enables your readers to click on a text link to save your posts as PDF files to their computer, which will appear in your template like this:
To get a better idea of how this would appear in our template, take a look at Glamumous where this is implemented on each post page.
Those of you who would prefer to use a custom icon instead of the cumbersome default icon provided b Web2PDF, it is possible to add our image as a link instead of the text link.
To do this, you’ll need to upload the icon/buttom image you would like to use to an image host. Then replace “Save to PDF” in the code above (highlighted in bold blue) with the image tag referencing your image’s location, like this:
<a expr:href=’"http://savepageaspdf.pdfonline.com/pdfonline/pdfonline.asp?cURL=" + data:post.url + "&author_id=C39A0A6A-15E7-4CEF-8033-3E490B33A4B4" + "&page=0" + "&top=0.5" + "&bottom=0.5" + "&left=1.5" + "&right=1.5"’ target=’_blank’><img src=’http://lh6.ggpht.com/_xn2gmPb9TfM/SgwTsrG3VdI/AAAAAAAAEFU/1Apl6eOrRRc/pdf_alt_16x16.png’ /></a>
This will display a customized icon in place of the text link. You can take a look at this in action beneath my posts on Blogger Buster, like this:
I hope this tutorial has provided you with sufficient knowledge to be able to add your own “Save as PDF” buttons or text links to your Blogger powered blog. For those of you who write tutorials or otherwise length posts, this may well prove a useful means of enabling visitors to download your content for later use.
Please feel free to let me know of any other similar services you have encountered by leaving your comments below.