Like Facebook Pop Up Tutorial dari widget satu ini memang sudah banyak yang berbagi di blog lainnnya, namun kali ini beda dari pada yang lain karena kali ini hasil dari editan saya sendiri, dengan tampilan yang lebih sederhana dan pastinya keren..
Dan tidak diragukan lagi, dengan teman menambahkan pop up like box facebook ini di blog teman adalah salah satu cara terbaik untuk meningkatkan like dari halaman facebook teman semuanya
Dan juga Widget Like Facebook Pop Up ini selain keren dan yang pastinya 100% sudah responsive...
Bisa di lihat screenshot dibawah... ( Dengan Versi Mobile )
Dan teman-teman semua tidak perlu takut jika blog akan jadi berat karena widget ini cukup ringan yang membuat kecepatan blog tidak banyak berkurang.
Cara Memasang Kotak Like Facebook Pop Up Responsive Keren
1. Memiliki halaman di facebook , jika belum cari di google cara buat halaman facebook.
2. Masuk ke Dashbor blog kita .
3. Lalu masuk TataLetak .
4. Pilih tambahkan Gadget .
5. Pilih Html/JavaScript .
Lalu kalian copy kode di bawah ini ke tataletak, Pada tambahkan gadget, Html/JavaScript.
<!--Kode CSS-->
<style type='text/css'>
#sakupintar-back{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
#sakupintar-exit{width:100%;height:100%}
.sakupintar-box-inner{width:266px;position:relative;saku_pintar:block;margin:25px;text-align:center}
#sakupintar-close{cursor:pointer;position:absolute;top:-23px;right:-85px;font-size:18px;font-weight:700;color:#000;z-index:99999;saku_pintar:inline-block;line-height:18px;height:20px;width:20px}
#sakupintar-close:hover{color:#06c}
#sakupintar-box{min-width:380px;min-height:250px;position:absolute;top:50%;left:50%;margin:-110px 0 0 -195px;-webkit-box-shadow:0 0 16px #000;-moz-box-shadow:0 0 16px #000;box-shadow:0 0 16px #000;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:transparent;max-height:238px}
@media (max-width:380px){.saku_pintar{position:fixed;top:50%;left:50%}#sakupintar-box{min-width:380px;min-height:250px;transform:scale(0.67);-webkit-transform:scale(0.67);-o-transform:scale(0.67);-ms-transform:scale(0.67);-moz-transform:scale(0.67)}.sakupintar-box-inner{width:266px}#sakupintar-close{right:-85px}}
#sakupintar-back iframe{transform:scale(0.920);-webkit-transform:scale(0.920);-o-transform:scale(0.920);-ms-transform:scale(0.920);-moz-transform:scale(0.920);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left}</style>
<!--Kode Javascript-->
<script type='text/javascript'>
//<![CDATA[
//grab user's browser info and calculates/saves first visit
jQuery.cookie = function (key, value, options) { 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 = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join('')); }
options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; };
// the pop up actions
$(function ($) {
if ($.cookie('popup_fb') != 'yes') {
$('#sakupintar-back').delay(400).fadeIn("fast"); // options slow or fast
$('#sakupintar-close, #sakupintar-exit').click(function () {
$('#sakupintar-back').stop().fadeOut("fast"); // options slow or fast
});
}
//initiate popup function by setting up the cookie expiring time
$.cookie('popup_fb', 'yes', { path: '/', expires: 1 });
});
//]]>
</script>
<!--Kode HTML-->
<div class='saku_pintar'>
<div id='sakupintar-back'>
<div id='sakupintar-exit'> </div>
<div id='sakupintar-box'>
<div class='sakupintar-box-inner'>
<div id='sakupintar-close'>
<img src='http://icons.iconarchive.com/icons/kyo-tux/ginux/64/Extras-Close-icon.png' alt='Close' title='Close'/>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/sakupintar/&width=360&height=345&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false' style='border: 0 none; overflow: hidden; width: 360px; height: 340px;text-align:center;margin:0 auto;'/>
</iframe></div>
</div>
</div>
</div>
Silahkan ganti url ini https://www.facebook.com/sakupintar/ dengan url Fanspage facebook kalian...
Jika kalian ingin agar widget pop up facebooknya muncul di setiap kali buka blog /post di hari yang sama,
silahkan ganti nilai pada kode ini expires: 1 menjadi 0 (Angka Nol) expires: 0
4. Simpan Widget
Demikin tutorial tentang Cara Memasang Kotak Like Facebook Pop Up Responsive Keren,
Demikin tutorial tentang Cara Memasang Kotak Like Facebook Pop Up Responsive Keren,
Jika teman semua mau bertanya langsung saja ke kotak komentar di bawah.
Terima Kasih.....
2 comments
sayang sekali , sepertinya tidak work di blog ane gan....
dimananya tidak work gan..
mungkin bisa di bantu..
Slahkan berkomentar di bawah ini...
EmoticonEmoticon