Cara Memasang Box Like Timer | Cyber-Bn

Unknown

Thursday, January 1, 2015

1 Komentar

Cara Membuat Like Box Facebook Melayang dengan Timer di Blog. Setelah sebelumnya membahas Cara Membuat Like Box Facebook Melayang di Blog. Sekarang saya akan bahas lagi cara atau bisa dibilang model kedua dari kreasi menampilkan likebox facebook melayang. Yang keren dari Model sekarang ini adalah bentuknya yang Popup dengan tambahan timer yang akan membuat likebox ini tertutup secara otomatis. Keren bukan ? dan membuat beda dari model pertama adalah Likebox popup ini otomatis tidak akan muncul kembali jika kita sudah like dan juga kita tidak perlu membuat  kode script likebox. Mudah Bukan ?? Terimakasih untuk blog kakiheboh.com yang telah mendesain dan share tutorial ini. Dan untuk pemasangannya pun sangat mudah tinggal copas code script yang sudah disediakan di bawah ini di dalam template blog diantara HTML / Javascipt  intinya diletakkan sesudah HTML / Javascipt dan sebelum HTML / Javascipt.
Sreenshotnya bisa lihat dibawah ini atau Demo Livenya langsung pada blog abyfarhan.com ini :

Sebelum kita mulai memasangnya seperti tutorial sebelumnya jangan lupa sobat sudah membuat fanpage facebooknya okehh. Tujuannya sih cuma buat ngambil Link username Fanpage facebook kita aja.

Ok langsung kita mulai saja !!!
1. Seperti Biasanya Login Blogger
2. Menuju Tata Letak
3. Klik Tambah Gadget
4. Lalu klik ( HTML / Javascipt )
5. Nah tinggal Copy CODE SCRIPT nya
6. Klik Simpan !!

Code Script:

<!-- Facebook POPUP LikeBox With Timer Code Start -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

<style type='text/css'>

#exepopup{background-color:#fff;position: fixed;top:50%;z-index:9999;display:none;padding:0px;left:50%;border:10px solid rgba(82, 82, 82, 0.7);-webkit-background-clip: padding-box; /* for Safari */background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */-webkit-border-radius:8px 8px 8px 8px;-moz-border-radius:8px 8px 8px 8px;border-radius:8px 8px 8px 8px;width:400px;height:360px;margin-left:-200px;margin-top:0px;overflow:hidden;}#exepopup span{font-size:20px !important;font-weight:bold !important;}#exepopup h1{background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzuLkTBrYnxd-dS8DdSE10vfMjcdQJ3gw9L1aUBNehCiF8q6MYWxwBrKz-_nFbITSt_AXgjpPOS-DetPKw_koC0Od7e1wj550cCY4DXg6bRYI1TmjdDFBgWHoJmci3PBjqho-J7GhMK4I/s1600/aktechz-fb-lock.png) 98% no-repeat;border:1px solid #3b5998 !important;color:#FFFFFF !important;font-size:20px !important;font-weight:700 !important;padding:5px !important;margin:0 !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;overflow:hidden !important;}.exepopupdata{font-size:12px !important;font-weight:normal !important;height:265px !important;padding:1px !important;background:#fff !important;border-bottom:2px solid #ddd;overflow:hidden !important;}#exepopupfooter{text-align:left;background:#F2F2F2 !important;height:56px !important;padding:10px 10px 10px 10px !important;overflow:hidden !important;}#exepopupclose{float:right;background-color:#eee !important;border:1px solid #ccc !important;color:#111 !important;font-weight:bold !important;padding:5px 8px 5px 8px !important;text-decoration:none !important;display:inline-block !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;outline:none !important;position:relative !important;font-size:18px !important;margin:1px !important;}#exepopupclose:active{top:1px;left:1px;}</style>

<script type='text/javascript'>

jQuery(document).ready(function() {

function exepopupfunc() {

var sec = 10

var timer = setInterval(function() {

$("#exepopupfooter span").text(sec--);

if (sec == 0) {

$("#exepopup").fadeOut("slow");

clearInterval(timer);

}

},1000);

var exepopupwindow = jQuery(window).height();

var exepopupdiv = jQuery("#exepopup").height();

var exepopuptop = jQuery(window).scrollTop()+50;

jQuery("#exepopup").css({"top":exepopuptop});}

jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc)

//alert(jQuery.cookie('sreqshown'));

//var exepopupww = jQuery(window).width();

//var exepopupwww = jQuery("#exepopup").width();

//var exepopupleft = (exepopupww-exepopupwww)/2;

var exepopupleft = 500;

//var exepopupwindow = jQuery(window).height();

//var exepopupdiv = jQuery("#exepopup").height();

//var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2;

jQuery("#exepopup").animate({opacity: "1", left: "0" , left: exepopupleft}, 0).show();

jQuery("#exepopupclose").click(function() {

jQuery("#exepopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});

</script>

<div id="exepopup">

<h1>Join Us On Facebook</h1>

<div class="exepopupdata"><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F849671108448313&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe></div>

<div id="exepopupfooter">Please Wait <span>10</span> Seconds...!!!<a href="#" id="exepopupclose" onclick="return false;"></a></div></div>

<!-- Facebook POPUP LikeBox With Timer Code End -->

Keterangan :
>Warna Merah (Waktu tunggu) bisa diganti sesukamu
> Warna Hijau Bisa Diganti dengan Sesuka Hatimu
> Warna Kuning Ganti Dengan URL Fans Fage Facebook mu 

5. Jika sudah Simpan Template dan Selesai !!