Cara Membuat Tombol Share sosial media Pop Up Window Tanpa Plugin


Selamat datang pengunjung AO, kali ini saya akan berbagi scrip tombol share button Sosial Media Tanpa Plugin, versi belajar css mungkin kalian juga sudah tau kalau kita banyak menggunakan plugin sudah pasti disk spase akan berkurang, dan juga terlalu banyak menginstal plugin juga bisa bikin blog kalian menjadi berat, ok langsung saja,

jika kalian ingin tombol share ada di bawah postingan artikel, kalian bisa pastekan kode di single.php  atau content-single.php silahkan kalian berimprovisasi dengan imajinasi kalian.

jika ada yg kurang mohon untuk diberi masukan atau coretan dikomentar ya. gak perlu panjang lebar sobat bisa kopi kode scrip dibawan ini untuk tombol share buton dengan popup, untuk yang saya beri warna merah sobat sudah pasti tau harus diganti dengan apa…?

untuk app_id bisa kalian masukan dengan app id kalian, jika kalian belum mempunyai app id kalian bisa mendaftar  di sini

Untuk yang saya beri warna merah bisa kalian ganti dengan alamat blog kalian ya…

Facebook

<a class=”share-btn” href=”https://www.facebook.com

/sharer/sharer.php?app_id=[2119771398335166]&sdk=joey&u=

https://azzahra-official.com&display=popup&ref=

plugin&src=share_button”onclick=”return !window.open(this.href, ‘Facebook’, ‘width=640,height=580′)”><img src=’https://azzahra-official.com/img/facebook.png’ /> </a

Google
<a class=”share-btn”href=”https://plus.google.com/share?url=https://azzahra-official.com” onclick=”return !window.open(this.href, ‘g-plus’, ‘width=640,height=580’)”>
<img src=”https://azzahra-official.com/img/google.png” alt=”Google” /></a>
Twitter
<a class=”share-btn”href=”https://twitter.com/share?url=https://azzahra-official.com” onclick=”return !window.open(this.href, ‘twitter’, ‘width=640,height=580’)”>
<img src=”https://azzahra-official.com/img/twitter.png” alt=”Twitter” /></a>

dan jangan lupa tambahkan kode css berikut ke dalam style.css untuk merubah ukuran gambar atau besar kecinya ikon share buton kalian.

CSS

.share-btn img{
margin-top:15px;
height:40px;
width:40px;

Ganti angka yang berwarna merah sesuai dengan keinginan kalian untuk merubah ukuran ikon share button.

untuk preview nya kalian bisa lihat di Blog ini atau kira kira seperti yang dibawah postingan ini

Terima kasih semoga bermanfaat

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *