How to add the PDF24 widget to your blog

Live-demo in sidebar on this site!
Click the next link to view an example pdf file created by this widget.

You may have already come across the website PDF24.org but was never able, like me, to locate the widget for turning blog posts into pdfs. It took me months, in reality, to locate this widget and once I did I still could not get a copy of it. Every webpage I went onto ended up at a dead end and there was no code available for this widget at all that I could find on the PDF24.org website. I finally resorted to copying the code from the "View Source" page on my web browser.

After having tested this widget it only sends emails with the attached pdf if you manually type in an email address. Copying and pasting an email address into the submit section fails to send the pdf, even though it says it has sent it. You simply do not receive that email. 

Below is the entire code for the widget. Do not alter it in any way except for the words typed in red. You can change those words to suit you own taste. But leave everything else alone. You do not need to add your blog's url anywhere in the code. This widget automatically detects your url, no matter where you place it on your blog. Therefore, you can have this widget on more than one blog, and each PDF24 widget will work separately from each other. So, if you have, for example, added this code to your blog titled "123.blogspot.com" (for example) as well as to your other blog, titled "abc.blogspot.com" (for example) you will have two separate widgets that work independantly of each other. If you type in an email address on the "123.blogspot,com" blog, the pdf that will be created and sent to the email address will only locate the posts on the "123.blogspot.com" blog. These two widgets (if you add the code below to two blogs) will not be able to detect each other or link to each other.

The widget's code (below) can either be added into a HTML/Javascript widget on Blogger or embedded directly into your template in the body section of your template.

Here is the complete code:

<!-- Start pdf24.org sidebar plugin --> 

<style type="text/css"> 

 .pdf24Plugin-sbp-box {  

background-image:url(http://pdf24-blogger-widget.googlecode.com/svn/tags/1.1/bg.gif);  

background-repeat: no-repeat;  

width:190px;  

height:125px;  

position:relative;  

margin: 0px 0 0 -11px;  

padding:4px;  

font-family: Verdana, Arial 

} 

.pdf24Plugin-sbp-title {  

position:absolute;  

left: 10px;  

top: 4px;  

text-align:left;  

width:110px;  

color:#fff;  

font-size: 14px;  

font-weight:bold 

} 

.pdf24Plugin-sbp-sendto {  

position:absolute;  

left: 10px;  

top: 71px; 

} 

.pdf24Plugin-sbp-sendto input {  

width: 169px; 

height: 17px;  

border:1px solid silver 

} 

.pdf24Plugin-sbp-submit {  

position:absolute;  

right: 15px;  

top: 100px; 

} 

.pdf24Plugin-sbp-submit input {  

background-color: #66A4DA;  

border:0px;  

border-left: 1px solid silver;  

border-bottom: 1px solid silver;  

color:#fff;  

font-weight:bold;  

padding:1px;  

cursor: pointer 

} 

.pdf24Plugin-sbp-backlink {  

position:absolute;  

left: 11px;  

top: 103px;  

font-size:11px; 

} 

</style> <script language="javascript" src="http://pdf24-blogger-widget.googlecode.com/svn/tags/1.1/script.js"></script> 

<div class="pdf24Plugin-sbp-box">

<div class="pdf24Plugin-sbp-title">Send articles as PDF to</div>

<form action="http://doc2pdf.pdf24.org/doc2pdf/blogger.php" target="pdf24PopWin" name="pdf24Form" method="POST" onsubmit="return pdf24_onSubmit(this);">  

<div class="pdf24Plugin-sbp-sendto"><input value="Type in your email address" onmousedown="this.value = &#39;&#39;;" name="sendEmailTo" type="text" /></div>

<div class="pdf24Plugin-sbp-submit"><input value="Send" onclick="pdf24_onSubmitBtnClick();" type="submit" /></div>

</form>

<div class="pdf24Plugin-sbp-backlink"><a href="http://en.pdf24.org" target="_blank" title="PDF | PDF Creator | PDF Converter">PDF Creator</a></div> 

</div> 

<!-- End pdf24.org sidebar plugin --> 

To use this widget go to the page you want created as a pdf (via a direct link or by using a blog archive or labels search) then simply type in your email address in the space provided, click on the send button and the pdf converter will display a pop up window. It then begins converting the article to a pdf then sends it straight to your email address. The PDF24 widget will only convert the post or page you want turned into a pdf. It WILL NOT ADD the sidebar, header, footer or other content to the pdf, just the post title and content itself or the page itself. This is the best widget around for converting your posts into pdfs, and believe me I've tried many of them! Disadvantage: This widget does not like any type of code, whether it be css, HTML or Javascript and it will not print the code. So avoid printing any posts that have code on it.