How to Add "Save to PDF" : Blogger Hack

|

English Version Article

Table of Content :

1. Ways to Convert Web Page to PDF
   
2. The Javascript
3. Understanding the Javascript
4. How to Add PDF Button
   
   • Choose the Button mode
   • Choose the Link mode
   • Choose the Custom Image mode

Artikel Versi Bahasa Indonesia

Daftar isi :

1. Langkah Mengubah Halaman Web ke PDF
   
2. Javascript
3. Memahami Javascript
4. Cara menambah PDF Button
   
   • Memilih Button
   • Memilih Link
   • Memilih Custom Image

DindingCoret PDF Version

The image above is Dinding-Coret's homepage look in PDF, the file size is about 146 kb. You can download the PDF or read it at Google Docs. Easy to convert the web page and no skill is needed, just click the convert button then it will be ready in a second.

Web2PDFConvert.com provide this service for your reader so they can read their favorite web anywhere although offline.

There are 3 ways to convert web page to PDF:

1. With Browser Add On. It is easy when online from a computer to click the Add On, anyway it is hard to do when your readers come from mobile phone browser.
2. Sending E-mail. Send URL of page to submit@web2pdfconvert.com and your readers get PDF back. Actually I'm not sure that this is a good method to convert, its take a long way.
3. Blogger Hack : Add Convert to PDF Button into your post. Yeah! This is what I mean! Let your visitors save your web site or blog to PDF file by single click.

The Javascript :

To add "Save to PDF" button use Javascript code, and this is the source code :

<script type="text/javascript">
var
pdfbuttontitle = 'Save web page to PDF free with www.web2pdfconvert.com';
if (typeof (pdfbuttonlabel) == 'undefined') {
pdfbuttonlabel = 'Save page as PDF';
}
if (typeof (pdfbuttonstyle) == 'undefined') {
pdfbuttonstyle = 'button'
}
document.write('<style type="text/css">.save_as_pdf {display:inline-block; width:128px; height:26px; background: url(http://www.web2pdfconvert.com/images/save-as-pdf-blank.gif) no-repeat; border-style:none 0px;text-align:center;}');
document.write('.save_as_pdf a { display:inline-block; width:115px; height:20px; line-height:1.4em; padding-left:17px; padding-top:6px; color:#000000; text-decoration:none; font-size:11px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; }');
document.write('.save_as_pdf a:hover { text-decoration:none; color:#000000; }');
document.write('.save_as_pdf a:link { text-decoration:none; color:#000000; }');
document.write('</style>');
if (pdfbuttonstyle == 'link') {
document.write('<a href="javascript:savePageAsPDF()" title="' + pdfbuttontitle + '">' + pdfbuttonlabel + '</a>');
}
else
if (pdfbuttonstyle == 'custimg') {
document.write('<a href="javascript:savePageAsPDF()" title="' + pdfbuttontitle + '"><img align="absmiddle" alt="' + pdfbuttontitle + '" border="0" src="' + custimg + '" /></a>');
}
else {
document.write('<span class="save_as_pdf"><a href="javascript:savePageAsPDF()" title="' + pdfbuttontitle + '">' + pdfbuttonlabel + '</a></span>');
}
if (title == null) {
var title = escape(document.title);
}
if (id != null) {
var userid = '&id=' + id;
}
function savePageAsPDF() {
var pURL = "http://www.web2pdfconvert.com/convert.aspx?cURL=" + escape(document.location.href) + "&title=" + title+ userid + "&ref=web";
window.open(pURL);
}
</script>

Understanding the Javascript :

When we are working with a code, it is always better to know the function so it will be easy to customize if you want different appearance. Be "different" from the other! =]

var

pdfbuttontitle = 'Save web page to PDF free with www.web2pdfconvert.com';

Var means variable. Variables are like storage units. You can create variables to hold values.
The variable is "pdfbuttontitle" and the value is "Save web page to PDF free with www.web2pdfconvert.com". The function to print the value as link title (when you hover to a link you will see some words with a yellow box under your cursor). Example Hover your mouse in this link

if (typeof (pdfbuttonlabel) == 'undefined') {
pdfbuttonlabel = 'Save page as PDF';
}
if (typeof (pdfbuttonstyle) == 'undefined') {
pdfbuttonstyle = 'button'
}

The code above shows you the default value from pdfbuttonlabel and pdfbuttonstyle.

document.write('<style type="text/css">.save_as_pdf {display:inline-block; width:128px; height:26px; background: url(http://www.web2pdfconvert.com/images/save-as-pdf-blank.gif) no-repeat; border-style:none 0px;text-align:center;}');
document.write('.save_as_pdf a { display:inline-block; width:115px; height:20px; line-height:1.4em; padding-left:17px; padding-top:6px; color:#000000; text-decoration:none; font-size:11px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; }');
document.write('.save_as_pdf a:hover { text-decoration:none; color:#000000; }');
document.write('.save_as_pdf a:link { text-decoration:none; color:#000000; }');
document.write('</style>');

This is the Cascading Style Sheet (CSS). If you want your button in a different style, here where you have to customize.

if (pdfbuttonstyle == 'link') {
document.write('<a href="javascript:savePageAsPDF()" title="' + pdfbuttontitle + '">' + pdfbuttonlabel + '</a>');
}
else
if (pdfbuttonstyle == 'custimg') {
document.write('<a href="javascript:savePageAsPDF()" title="' + pdfbuttontitle + '"><img align="absmiddle" alt="' + pdfbuttontitle + '" border="0" src="' + custimg + '" /></a>');
}
else {
document.write('<span class="save_as_pdf"><a href="javascript:savePageAsPDF()" title="' + pdfbuttontitle + '">' + pdfbuttonlabel + '</a></span>');
}

The code tells you can choose link, then a text will appears "Save page as PDF", or you can choose to upload a custom image else a button (customize the style with CSS).

How to Add PDF Button :

When you are done with customizing the javascript, then upload it on your host or maybe you can try some free hosting service.

Login to your Blogger account, go to DESIGN > EDIT HTML.
Remember, ALWAYS DOWNLOAD your existing template before do editing your template.
Check the check box (Expand Widget Templates).

Find this code:

<data:post.body/>

The data:post.body code will call your article, it means if you want the button appears above your article add the button code above the data:post.body code. Want appears below the article? Simply, just add the button code after data:post.body.

Choose the Button mode :

To enable button mode, use this code:

<script type="text/javascript">
var
pdfbuttonlabel="Save page as PDF" <--------default, just change with your own word =] (do not copy, this is comment)

</script>
<script src="http://YOURHOSTING.com/pdfbutton.js" type="text/javascript"></script>

Choose the Link mode :

<script type="text/javascript">
var
pdfbuttonstyle="link" <--------choose the link button (do not copy, this is comment)
pdfbuttonlabel="Save page as PDF" <--------default, just change with your own word =] (do not copy, this is comment)

</script>
<script src="http://YOURHOSTING.com/pdfbutton.js" type="text/javascript"></script>

Choose the Custom Image mode :

<script type="text/javascript">
var
pdfbuttonstyle="custimg"
custimg="http://URL to your custom image button" <--------your image path (do not copy, this is comment)

</script>
<script src="http://YOURHOSTING.com/pdfbutton.js" type="text/javascript"></script>

All Default : change the script source (script src="http://YOURHOSTING.com/pdfbutton.js") with the default javascript source at http://www.web2pdfconvert.com/pdfbutton.js

If you have any trouble with this hack, do not hesitate to asking in the comment box =]

DindingCoret PDF Version

Gambar diatas adalah halaman utama Dinding Coret dalam bentuk PDF, besar filenya sekitar 146 kb. Sobat dapat mendownload file PDF atau langsung membacanya (secara online) melalui Google Docs. Tanpa perlu keahlian programer sobat juga bisa membuat halaman blog atau web sobat menjadi PDF, hanya dengan sekali klik aja!

Web2PDFConvert.com menyediakan layanan ini sehingga pembaca setia blog sobat dapat membaca artikel favoritnya dimanapun tanpa harus online!

Ada 3 langkah untuk mengubah halaman web ke PDF :

1. Dengan Plugin Browser. Mudah dilakukan jika pembaca web sobat online menggunakan komputer untuk mengakses plugin, tapi gimana kalau online dengan handphone? Tidak mungkin untuk dilakukan. Lagipula tidak semua orang mempunyai plugin ini pada browsernya.
2. Dengan mengirimkan email. Kirimkan email ke submit@web2pdfconvert.com yang berisikan pesan alamat URL dari webpage yang ingin sobat ubah ke dalam format PDF. Secara pribadi cara ini engga asyik. Kelamaan...
3. Blogger Hack : Menambahkan widget pengubah halaman web ke PDF. Yay! Ini yang asyik! Biarkan pembaca blog sobat mengubah artikel yang mereka baca dengan hanya sebuah klik!

Javascript :

Untuk menambahkan button "Simpan ke PDF" dengan menggunakan Javascript dan ini adalah kodenya :

<script type="text/javascript">
var
pdfbuttontitle = 'Save web page to PDF free with www.web2pdfconvert.com';
if (typeof (pdfbuttonlabel) == 'undefined') {
pdfbuttonlabel = 'Save page as PDF';
}
if (typeof (pdfbuttonstyle) == 'undefined') {
pdfbuttonstyle = 'button'
}
document.write('<style type="text/css">.save_as_pdf {display:inline-block; width:128px; height:26px; background: url(http://www.web2pdfconvert.com/images/save-as-pdf-blank.gif) no-repeat; border-style:none 0px;text-align:center;}');
document.write('.save_as_pdf a { display:inline-block; width:115px; height:20px; line-height:1.4em; padding-left:17px; padding-top:6px; color:#000000; text-decoration:none; font-size:11px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; }');
document.write('.save_as_pdf a:hover { text-decoration:none; color:#000000; }');
document.write('.save_as_pdf a:link { text-decoration:none; color:#000000; }');
document.write('</style>');
if (pdfbuttonstyle == 'link') {
document.write('<a href="javascript:savePageAsPDF()" title="' + pdfbuttontitle + '">' + pdfbuttonlabel + '</a>');
}
else
if (pdfbuttonstyle == 'custimg') {
document.write('<a href="javascript:savePageAsPDF()" title="' + pdfbuttontitle + '"><img align="absmiddle" alt="' + pdfbuttontitle + '" border="0" src="' + custimg + '" /></a>');
}
else {
document.write('<span class="save_as_pdf"><a href="javascript:savePageAsPDF()" title="' + pdfbuttontitle + '">' + pdfbuttonlabel + '</a></span>');
}
if (title == null) {
var title = escape(document.title);
}
if (id != null) {
var userid = '&id=' + id;
}
function savePageAsPDF() {
var pURL = "http://www.web2pdfconvert.com/convert.aspx?cURL=" + escape(document.location.href) + "&title=" + title+ userid + "&ref=web";
window.open(pURL);
}
</script>

Memahami Javascript :

Saat sobat bekerja dengan Javascript, akan lebih baik jika sobat memahami fungsinya sehingga akan mudah untuk melakukan kustomisasi kalau sobat ingin tampil berbeda. Tampilah dengan gaya sobat sendiri! =]

var

pdfbuttontitle = 'Save web page to PDF free with www.web2pdfconvert.com';

Var berarti variabel. Variabel berfungsi seperti penyimpan fungsi. Sobat dapat membuat variabel agar mengunci sebauh nilai.
Variabelnya adalah "pdfbuttontitle" dan nilainya adalah "Save web page to PDF free with www.web2pdfconvert.com". Fungsinya untuk mencetak nilai sebagai judul dari sebuah link (judul link akan muncul saat sobat mengarahkan kursor ke sebuah link). Contohnya : Arahkan dan tahan mouse sobat di link ini.

if (typeof (pdfbuttonlabel) == 'undefined') {
pdfbuttonlabel = 'Save page as PDF';
}
if (typeof (pdfbuttonstyle) == 'undefined') {
pdfbuttonstyle = 'button'
}

kode diatas menampilkan nilai asli dari pdfbuttonlabel dan pdfbuttonstyle.

document.write('<style type="text/css">.save_as_pdf {display:inline-block; width:128px; height:26px; background: url(http://www.web2pdfconvert.com/images/save-as-pdf-blank.gif) no-repeat; border-style:none 0px;text-align:center;}');
document.write('.save_as_pdf a { display:inline-block; width:115px; height:20px; line-height:1.4em; padding-left:17px; padding-top:6px; color:#000000; text-decoration:none; font-size:11px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; }');
document.write('.save_as_pdf a:hover { text-decoration:none; color:#000000; }');
document.write('.save_as_pdf a:link { text-decoration:none; color:#000000; }');
document.write('</style>');

Ini adalah CSS (Cascading Style Sheet) dimana sobat dapat mengutak-atik CSS ini untuk mendapatkan tampilan yang berbeda.

if (pdfbuttonstyle == 'link') {
document.write('<a href="javascript:savePageAsPDF()" title="' + pdfbuttontitle + '">' + pdfbuttonlabel + '</a>');
}
else
if (pdfbuttonstyle == 'custimg') {
document.write('<a href="javascript:savePageAsPDF()" title="' + pdfbuttontitle + '"><img align="absmiddle" alt="' + pdfbuttontitle + '" border="0" src="' + custimg + '" /></a>');
}
else {
document.write('<span class="save_as_pdf"><a href="javascript:savePageAsPDF()" title="' + pdfbuttontitle + '">' + pdfbuttonlabel + '</a></span>');
}

Kode diatas menerangkan bahwa sobat dapat memilih tampilan LINK, dengan kata-kata "Save page as PDF", atau upload gambar sendiri, atau BUTTON (yang dapat di utak-atik dengan CSS).

Cara menambah PDF Button :

Kalau sobat sudah selesai dengan utak-atik Javascript, kemuadian upload ke server sobat atau bisa juga ke hosting gratisan.

Login ke akun Blogger, pergi ke EDIT HTML Template.
Ingat, sebelum melakukan edit template selalu biasakan DOWNLOAD TEMPLATE, supaya jika terjadi error masih ada backup template.
Centang kotak dengan tulisan Expand Widget Templates.

Cari kode berikut:

<data:post.body/>

data:post.body akan memanggil artikel yang sobat tulis, artinya kalau sobat ingin PDF button tampil di atas artikel ya taruh kode diatas data:post.body sebaliknya kalau mau ada dibawah artikel ya taruh dibawahnya aja.

Memilih mode Button :

Untuk memilih bentuk button maka gunakan script ini :

<script type="text/javascript">
var
pdfbuttonlabel="Save page as PDF" <--------default, ganti aja tulisan dengan kata-kata sobat sendiri =] (Jangan copy tulisan ini)

</script>
<script src="http://YOURHOSTING.com/pdfbutton.js" type="text/javascript"></script>

Memilih mode tulisan LINK :

<script type="text/javascript">
var
pdfbuttonstyle="link" <--------memilih bentuk LINK (Jangan copy tulisan ini)
pdfbuttonlabel="Save page as PDF" <--------default, ganti aja tulisan dengan kata-kata sobat sendiri =] (Jangan copy tulisan ini)

</script>
<script src="http://YOURHOSTING.com/pdfbutton.js" type="text/javascript"></script>

Choose the Custom Image mode :

<script type="text/javascript">
var
pdfbuttonstyle="custimg"
custimg="http://URL to your custom image button" <--------alamat gambar yang akan ditampilkan (Jangan copy tulisan ini)

</script>
<script src="http://YOURHOSTING.com/pdfbutton.js" type="text/javascript"></script>

SEMUA STANDAR : ganti sumber script (script src="http://YOURHOSTING.com/pdfbutton.js") dengan sumber aslinya di http://www.web2pdfconvert.com/pdfbutton.js

Kalau sobat punya masalah dengan tutorial ini jangan sungkan untuk bertanya dikotak komentar =]

Share