Friday, 21 April 2017

Cara Membuat Popup Link Share Media Sosial di Blog

Media Sosial

Hampir di setiap blog atau website yang saya kunjungi sekarang ini sudah dapat dipastikan sudah memasang Tool Media share Sosial, tentu hal tersebut sangat membantu nantinya untuk mempromosikan blog kepada pembaca dan mendatangkan trafik dari Media Sosial khususnya. Media sosial sekarang ini sangat berperan aktif dan penting dalam pemasaran suatu Produk terlebih bagi kita para Blogger hal ini tentu sangat menguntungkan dan membantu agar Blog yang di posting dapat di segera diketahui dan pengunjung pun dapat mencari informasi yang dibutuhkan secepatnya.

Nah di postingan kali ini terkait dengan Media Sosial akan di bahas Cara Membuat Popup Link Share Media Sosial di Blog, disini saya anggap sobat sudah memasang Tool Media Share Sosial ini di Blog atau Websitenya, bagi yang belum memasangnya dapat dilihat DISINI.

Anggap sobat sudah memasangnya dengan cara mengcustome social media Tools-nya dan biasanya kebanyakan saat ada pengunjung yang mengklik tombol share salah satu media sosial yang ada tampilannya akan membuka Tab browser baru dan terbuka halaman penuh, ada merasa agak kurang pas dilihatnya ada juga yang menganggapnya biasa saja, namun kalau saya pribadi jika membuka link share di blog orang lain dengan tampilan buka tab baru dan halaman penuh saya sebagai pengunjung agak risih juga dan ribet, nah berawal dari pengalaman tersebut muncullah ide Cara Membuat Popup Link Share Media Sosial di Blog.

Bagi sobat yang mau mencobanya yuk mari kita simak bersama, dan kode ini sedikit ada modifikasi supaya nanti saat pop-upnya muncul pas ditengah

Ini sebagai contoh saja link share yang awal

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

Itu diatas contoh yang bukan Pop-up, untuk membuat Pop-up pada link share yang ada di blog maka silahkan tambahkan kode Javascript dibawah ini kemudian letakkan tepat 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>

Setelah itu silahkan sobat tambahkan kembali kode class="social-popup" di link sosial share-nya jadi tampilannya pada kodenya nanti akan seperti ini

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

Lakukan juga hal yang sama pada setiap link sosial share yang sobat pasang di blog-nya, kemudian Save dan Selesai, Selamat Mencoba.


EmoticonEmoticon