How to add "Save page as PDF" button in Blogger post?

How to add 'save As Pdf Button' in each blogger post of your blogger so as the readers can save your post in pdf format which they like. 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.

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:
Use the generated Javascript to add a default button
Customize the script to add a text link or the button of your choice.

The default button looks like this as shown in my blog post body:

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:

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: (More Easy Process)

By far the simplest option to enable your posts to be saved as PDF files is to use Web2PDF’s JavaScript generator. This will generate the correct JavaScript code to add to your template and uses the default button pictured above.

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:

Copy the JavaScript code generated by the wizard to your clipboard (or paste into a simple text file for later use).

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 highlighted tag in your Blogger template’s mark-up code:

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.

Another alternative

Paste the Web2PDF JavaScript code in an HTML/JavaScript widget in your sidebar. This enables the button to operate in the same manner, though your readers may not find the button so easy to access. If you’re content editing your blog’s HTML code you could play with the location of your button in different areas of your template.

How to add a customized button or text link for saving Blogger posts to PDF?

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.

This can be found when you generate the JavaScript for a default button: take a look in the code to find the long reference which consists of letters and numbers, like this (highlighted in bold):

<!%u2013 START: PDF Online Script %u2013>
<script type=%u201Dtext/javascript%u201D>
var authorId = %u201CC39A0A6A-25E7-4CEF-80923-3E490B33A4B4%u201C;
var pageOrientation = %u201C0%u2033;
var topMargin = %u201C0.5%u2033;
var bottomMargin = %u201C0.5%u2033;
var leftMargin = %u201C0.5%u2033;
var rightMargin = %u201C0.5%u2033;
</script>
<script type=%u201Dtext/javascript%u201D src=%u201Dhttp://web2.pdfonline.com/pdfonline/pdfonline.js%u201D>
</script>
<!%u2013 END: PDF Online Script %u2013>

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) with your unique reference number:

<a expr:href=%u2019&quot;http://savepageaspdf.pdfonline.com/pdfonline/pdfonline.asp?cURL=&quot; data:post.url &quot;&amp;author_id=your-unique-id&quot; &quot;&amp;page=0&quot; &quot;&amp;top=0.5&quot; &quot;&amp;bottom=0.5&quot; &quot;&amp;left=1.5&quot; &quot;&amp;right=1.5&quot;%u2019 target=%u2019_blank%u2019>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.

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.