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.


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.

Unknown
Unknown

6 comments:
Write comment
  1. gan ko ga bisa yaaaah ??

    ReplyDelete
  2. ga ngaruh gan!
    jangan tanggung donk bagi-bagi ilmu'y
    Pelit amattttttt......
    Jelasin secara detil donk.

    ReplyDelete
    Replies
    1. Sorry mas saya bukannya pelit berbagi ilmu, dan memang untuk sementera widget di atas tidak di dukung oleh semua template blog dan saya juga tidak tahu pasti apa penyebabnya, mungkin masalahnya ada pada jQuery dan scriptnya.

      Ntar saya perbaiki sehingga bisa digunakan oleh semua template blog dan saya ucapkan terima kasih atas masukannya...!!!

      Delete
    2. Mohon maaf mas atas ketidaknyamanan ini...!!!

      Delete
  3. This comment has been removed by the author.

    ReplyDelete