Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Memodifikasi Tombol Print Dan PDF Dari Printfriendly

Baca juga:

Tombol Print Dan PDF Dari Printfriendly
Sebenarnya membuat atau menampilkan tombol print dan PDF dari Printfriendly sangat mudah karena kita sudah disediakan pilihan beberapa jenis tombol untuk berbagai jenis platform website seperti blogger, wordpress, drupal, dan lainnya.

Namun jika kita langsung mengcopy kodenya dan mempastenya di blog kita, ada beberapa kode yang menyebabkan error pada validasi HTML5 ataupun CSS3.

Nah untuk itu sekalian membetulkan kode-kode yang bisa meyebabkan error pada validasi HTML5 ataupun CSS3, kita sekalian memodifikasi tampilan tombol print dan PDF-nya sehingga kita bisa menyesuaikan tombolnya dengan tema blog kita.

Untuk melihat kode aslinya silahkan masuk ke websitenya http://www.printfriendly.com/button

Bagi yang ingin menggunakan kode yang sudah saya modifikasi silahkan gunakan kode-kode di bawah ini.

Kode CSS

.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}

Kode 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;document.getElementsByTagName('head')[0].appendChild(pf)})();

Kode HTML

<a href="http://www.printfriendly.com" class="printfriendly" onclick="window.print();return false;" title="Printer Friendly and PDF"><span class='print'>Print</span> <span class='pdf'>PDF</span></a>

Pada beberapa web penyedia layanan penghitungan skor SEO blog, fitur print dan PDF mempengaruhi penghitungan skor SEO-nya, saya sendiri belum mengetahui apa hubungannya tombol print dan PDF dengan skor SEO blog.

Untuk demonya bisa Anda lihat di link demo di bawah ini. Untuk demo di Jsfiddle silahkan lihat di kiri atas halaman dan untuk demo di blog silahkan lihat di kiri bawah postingan.


Bagi yang ingin mengubah tampilannya baik warna background atau icon-iconnya silahkan modifikasi pada kode CSS-nya. Selamat mencoba.

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar