Cara Menambahkan Widget Kotak Popup Like Facebook

Facebook adalah cara terbaik untuk mendapatkan lalu lintas ke situs web atau blog Anda. Sebagian besar dari Anda mungkin bertanya-tanya bagaimana cara menambah suka halaman fb dan dengan demikian jangkauan organik ke halaman Anda. Berikut adalah salah satu metode di mana Anda dapat dengan mudah meningkatkan Suka Halaman FB Anda tanpa energi. Tambahkan Widget Kotak Pop-Up Facebook Like yang indah ini ke blog Anda. Ini akan membuat hampir semua pengunjung ke situs Anda Menyukai Halaman Anda.

• LIVE DEMO

Widget ini hadir dengan efek Light Box dan terlihat menarik bagi pengguna. Munculan akan muncul hanya satu kali yaitu munculan hanya akan datang satu kali dan tidak di setiap halaman blog Anda. Tampak seperti gambar di atas.

1.     Masuk ke Blogger → Dashborad
2.     Klik pada Drop Down Menu dan pilih Layout
3.     Tambahkan Gadget HTML / JavaScript
4.     Rekatkan kode di bawah ini di dalamnya.

<script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type = 'text / javascript'> </script> 
<style> 
# fbox-background { 
    display: none; 
    latar belakang: rgba (0,0,0,0,8); 
    lebar: 100%; 
    tinggi: 100%; 
    posisi: tetap; 
    atas: 0; 
    kiri: 0; 
    z-index: 99999; 
} 
# fbox-close { 
    width: 100%; 
    tinggi: 100%; 
} 
# fbox-display { 
    background: #eaeaea; 
    perbatasan: 5px solid # 828282; 
    lebar: 340px; 
    tinggi: 230px; 
    posisi: absolut; 
    atas: 32%; 
    kiri: 37%; 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px; 
    batas-radius: 5px; 
} 
# fbox-button { 
    float: right; 
    kursor: pointer; 
    posisi: absolut; 
    kanan: 0px; 
    atas: 0px; 
} 
# fbox-button: before { 
    content: "CLOSE"; 
    padding: 5px 8px; 
    latar belakang: # 828282; 
    warna: #eaeaea; 
    font-weight: bold; 
    ukuran font: 10px; 
    font-family: Tahoma; 
} 
# fbox-link, # fbox-link a.telah dikunjungi, # fbox-link a, # fbox-link a: hover { 
    color: #aaaaaa; 
    ukuran font: 9px; 
    teks-dekorasi: tidak ada; 
    perataan teks: tengah; 
    padding: 5px; 
}
</style> 
<script type = 'text / javascript'> 
// <! [CDATA [ 
jQuery.cookie = fungsi (kunci, nilai, opsi) { 
// kunci dan setidaknya nilai yang diberikan, setel cookie ... 
if ( arguments.length> 1 && String (value)! == "[Object object]") { 
options = jQuery.extend ({}, options); 
if (value === null || value === undefined) { 
options.expires = -1; 
} 
if (typeof options.expires === 'number') { 
var days = options.expires, t = options.expires = Date baru (); 
t.setDate (t.getDate () + hari); 
} 
value = String (nilai); 
return (document.cookie = [ 
encodeURIComponent (key), '=', 
options.raw? value: encodeURIComponent (value),
options. kedaluwarsa? '; kadaluarsa = '+ options.expires.toUTCString ():' ', // gunakan atribut kadaluarsa, usia maks tidak didukung oleh IE 
options.path? '; path = '+ options.path:' ', 
options.domain? '; domain = '+ options.domain:' ', 
options.secure? '; secure ':' ' 
] .join (' ')); 
} 
// kunci dan kemungkinan opsi yang diberikan, dapatkan cookie ... 
opsi = nilai || {}; 
hasil var, decode = options.raw? function {return s; }: komponen decodeURIC; 
return (result = new RegExp ('(?: ^ |;)' + encodeURIComponent (key) + '= ([^;] *)'). exec (document.cookie))? decode (hasil [1]): null; 
}; 
//]]> 
</script> 
<script type = '

if ($. cookie ('popup_facebook_box')! = 'yes') { 
$ ('# fbox-background') .delay (5000) .fadeIn ('medium'); 
$ ('# fbox-button, # fbox-close') .klik (function () { 
$ ('# fbox-background'). stop (). fadeOut ('medium'); 
}); 
} 
$ .cookie ('popup_facebook_box', 'yes', {path: '/', kedaluwarsa: 7}); }); 
</script> 
<div id = 'fbox-background'> 
<div id = 'fbox-close'> 
</div> 
<div id = 'fbox-display'> 
<div id = 'tombol fbox'> 
</ div> 
<iframe allowtransparency = 'true' frameborder = '0' bergulir = 'no' src = '// www. facebook.com/plugins/likebox.php? 
href = https://www.facebook.com/freebloggerthemes& width = 339 & height = 255 & colorscheme = light & show_faces = true & show_border = false & stream = false & header = 
batas ' style =' salah: tidak ada; overflow: disembunyikan; latar belakang: #fff; lebar: 339px; tinggi: 200px; '> </iframe> 
<div id = "fbox-link"> Didukung oleh <a style = "padding-left: 0px;" href = "http://blogger-templatees.blogspot.com/2015/06/how-to-add-facebook-popup-like-box.html" rel = "nofollow"> BloggerTemplates </a> </div> 
</div> 
</div>

5. Setelah menambahkan kode Ganti  https://www.facebook.com/freebloggerthemes dengan URL facebook yang Anda tentukan dan klik simpan.

Kustomisasi 
Widget akan muncul 5 detik setelah halaman selesai memuat. Jika Anda ingin mengubah penundaan ini, ubah angka 5000 ke angka yang lebih besar atau lebih kecil di bagian ini:

.delay (5000)

Secara default, kotak sejenisnya hanya muncul pertama kali pengguna mengunjungi halaman Anda. Jika Anda ingin kotak Facebook muncul setiap kali halaman dimuat, maka hapus baris kode ini: 
$ .cookie ('popup_facebook_box', 'yes', {path: '/', kedaluwarsa: 7});

 Itu saja...!