Memodifikasi Tombol Print Dan PDF Dari Printfriendly

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:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments