Mengulas Misteri dan Blogging

Memasang Tombol Print dan PDF di Blog

Memasang Tombol Print dan PDF di Blog - Tombol print dan PDF ini biasanya berada di halaman postingan. Tombol ini berfungsi untuk memberikan fasilitas print dan tampilan PDF dari blog kita kepada pengunjung. Cara memasangnya di blog pun ternyata cukup mudah. Cara ini saya dapatkan dari artikel Kang +Adhy Suryadi yang berjudul Memodifikasi Tombol Print Dan PDF Dari Printfriendly. Memang, tombol ini berasal dari Printfriendly. Selain tampilannya yang keren, tombol ini juga sudah valid HTML5 dan CSS3.

Untuk melihat contohnya, silahkan lihat gambarnya di bawah ini.

Tombol Print dan PDF


Cara Pemasangan

Simpan CSS berikut di atas ]]></b:skin> atau </style>

.printfriendly{background:#ddd;border:1px solid #ccc;color:#555;text-decoration:none;padding:3px 5px 3px 0;font:12px Arial}
.printfriendly span.print{background:url(http://4.bp.blogspot.com/-mAHehSZvM9M/UrTyQ0kp6rI/AAAAAAAAar4/3KWs3Lzj9xQ/s1600/print.png) no-repeat;border:none;box-shadow:none;margin:3px 6px -3px;padding-left:20px}
.printfriendly span.pdf{background:url(http://1.bp.blogspot.com/-XScQHsbLaTU/UrTyQwBdjfI/AAAAAAAAar0/uxsmAfxYYqI/s1600/pdf_document.png) no-repeat;border:none;box-shadow:none;margin:3px 0 -3px;padding-left:20px}

Lalu, simpan kode pemanggilnya di daerah yang anda ingin letakkan tombolnya. Terserah anda. Saya beri contoh, ditaruh di daerah bawah postingan blog anda. Kode pemanggilnya adalah sebagai berikut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='printfriendly' href='http://www.printfriendly.com' onclick='window.print();return false;' title='Printer Friendly and PDF'><span class='print'>Print</span> <span class='pdf'>PDF</span></a>
</b:if>

Agar tombolnya bisa berfungsi dan bekerja, silahkan masukkan javascriptnya di atas </body>

<script type='text/javascript'>
var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'none';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;pf.async=true;document.getElementsByTagName('head')[0].appendChild(pf)})();
</script>

Pada javascript di atas, saya juga memberikan atribut async agar tidak terlalu membebani blog kita. Jadi, widget ini terbilang ringan dengan adanya atribut ini.

Anda bisa menambahkan margin sendiri pada CSS-nya sesuai keinginan anda jika letaknya belum sesuai atau tidak pas. Jika anda ingin seperti demo, yaitu letaknya di kanan, silahkan juga tambahkan float:right pada kelompok CSS print dan PDF yang paling atas.

Sekian. Terima kasih. Jika ada yang masih bingung, silahkan berkomentar di bawah.

Tag : CSS3, HTML5
11 Komentar untuk "Memasang Tombol Print dan PDF di Blog"

keren nih, cocok kayaknya buat blog saya. salam kenal gan http://altovart.blogspot.com

Iya gan. Widget ini sangat cocok gan. Agan juga bisa memodifikasinya biar lebih manteb blognya :D

dengan tombol print dan pdf ini maka akan semakin memanjakan visitor blog kita dengan pilihan mau langsung print atau save data dengan format pdf. patut dicoba gan

Makash bang, kebetlan lagi cari ini buat blogku.

thanks gan info dan tutorialnya...
sekalian mau nanyak, ngeberatin blog ga nih sob ?

Iya betul sekali gan. Ini bisa memanjakan pengunjung. Dan pengunjung akan senantiasa berkunjung ke blog kita dengan fasilitas yg memadai tentunya.. :D

Sama-sama bang. Silahkan dicoba biar tambah joss blognya.

Tenang aja sob. Ini tidak akan memberatkan beban blog kok gan. Cuma kecil sekali :D

terima kasih atas infonya, salam kenal
http://giribig.com/
http://www.idcheat.com/

sipp..kunjung balik gan ke blog ane http://www.maslukis.com/2016/05/tanya-jawab-tentang-bebasbayar.html

Silahkan berkomentar yang relevan. Jangan menyertakan link aktif di sini. Jika melanggar, komentar akan terhapus.

Emoticon : :) :( =( ^_^ :D =D |o| @@, ;) :-bd :-d :P :kak: