Cara Menaruh Facebook Like Box Secara Tiba-Tiba

Sudah beberapa trik widget yang saya bagikan untuk memperindah kotak fanpage facebook. Kali ini saya akan membagikan lagi trik tersebut yang di buat oleh para developer facebook. Berbeda dengan widget facebook pop up pada umumnya, widget ini bekerja Popup muncul hanya sekali untuk setiap pengunjung baru. Alamat ip dari pengunjung disimpan dalam cookie browser sehingga ketika pengunjung yang sama mengunjungi blog kamu, tentunya tidak akan membuat blog kamu loadingnya berat/lelet atau lamaaa. 

Tentunya widget ini sudah diatur untuk tidak tampil di setiap halama, kalau tampil di setiap halaman akan menggangu pengunjung blog kita. Widget Ini akan muncul baik di homepage dan sub halaman tergantung halaman yang pengunjung sedang mengakses. Developer widget ini telah mengatur waktu cookie refresh untuk 7 hari, yang berarti bahwa lightbox ini akan muncul lagi untuk pengunjung yang sama setelah 7 hari. Kita dapat dengan mudah mengatur jumlah hari untuk meminta pengunjung tentang halaman Fan Facebook. Mari kita langsung ke proses instalasinya.

1. login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu masukkan kode di bawah ini ke dalam kotak HTML/Javascript.

<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/AVvXsEhULKle9r8EV-ONXAQGpRCCHOOVnOZslBcoEL1mr_PacTwPTvFPitoZAtNNj2Y8yxwvZPOK22CZ9EQsTI08YsOfMcUSRQgY-o8bI5V0PMkGemymEtdPiipReqR3gQbML55E6SV3SypuDvR1/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMEtmqSEw4HnMLQFhm9zIy8vPWdSZC_qG2smS7Eq96RQ7lXMoA150_cU6OARfxprkX_DWyMaTHYEVh8d3LSXPVnm1R3Ptcdz1014rQK_TFbqpKVuYUke0OKejL-2Vl5fz8y-7pesqtmi6o/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhULKle9r8EV-ONXAQGpRCCHOOVnOZslBcoEL1mr_PacTwPTvFPitoZAtNNj2Y8yxwvZPOK22CZ9EQsTI08YsOfMcUSRQgY-o8bI5V0PMkGemymEtdPiipReqR3gQbML55E6SV3SypuDvR1/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhULKle9r8EV-ONXAQGpRCCHOOVnOZslBcoEL1mr_PacTwPTvFPitoZAtNNj2Y8yxwvZPOK22CZ9EQsTI08YsOfMcUSRQgY-o8bI5V0PMkGemymEtdPiipReqR3gQbML55E6SV3SypuDvR1/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMEtmqSEw4HnMLQFhm9zIy8vPWdSZC_qG2smS7Eq96RQ7lXMoA150_cU6OARfxprkX_DWyMaTHYEVh8d3LSXPVnm1R3Ptcdz1014rQK_TFbqpKVuYUke0OKejL-2Vl5fz8y-7pesqtmi6o/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhULKle9r8EV-ONXAQGpRCCHOOVnOZslBcoEL1mr_PacTwPTvFPitoZAtNNj2Y8yxwvZPOK22CZ9EQsTI08YsOfMcUSRQgY-o8bI5V0PMkGemymEtdPiipReqR3gQbML55E6SV3SypuDvR1/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhULKle9r8EV-ONXAQGpRCCHOOVnOZslBcoEL1mr_PacTwPTvFPitoZAtNNj2Y8yxwvZPOK22CZ9EQsTI08YsOfMcUSRQgY-o8bI5V0PMkGemymEtdPiipReqR3gQbML55E6SV3SypuDvR1/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhULKle9r8EV-ONXAQGpRCCHOOVnOZslBcoEL1mr_PacTwPTvFPitoZAtNNj2Y8yxwvZPOK22CZ9EQsTI08YsOfMcUSRQgY-o8bI5V0PMkGemymEtdPiipReqR3gQbML55E6SV3SypuDvR1/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/AVvXsEgc6JQ7YW_7UgO_1Hx0ah6QpMnN5TXUAxmEvayMWMDTb3Pu2Jzbx_VZnUExZd2VfbcgF5xHiSIxcvKvzFd9fvyxT9WejWHyyjsyMhEEBIw6MIzof7SSyP-3jUWCBg4yyzlYIFyid5T4zWEG/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HM2JIYg6F4pVq8YV6_vG6cyHaThADWTESLwEczi05UL9d19-z3JqGw-3xBKbHfhWrTzYCIT18Xe7oHLIsFCkP0-F6J2vKdI3BYn-48LaIAFRS4RK12S-E-uQ0wVzCxglSZPvzhmNn6pA/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#F1F1F1;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#F1F1F1;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhULKle9r8EV-ONXAQGpRCCHOOVnOZslBcoEL1mr_PacTwPTvFPitoZAtNNj2Y8yxwvZPOK22CZ9EQsTI08YsOfMcUSRQgY-o8bI5V0PMkGemymEtdPiipReqR3gQbML55E6SV3SypuDvR1/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-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.1/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/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*7;
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;'>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHJLXBddqRd3zULrdeMAJlmx5fBq1TXtwy-1K21U-h0xgT7m-xtNZ4Zhc1C5aADW9ipKeREplktoslzKotvQ8VB27nnMHL8vvZHn_D5r4w67a8kyPyryLFirffbUx7wlplzW2Kn2mYKmPv/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2hzndi&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:45px; font-size:4px;" ><a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://www.hzndi.blogspot.com/">Tutorial Blog dan SEO »</a> </p>
</div>
</div>

Note :

• Ganti kode hzndi yang berwarna biru, dengan username facebook fanpage kamu.

4. Simpan template dan lihat hasilnya :)

Postingan Terkait:

Posted in: Blogger,Social Bookmarking,Social Sharing,Widget