Memasang Asynchronous Pin It Button Di Blog

Memasang Asynchronous Pin It Button Di Blog

Bola Hero Gawai

Memasang Asynchronous Pin It Button Di Blog

Memasang Asynchronous Pin It Button
Apakah Anda memiliki blog galeri seperti galeri foto petualangan Anda, galeri foto makanan dan masakan favorite Anda, atau mungkin galeri foto traveling Anda? Jika Anda memiliki blog galeri foto, salah satu widget yang mesti dipasang adalah Pin It Button atau tombol Pin It. 

Dengan Pin It Button atau tombol Pin It memudahkan pengunjung blog untuk mengirimkan foto-foto Anda ke Pinterest sebagai foto favorite mereka.

Nah kali ini saya akan share cara memasang Pin It Button dengan asynchronous yang muncul ketika pengunjung meng-hover gambar atau fotonya. Tombol ini akan muncul di semua gambar di blog kecuali gambar yang memiliki size di bawah 80px X 80px, gambar yang digunakan sebagai background dengan CSS, atau gambar yang tampil dengan menggunakan kode data:src pada kode html-nya.

Sebenarnya caranya cukup mudah, Anda tinggal masuk ke widget builder di developer Pinterest dengan memilih type button dengan image hover dan meng-copy kode yang diberikan. Namun yang menjadi masalah yaitu ketika akan save template terdetek error pada kodenya. Error ini muncul dari kode async pada kode di bawah ini.


<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

Untuk mengatasinya Anda cukup menambahkan kode ="async" sehingga menjadi seperti di bawah ini.


<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async="async" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

Kemudian silahkan simpan di atas kode </body>.

Kode di atas memunculkan gambar tombol Pin It yang agak besar, jika Anda menginginkan gambar tombolnya lebih kecil, silahkan hapus kode data-pin-height="28" sehingga menjadi seperti di bawah ini.


<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async="async" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

Mudah bukan...? Dengan menggunakan asynchronous pada javascriptnya, menjadikan tombol Pin It ini tidak menghambat loading blog. Silahkan coba sorotkan mouse Anda pada gambar-gambar di halaman demonya.


Jika ada gambar yang tidak ingin muncul tombol Pin It ini ketika dihover, silahkan tambahkan atribut data-pin-no-hover="true" pada kode html gambarnya seperti di bawah ini.


<img alt="gambar" src="http://3.bp.blogspot.com/-oxlW0p4dVMw/UtkwFsBCnII/AAAAAAAAa8w/B6BTrmOaHGI/s1600/1.png" height="200" title="Cagar Alam Pananjung" width="300" data-pin-no-hover="true"/>

Jangan khawatir, dengan penambahan kode data-pin-no-hover="true" pada kode html gambar ini tidak akan menyebabkan gambar menjadi error pada validasi HTML5.

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

32 Comments Add Comment

Saya dapet Pertamina dehh ...
Kang kalau saran saya Pin It button di home page gak usah di tampilan Kang ..
Ijin Coba ya Kang Adhy ..:-bd

Balas

Iya betul saya lagi tunggu itu dari tadi, cukup teliti juga mas Aldhinya :) , jika ingin hanya ditampilkan di postpage bisa tambahkan tag conditional untuk postpage saja.

Balas

Mas, kayaknya ada masalah di widget share artikel bagian facebook.

Balas

Seperti apa ya mas? Dan widget share FB yang mana dan di mana?

Balas

Sayangnya, ane belum punya akun pinterest :(

Balas

Keren.. ctrl + d dulu kang... mata lagi pedih kalau lihat kode2 di edit html, =(

Balas

saya kira kodenya bakal ribet ternyata simple ya Kang, tinggal tambahkan kode async="async". Salah tebak :(

Balas

Yang di bawah postingan, kelihatannya nggak muncul.

Balas

Selamat sore Kang Adhy, Asyik dapat Ilmu baru dari Kang
Adhy tentang tombol button Pin it. ijin coba Kang Adhy...
Terima kasih atas tutorial yang bermanfaat ini :-bd

Balas

Sip. Make template super cadas trus tambahin pin it button ini. Lengkap sudah!

Balas

sepertinya paling pas blog galeri ya, kalau blog mistik saya pasang tombol ini entah ada gak ya yang mau tekan wkwkwkwk... @@,

Balas

Kenapa di saya normal ya mas? ini SS nya http://prntscr.com/350w3g
Bisa minta SS nya mas?

Balas

Hehehehe bikin aja mas :)

Balas

Heheheehe silahkan mas :)

Balas

Hehehehe iya mas :) hanya tinggal tambahin kode tsb.

Balas

Jika kang Saud punya blog galeri silahkan dicoba kang :)

Balas

Betul sis :) kayaknya bakalan ga ada yang pin pocong hehehehe :p

Balas

Maaf Nih Bang Sedikit OOT..

INi Kenapa ya ?? Setiap Mau Follow Blog Kenapa Selalu Gini ???
http://i1349.photobucket.com/albums/p746/Rendi_Okriza_Putra/kenapa_zps3af920fa.png?t=1396066833

Maaf Kalo ganggu !

Balas

Iya mas sudah saya bahas di sini http://www.kompiajaib.com/2014/03/beberapa-fitur-dashboard-blogger-kini.html

Balas

Maksudnya Gini Kang...

Misalnya Saya Follow Blognya Akang. Saya Klik Widget Follower , terus mucul tab baru, saya klik google,terus saya isi email dan password saya, saya klik login,., tapi kenapa kok keluar kayak gitu ??

Maaf Ganggu !!

Balas

Iya betul mas, beberapa fitur blogger sedang error sekarang seperti yang sudah saya bahas pada link yang saya kasih di atas :) yang error itu adalah widget blogger followernya.

Untuk sementara jika kita ingin mengikuti sebuah blog, kita bisa menambahkan reading list di dashboard blog kita, kecuali blog yang menggunakan link follow seperti blog ini masih bisa difollow langsung.

Balas

ouh Begitu Ternyata ... Makasih Kang.. :D

Balas

templatenya keren kang adhy :D

Balas

kang adhy blognya jd berat krn iklan :p

Balas

pertamax, terimakasih bang adhy cara pemasangan pin-it nya.. kalo untuk menambahkan akun pin-it kita kedalam blog gmana bang?

Balas

makasih gan,mau nyaba pasang....

Balas

sip, berhasil mas..
makasih :-bd

Balas
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!

×
×
×