Memodifikasi Tombol Print Dan Pdf Dari Printfriendly
Sebenarnya menciptakan atau menampilkan tombol print dan PDF dari Printfriendly sangat gampang sebab kita sudah disediakan pilihan beberapa jenis tombol untuk banyak sekali jenis platform website ibarat blogger, wordpress, drupal, dan lainnya.
Namun bila kita eksklusif mengcopy kodenya dan mempastenya di blog kita, ada beberapa isyarat yang menjadikan error pada validasi HTML5 ataupun CSS3.
Nah untuk itu sekalian membetulkan kode-kode yang dapat meyebabkan error pada validasi HTML5 ataupun CSS3, kita sekalian memodifikasi tampilan tombol print dan PDF-nya sehingga kita dapat menyesuaikan tombolnya dengan tema blog kita.
Untuk melihat isyarat aslinya silahkan masuk ke websitenya http://www.printfriendly.com/button
Bagi yang ingin memakai isyarat yang sudah aku 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7xj1S5_MMGv49Zdh5JLIgCyfkfGkaogzyyHgc0LbpUvlYKQZ5-KOJN-1CiHmfgJ41lKR3JsY6BtF8mIGmrUU-7FsHpZziDfX6DfCwYYQr7_CBP6dLthwAme6jrqt2_7d65deC0cITCTRy/s1600/print.png) no-repeat;border:none;box-shadow:none;margin:3px 6px -3px;padding-left:20px}
.printfriendly span.pdf{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJS_ocSdTB6kQpMKMkHybTveIGmFnie_k7MSvJNs-iJDCJ0nrSagCjbOlZSJYXIYDD8pxHMYgwMZjS268Zyfdfp2PqdyMvSExgCvlnG6m7MA4WKZ9BwI0ZZtQ-7gZBZ6-tcXRyhpU7Ti5L/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="Memodifikasi Tombol Print Dan PDF Dari Printfriendly"><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, aku sendiri belum mengetahui apa hubungannya tombol print dan PDF dengan skor SEO blog.
Untuk demonya dapat 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 isyarat CSS-nya. Selamat mencoba.
Sumber https://www.kompiajaib.com/
0 Response to "Memodifikasi Tombol Print Dan Pdf Dari Printfriendly"
Posting Komentar