PopUp Fb Like Box Dengan JQuery

Info informasi PopUp Fb Like Box Dengan JQuery atau artikel tentang PopUp Fb Like Box Dengan JQuery ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain. Membuat pop up Facebook like box dengan jQuery


Hasil tampilannya seperti gambar di bawah :

Codingnya dibuat oleh Mohammad Mustafa Ahmedzai pemilik MyBloggerTricks

"Widget ini tidak selalu muncul pada tiap halaman atau postingan, melainkan hanya sekali saja untuk 1 visitor dengan IP dan browser yang sama. Dan akan muncul selanjutnya 30 hari kemudian, jadi Anda tidak usah khawatir tampilan widget ini akan mengganggu visitor. Widget ini bisa muncul pada halaman utama atau pun postingan, tergantung darimana visitor mengunjungi web Anda. Apabila ingin melihat untuk kedua kalinya, silahkan clear cookies pada browser."

Ke Tahap pembuatan :

1. Login ke Blogger
2. Pada Dasbor anda silahkan tambahkan Widget HTML/JavaScript
3. Masukan kode dibawah ini :

<style>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}

#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1cEEWVYc3xiPA8F_Fq2I6_4JOWh_UiXUy4tF13d9kz0aGLsDvU3pwL-qpjbThf52Y11QJnSQ6z7EJf1ojPA3LPyH4W6pgqRCO15j7wA-ZPJTek8eHYcwul9PYlBt2_ohtr-3_X68pfs/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1cEEWVYc3xiPA8F_Fq2I6_4JOWh_UiXUy4tF13d9kz0aGLsDvU3pwL-qpjbThf52Y11QJnSQ6z7EJf1ojPA3LPyH4W6pgqRCO15j7wA-ZPJTek8eHYcwul9PYlBt2_ohtr-3_X68pfs/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxR2rrFbS4MtJ5WxLndmsE9bD6D5udkoiWV7GNbVUC7hM8PfsrZHMmgXf6vmmA9k1Uw9fn9evtgF9IBnpNRbcCyvjuycQEJ_a-f1N_ySf1f51YV5pYn_BXSHA1AcpmIwyupGvOVSKyZQ/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMAQBsYXsBuY0ukk47zob_1_BLaml6DdNrOHwMxvh8pCXLXXGIB3t9kCwdJ7Q7HOWftKkZJA-pe9u_0yJeLADDP06KfddcPxIlglkrisgpnQ92IX5X7vZDrP_2DA8ZahU05xVEeCMnbMY/s400/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:normal; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhskPbhh2hAv-RHMPvww0XgVhKa8BMZUBSv7uHdbLzwzn0VPRj1R1QdTRZWHh2V4WIJF5vPuGMPYsMXHR1QXAzb0kwoJiQxfLdxu2VPLUyMr7Grd92_DpZVX1Gm0y3TWCYKNT7lQrUpENY/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #2266BB;
font-size: 18px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 3px 3px 3px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Dapatkan info terbaru via Facebook. Silahkan klik LIKE / SUKA.<center><p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnewhiday&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a> and <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://dai-detected.blogspot.com/2012/04/popup-fb-like-box-dengan-jquery.html">Blogger Tutorials</a></p>
</div>
</div>

4. Ganti newhiday dengan usename Anda.
5. Save

Demikian artikel tentang PopUp Fb Like Box Dengan JQuery ini dapat kami sampaikan, semoga artikel atau info tentang PopUp Fb Like Box Dengan JQuery ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik