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
13 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

+++
Merasa kurang hoki bermain judi di situs lain ? atau Ingin mendapatkan income tanpa bekerja ?
KAMI HADIR UNTUK ANDA , MARI BERGABUNG BERSAMA KAMI DI RUBYQQ
PRESENTASI KEMENANGAN 80% ( MENANG ATAU KALAH TETAP DAPAT BONUS )
100 % PLAYER vs PLAYER !!
Hanya dengan 1 USER ID anda bisa main 7 GAMES :
* Bandar Poker | Poker Online | Capsa Susun | DominoQQ | BandarQ | AduQ | SAKONG ONLINE |
* Pendaftaran FREE ==> https://goo.gl/AQYhSc
* Minimal Deposit & Withdraw HANYA Rp.15.000,-
* Bonus Turn Over 0,5% SETIAP HARI DIBAGIKAN
* Bonus Referral 20% Seumur Hidup
* MEGA JACKPOT RATUSAN JUTA RUPIAH
* Customer Service siap melayani anda 24 jam

Untuk informasi lebih lengkap silahkan Hubungi Customer Service kami
BBM : 2B8938F7
FACEBOOK : rubyqq
SKYPE : RUBY QQ
LIVECHAT https://goo.gl/AQYhSc

Selamat malam bossku semua...
Kamu Sering Kalah Main Judi?
Sudah Tidak Jaman Lagi Kalah Main Judi
Kami Hadir Dengan Inovasi Terbaru & Tercangih, Dengan Jackpot Yang Super Pasti & Gampang Untuk Menang Terus Di Setiap Hari .
Transaksi Cepat, Aman & Terpercaya.
Tersedia 7 Games Dalam 1 User ID :
New Game ------>> GAME SAKONG
Poker, Domino, Bandar Ceme, Capsa, Ceme Keliling, dan Live Poker
Minimal Deposit Rp.15.000,-
Minimal Withdraw Rp.15.000,-
Promo Bonus Harian + Mingguan + Bulanan :
- Bonus Deposit
- Bonus Turn Over Harian 0.5%
- Bonus Refferal 10% + 10%
Untuk Informasi Lebih Lanjut Segera Hubungi CS Kami 24 Jam : www,royalqq,poker

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

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