Membuat Popup jQuery Facebook Fans Page di Blog

Widgets

Facebook fans page? Hal yang sudah tidak asing lagi di telinga para pemilik blog, berbagai macam bentuk dan tampilannya diperlihatkan oleh pemilik blog untuk mempopulerkan blognya di media sosial yang satu ini. Untuk menambah koleksi widget bagi sobat semua, disini saya ingin berbagi tutorial mengenai cara membuat jquery Facebook Fans Page melayang di blog. Pada widget yang satu ini, selain tampilan Facebook Fans Page yang sobat miliki, sobat juga bisa menyisipkan subcription form dari feedburner ke dalamnya. 

Popup Facebook Fan Page ini hanya tampil sekali saja bagi tiap pengunjung blog kita, sebab tentu akan sangat membosankan bila popup ini muncul berulang-ulang kali tiap pageview-nya. Untuk sobat ketahui bahwa pada widget ini, jendela popup ini akan muncul baik di jendela homepage maupun pada postingan blog kita, tergantung darimana pengunjung blog kita melihat blog kita.

Jika sobat tertarik dengan widget yang satu ini, silahkan lihat tutorialnya berikut ini, saya akan bahas sesederhana mungkin agar sobat lebih mengerti dalam menerapkannya pada blog sobat.

Menambah Popup Facebook Fans Page di Blogger

1. Tuju ke Blogger > Tata Letak.

2. Klik Tambahkan Gadget, letaknya terserah sobat.

3. Tambahkan kode berikut kedalamnya.

<style>
/* Jquery Facebook Likebox Popup Version 2.0 by vinspirations.blogspot.com*/
#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/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgohSuGNSOFivOQ4ppmnJ6bhccl1Q3uQ7CQpVYNH4z-o5tHjyZGI3zOFtL_dNq81Cni_mA0LzUUSDs-40n7vrLYwsVY_ERrP0kwFL8V6sfCp7cBwcz6K2qPqU9R8XG8Z36o_sCgdle5vlE/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgohSuGNSOFivOQ4ppmnJ6bhccl1Q3uQ7CQpVYNH4z-o5tHjyZGI3zOFtL_dNq81Cni_mA0LzUUSDs-40n7vrLYwsVY_ERrP0kwFL8V6sfCp7cBwcz6K2qPqU9R8XG8Z36o_sCgdle5vlE/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/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/AVvXsEh6bVtg9crtCUTCxbnW0Xasy5CGbNpd7igdtc4n2kpkQ4MOUhzCGyE5PtirwqYyNaJUUNWFV9YFhYorkyC5vlkCcKFitBB0Ho_THMzVqpv3Ktjpc38Smv5ta1PmdEkQt32Dtlc-yLf9zbE/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOObrJAWZHW26XJA6Tiaz0HtFkv8G0yJw-qKb5qLcC6y9v-CFx4tZ5BCVrn9ujTRF_SuJ5btG-XC-faA-nxDplhuxc2sz4UZcWSo4vF8Hw4__zzcBzjc7S0LysYqWmqE5XwWsKvXjQiyg/s400/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/AVvXsEguOq53q0uf91qwIMTyHS730j9Qq50BNrQYfHr-RKByhXqMjktAvNRvQlFMzzDSjDVzHTV-odZJMab4TlBhnzNIByDYfrpEcLoWCbplWDMIIAlg-nKpUnsa6vo1C7gPiyM3BBEK7D3iASU/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 Version 2.0
/*-----------------------------------------------------------------------------------*/
#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: #F66303;
 font-size: 18px !important;
font-weight: bold;
text-align: center;
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;
}
/* ---------vinspirations Subscribe Form---------- */
.box-title1 {
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
margin: 10px 0;
}
.enteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}
.submitbutton{
background:#F66303;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://sites.google.com/site/vinorichio86/free/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>

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Like Us on Facebook</h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fvinshared&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>
<div class="box-title1 ">
<center>
<h3 style="color:#F66303;">You can also receive Free Email Updates:</h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Vinspirations', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="Vinspirations" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
</div>
<!--Please Do not Remove the Credits -->
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://vinspirations.blogspot.com">Blogger Widgets</a></p>
</div>
</div>

Keterangan :

• Ganti teks yang berwarna kuning denga teks sobat atau biarkan secara default.
• 30 menunjukkan popup muncul sekali lalu akan muncul kembali 30 hari lagi. Setting menjadi 7 jika ingin muncul setelah 7 hari atau 1 jika ingin muncul setiap harinya.
• Ganti vinshared dengan username facebook fans page milik sobat.
• Ganti Vinspirations dengan username feedburner sobat.

4. Simpan, dan selesai!
5. Lihat popup-nya yang muncul pada blog sobat.

Last Words

Demikianlah tutorial tentang cara membuat popup jquery facebook fans page di blog. Akhir kata, semoga artikel ini bermanfaat bagi kita semua. Bila sobat mengalami kesulitan, silahkan sobat sampaikan komentar sobat di bawah. Salam blogging!