Membuat Popup Pada Link Share Media Sosial

Membuat Popup Pada Link Share Media Sosial

Bola Hero Gawai

Membuat Popup Pada Link Share Media Sosial

Membuat Popup Pada Link Share Media Sosial
Jika Anda menggunakan custom social media sharing tool di blog Anda, biasanya tidak akan muncul popup ketika berbagi ke media sosial dengan klik link-nya, namun akan menuju ke halaman penuh.

Nah kebetulan saya menemukan sebuah javascript yang dapat dengan mudah untuk membuat popup pada custom social media sharing tool. Namun saya modifikasi sedikit sehingga popup-nya muncul di tengah-tengah layar.

Sebagai contoh, di bawah ini adalah contoh link untuk sharing ke Linkedin.


<a href="//www.linkedin.com/shareArticle?mini=true&amp;url=http://www.kompiajaib.com/" target="_blank" title="Share This On Linkedin">Share This On Linkedin</a>

Preview: Share This On Linkedin

Nah untuk membuat popup pada link di atas tadi silahkan tambahkan javascript di bawah ini di atas kode </body>


<script>
//<![CDATA[
var postEl=document.getElementsByClassName("social-popup"),postCount=postEl.length;for(i=0;i<postCount;i++)postEl[i].addEventListener("click",function(e){var t=this.getAttribute("href"),o=screen.width/2-250,s=screen.height/2-250;window.open(t,"popUpWindow","width=500,height=500,left="+o+",top="+s+",resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes")});
//]]>
</script>


Kemudian tambahkan kode class="social-popup" pada link-nya sehingga menjadi seperti berikut ini, tambahkan juga pada link lainnya jika ada.


<a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=http://www.kompiajaib.com/" target="_blank" title="Share This On Linkedin">Share This On Linkedin</a>

Preview:

Bagaimana, mudah bukan? 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

0 Comment

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!

×
×
×