Memodifikasi Tombol Print Dan PDF Dari Printfriendly

Memodifikasi Tombol Print Dan PDF Dari Printfriendly

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

57 Comments Add Comment

Makasih banyak ya mas :) :D

Balas

wah keren mas,, bisa di coba langsung tu :D

Balas

Kelihatan Simple y kang .. mantapzzz

Balas

Maksud mas adi mempengaruhi penghitungan skor SEO itu apa? semakin baik atau justru sebaliknya? :D

Balas

Sebelumya saya sudah pasang tombol print tp hanya suport google chrome...
Sip Kang nanti saya coba pake Trik ini :)

Balas

sip kang info nya saya udah pake tapi cuma text tapi ini kayak na bagus :)

Balas

Mantaps deh kang...
langsung dicoba deh :D

Balas

sekarang demo di blognya di sisi kanan atas kang hehe

Balas

asyik juga ya ada tombol printer dan pdf nya. Jadi artikel di blog bisa langsung di cetak ya mas :)
atau mungkin bisa juga di jadikan ebook :D

Balas

hm.. diluncurkan juga akhirnya hehehe keren mas adhy :)

Balas

Selamat petang Kang Adhy nyimak dan baca dulu nih Kang
Agar lebih tau dan memahami artikel Akang ini Hatur nuhun
Sebelumnya sudah berbagi trik tentang Tombol Print :-d

Balas

Sama-sama mas :D

Balas

Silahkan dicoba mas =D

Balas

Iya kang ketimbang aslinya hehehhe :D

Balas

Menambah skor seo kang :D tapi blm tahu apa hubungannya tombol print dan pdf dengan seo :D

Balas

Silahkan dicoba aja kang =D

Balas

Silahkan dicoba yang ini mas hehehehe :D

Balas

Hehehehe iya kang di halaman ini juga ada =D

Balas

Silahkan mas :D

Balas

Iya mbak untuk kemudahan pengnjung =D

Balas

Hehehehe iya silahkan diicip-icip :D

Balas

Silahkan kang Saud semoga bisa dipahami =D

Balas

wah baru tau nih mas ada cara seperti ini,thanks udh sharing ilmunya
btw,kunjungi balik ya

Balas

Wah tambah ganteng saja mas, besok tak prin semuanya disini..

Balas

bagus sekali nih mas

Balas

bermanfaat sangat nih, gak perlu repot repot copas trus pindahin ke word nih :) mantaff kang ;)

Balas

kunjungan malam mas Adhy :D
tool yg sangat simple namun manfaatnya cukup besar, mantaapp :-d

Balas

Hasilnya mantap mas :-d keren bener

Balas

di rilis juga ya kang akhirnya hasilnya memuaskan . .mantep dah :D

Balas

jadi ada hubungannya dengan seo ya wah bagus banget kalau gitu :D tapi masih bingung kang adhy

Balas

Mangstab. Kapan2 dicoba ah :)

Balas

sangat diperhatikan bangat ya valid html5 dan css3 nya..

Balas

btw kang, saya kirim email, mohon bantuannya yah hehe :D hapunten

Balas

Heheheehe makasih =D

Balas

Ya itu tujuannya sis =D

Balas

Iya sis, master Taufik aja pasang fitur ini hehehehe :D

Balas

Makasih mas... silahkan dicoba :D

Balas

Iya hehehee makasih =D

Balas

Iya mas hehehhe :D

Balas

Selama ini saya sendiri tidak pernah mengecek skor SEO atau validasi template. hehe

Balas

hehe..iya ya, ntar deh dipasang kl blognya rame :D

Balas

save dulu buat yang laen... buat toko ga cocok kayaknya :D

Balas

kok gak bisa di klik yah?

Balas

Pasang javascript nya dimana Kang Adhy :D

Balas

Coba atuh dikit-dikit ck seo atau validasinya :D

Balas

Silahkan mas ;)

Balas

Seperti biasa di atas kode </head> atau </body>

Balas

html link a href kurang rel nofollownya mas :)

Balas

Itu tergantung yang pasangnya mas :D tapi lebih baik link eksternal menggunakan rel nofollow, setidaknya itu juga yang saya lakukan :D semoga yang lain juga memahami hal ini... seperti halnya mas Alief :-d

Balas
This comment has been removed by the author.
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×