Cara Membuat Tombol Share sosial media Pop Up Window Tanpa Plugin


Belajar CSS

Selamat datang di Azzahra Official, kali ini saya akan berbagi scrip tombol share button Sosial Media Tanpa Plugin, saya juga masih tahap belajar css, kenapa kita harus belajar memasang cript sendiri, mungkin kalian juga sudah tau kalau kita banyak menggunakan plugin pada blog kita sudah pasti disk spase akan berkurang, dan juga terlalu banyak menginstal plugin juga bisa bikin blog kalian menjadi berat, karna terlalu banyak menjalankan java sript. ok langsung saja,

jika kalian ingin membuat 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>

Twiter

<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.semoga dartikel ini dapat bermanfaat bagi pembaca dan bisa bermafaatTerima kasih 

Tinggalkan Balasan

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