Facebook fans page? Hal yang sudah tidak absurd lagi di indera pendengaran para pemilik blog, aneka macam macam bentuk dan tampilannya diperlihatkan oleh pemilik blog untuk mempopulerkan blognya di media umum yang satu ini. Untuk menambah koleksi widget bagi teman semua, disini aku ingin membuatkan tutorial mengenai cara menciptakan jquery Facebook Fans Page melayang di blog. Pada widget yang satu ini, selain tampilan Facebook Fans Page yang teman miliki, teman juga dapat menyisipkan subcription form dari feedburner ke dalamnya.
Popup Facebook Fan Page ini hanya tampil sekali saja bagi tiap pengunjung blog kita, lantaran tentu akan sangat membosankan bila popup ini muncul berulang-ulang kali tiap pageview-nya. Untuk teman 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 teman tertarik dengan widget yang satu ini, silahkan lihat tutorialnya berikut ini, aku akan bahas sesederhana mungkin semoga teman 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 arahan 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/AVvXsEh7S5cISrVkAomeiA3aiNUAmRfTdw4HRcKnhcsv3qPUFQXueYIlwFm9BonM9y1sV6xIvsRs7OSYuCo2xJ0YTW-s6dZHjLpMFIeiB8Iz1qqqXtd-jTKjeREwvGCwgrT7SzKSPYTPbSscTz0/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmOkeOA4QdYJ25LpfXCLtfbqMlt5U9XqJRJYQ73c3qoUUbnAccDJ6otrrujdBFRhMae7ouTe7pyV-H0NLTKS4vYgXMTYdXpkk4ulcmU4THoRN16s-W8-J_tR3gsEjEppUOPOTeL1ZAgyw/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7S5cISrVkAomeiA3aiNUAmRfTdw4HRcKnhcsv3qPUFQXueYIlwFm9BonM9y1sV6xIvsRs7OSYuCo2xJ0YTW-s6dZHjLpMFIeiB8Iz1qqqXtd-jTKjeREwvGCwgrT7SzKSPYTPbSscTz0/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7S5cISrVkAomeiA3aiNUAmRfTdw4HRcKnhcsv3qPUFQXueYIlwFm9BonM9y1sV6xIvsRs7OSYuCo2xJ0YTW-s6dZHjLpMFIeiB8Iz1qqqXtd-jTKjeREwvGCwgrT7SzKSPYTPbSscTz0/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmOkeOA4QdYJ25LpfXCLtfbqMlt5U9XqJRJYQ73c3qoUUbnAccDJ6otrrujdBFRhMae7ouTe7pyV-H0NLTKS4vYgXMTYdXpkk4ulcmU4THoRN16s-W8-J_tR3gsEjEppUOPOTeL1ZAgyw/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7S5cISrVkAomeiA3aiNUAmRfTdw4HRcKnhcsv3qPUFQXueYIlwFm9BonM9y1sV6xIvsRs7OSYuCo2xJ0YTW-s6dZHjLpMFIeiB8Iz1qqqXtd-jTKjeREwvGCwgrT7SzKSPYTPbSscTz0/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7S5cISrVkAomeiA3aiNUAmRfTdw4HRcKnhcsv3qPUFQXueYIlwFm9BonM9y1sV6xIvsRs7OSYuCo2xJ0YTW-s6dZHjLpMFIeiB8Iz1qqqXtd-jTKjeREwvGCwgrT7SzKSPYTPbSscTz0/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7S5cISrVkAomeiA3aiNUAmRfTdw4HRcKnhcsv3qPUFQXueYIlwFm9BonM9y1sV6xIvsRs7OSYuCo2xJ0YTW-s6dZHjLpMFIeiB8Iz1qqqXtd-jTKjeREwvGCwgrT7SzKSPYTPbSscTz0/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/AVvXsEjiDVHywoMUrCesueGcNsW3ZR_0y3PU_cSygvrjKvR6m4i5FvV9NGl5qrjTzfi26NeFqoPbN1dELQD1EAOTVdECOkr3ezVl_DuozpjlwHfg49W_3SXKogkk9x7JjuPPnGH-m8X-0d_874g/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQO317rxQb2Rad8Jbx0UWHQFAqaeR3Wp9Da-OFSAvoz5whgccECX2RYM4CnFDbcgs72ijw1YNlOpLxnkct2Tfl-ptlH1krqYkO2w9gVDLyte6RqjVcteBe3J-HuJQIVZzTdX65MPN_HCE/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/AVvXsEh7S5cISrVkAomeiA3aiNUAmRfTdw4HRcKnhcsv3qPUFQXueYIlwFm9BonM9y1sV6xIvsRs7OSYuCo2xJ0YTW-s6dZHjLpMFIeiB8Iz1qqqXtd-jTKjeREwvGCwgrT7SzKSPYTPbSscTz0/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&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&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 == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" 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="https://wikijos.blogspot.com/">Blogger Widgets</a></p>
</div>
</div>
Keterangan :
- Ganti teks yang berwarna kuning denga teks teman atau biarkan secara default.
- 30 mengatakan popup muncul sekali kemudian akan muncul kembali 30 hari lagi. Setting menjadi 7 kalau ingin muncul sehabis 7 hari atau 1 kalau ingin muncul setiap harinya.
- Ganti vinshared dengan username facebook fans page milik sobat.
- Ganti Vinspirations dengan username feedburner sobat.
5. Lihat popup-nya yang muncul pada blog sobat.
Last Words
Demikianlah tutorial perihal cara menciptakan popup jquery facebook fans page di blog. Akhir kata, semoga artikel ini bermanfaat bagi kita semua. Bila teman mengalami kesulitan, silahkan teman sampaikan komentar teman di bawah. Salam blogging!
