Popup Facebook Like Box Tampilan Dinamis & Ringan Untuk Blogger

Popup Facebook Like Box dengan tampilan dinamis adalah sebuah widget yang hanya menampilkan tombol like atau suka saja. Apa Keuntungannya? Keuntungan menggunakan widget ini yakni tidak akan membebani load time dan hanya akan muncul sekali saja sehingga pengunjung tidak akan merasa terganggu jika mereka berkunjung untuk kedua kalinya.

LIHAT DEMO

Bagaimana Cara Memasangnya Pada Blog?

Memasang widget di atas tidaklah sulit, berikut penjelasan lengkapnya.

• Login ke Blogger
• Pilih Tata Letak › Add Gadget › HTML/Javascript
• Copy kode di bawah ini dan masukkan atau paste ke dalam form HTML/Javascript tersebut.

<style type="text/css">

#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;}

#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/AVvXsEjgLpouFvaoJ2Ix8rveOG7ypDfNMePpsPpMBRYjuqP19pqg2qYYrRU72unnPs3M3rkLIewSCwf1VWF3Z5_pIWIg9c157eRbEQA86lNQVt1lhe_XzuR2GpBvzOsROIeCoFCyEPzUy-EbBmCl/s1600/controls.png) no-repeat 0 0;}

#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8oWr8IfTLjpmon6pB1u-vA6qgz6oDyzacQJOIJ92DDVa8MQ-uKgQy56UP0YL2MoqFMJIt3SGs4j7mA_TJtLeMYh3vuhjWJvYJ6hPMQ8uMN4_ZteGlpFlDBH5-VwEt79r17ipBxCwGeTx/s1600/border.png) repeat-x top left;}

#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgLpouFvaoJ2Ix8rveOG7ypDfNMePpsPpMBRYjuqP19pqg2qYYrRU72unnPs3M3rkLIewSCwf1VWF3Z5_pIWIg9c157eRbEQA86lNQVt1lhe_XzuR2GpBvzOsROIeCoFCyEPzUy-EbBmCl/s1600/controls.png) no-repeat -36px 0;}

#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgLpouFvaoJ2Ix8rveOG7ypDfNMePpsPpMBRYjuqP19pqg2qYYrRU72unnPs3M3rkLIewSCwf1VWF3Z5_pIWIg9c157eRbEQA86lNQVt1lhe_XzuR2GpBvzOsROIeCoFCyEPzUy-EbBmCl/s1600/controls.png) no-repeat 0 -32px;}

#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8oWr8IfTLjpmon6pB1u-vA6qgz6oDyzacQJOIJ92DDVa8MQ-uKgQy56UP0YL2MoqFMJIt3SGs4j7mA_TJtLeMYh3vuhjWJvYJ6hPMQ8uMN4_ZteGlpFlDBH5-VwEt79r17ipBxCwGeTx/s1600/border.png) repeat-x bottom left;}

#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgLpouFvaoJ2Ix8rveOG7ypDfNMePpsPpMBRYjuqP19pqg2qYYrRU72unnPs3M3rkLIewSCwf1VWF3Z5_pIWIg9c157eRbEQA86lNQVt1lhe_XzuR2GpBvzOsROIeCoFCyEPzUy-EbBmCl/s1600/controls.png) no-repeat -36px -32px;}

#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgLpouFvaoJ2Ix8rveOG7ypDfNMePpsPpMBRYjuqP19pqg2qYYrRU72unnPs3M3rkLIewSCwf1VWF3Z5_pIWIg9c157eRbEQA86lNQVt1lhe_XzuR2GpBvzOsROIeCoFCyEPzUy-EbBmCl/s1600/controls.png) repeat-y -175px 0;}

#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgLpouFvaoJ2Ix8rveOG7ypDfNMePpsPpMBRYjuqP19pqg2qYYrRU72unnPs3M3rkLIewSCwf1VWF3Z5_pIWIg9c157eRbEQA86lNQVt1lhe_XzuR2GpBvzOsROIeCoFCyEPzUy-EbBmCl/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/AVvXsEigTbRj2sC7Cr2XbxsEkSJUjd14OzL_u62FG6rs6TJNA78ugExfL5bhYQbiCnlFbyWUWHkcTVUxzR6CK4689eu6N5P6tRLyAcoz64CSIFMTveudS185f_VBh-rLEMJZ-ufojjxKsZxTiWhK/s1600/loading-background.png) no-repeat center center;}

#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSVH9TzQaQVud_t8qFBR6E7KJzRAc7V2s3oGXdOOBHx8HUBnDiWbcKHoq8ifShhhQEkYkJMuh88k42Vr1p8K2_llZ-0mG2xnKeMI0hjizeTkI81wmFLREjaBQ7DOUDhzMf6jOAvSbvGxhi/s1600/loading.gif) no-repeat center center;}

#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; 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/AVvXsEjgLpouFvaoJ2Ix8rveOG7ypDfNMePpsPpMBRYjuqP19pqg2qYYrRU72unnPs3M3rkLIewSCwf1VWF3Z5_pIWIg9c157eRbEQA86lNQVt1lhe_XzuR2GpBvzOsROIeCoFCyEPzUy-EbBmCl/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;}

#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: #3B5998;

font-size: 20px !important;

font-weight: bold;

margin: 10px 0;

border:1px solid #ddd;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

box-shadow: 5px 5px 5px #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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/><script src="http://yourjavascript.com/2111781394/lostsector.blogspot.com-colorbox.js" type="text/javascript"/>

<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>

<div style='display:none'>

<div id='subscribe' style='padding:10px; background:#fff;'>

<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Flostsector.stars&amp;width=200&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:62px;" allowtransparency="true"></iframe>

</center>

<p style=" float:right; align:right;margin-right:35px; font-size:9px;" ><a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://goo.gl/BAZmx">Get This Gadget</a> </p>

</div>

</div>

Keterangan :
Perhatikan jQuery yang berwarna biru muda di atas. Apabila didalam template anda sudah terdapat jQuery versi diatasnya, maka hapus saja dan lostsector.stars ganti dengan username facebook anda

• Setelah itu, tekan tombol simpan dan lihat hasilnya.

Selamat mencoba dan semoga bermanfaat ! Terima kasih.