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>


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>


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