BLOG URANG SUNDA: Membuat Popup Likebok Facebook Dengan JQuery Untuk Blog

Ketika saya sedang main di rumah paman eh saya lihat Poup Likebok Facebook alias likebok facebook melayang ketika pengunjung masuk ke web atau blog kita, saya jadi tertarik dengan itu dan saya ingin berbagi dengan teman-teman semua terutama pengunjung setia blog urang sunda ini. Namun kode ini saya edit sedikit menambahkan berlangganan lewat rss ped lewat email. langsung saja yah kita bahas ke topik.

Masuk atau login ke akun blog sobat

Dari dasbor klik rancangan terus klik tambag gadget => html/ javascript

Dan selanjutnya simpan kode di bawah ini. Maf sob kodenya lumayan panjang.

<style>
/* Jquery Facebook Likebox Popup by THEANT http://theant-budiana.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;}
/*
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/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIrQcai4QqEIo6S7dUYEwN6BZm0pWpo4rh_1Vmvt5QVhuAAnjadAfTYPi_2keBaeZHit0Iy34V_gkAIzLe85_pvP8d_fJRt5ATQhWUYks6Udafurdd0JQAS11o3dbb7PTAo_PreGSuBWQ/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIrQcai4QqEIo6S7dUYEwN6BZm0pWpo4rh_1Vmvt5QVhuAAnjadAfTYPi_2keBaeZHit0Iy34V_gkAIzLe85_pvP8d_fJRt5ATQhWUYks6Udafurdd0JQAS11o3dbb7PTAo_PreGSuBWQ/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/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/AVvXsEhpN1_Sp8WTOf69DwiFTE_npqtrESe5J2atGoaylJa_rcW27x9oDCrPH1uQQL5N0r7fFt_1_NVyGLpIEco9iDv2PJV_TLShB3c8CM3nuA0fmsprH_S5-Hh4xji-eSx58kKLog7yr8uk7z4/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKU5Fo32DuHEN43dlhEWRm3AdlNux74D_t8HcUlPjVVpEci9nvMzI1dJ8Zar864bw3s81goMPEttP8tGVVxS1I31S7ZEV6JCs7JgPN3E0euH6GWy1OOEG-tb9vBooS6IQKRrx7rLaM0Uw/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/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/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-title {
color: #F66303;
font-size: 18px !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;
}
/* ---------THEANT 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="http://mybloggertricks.googlecode.com/files/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"> Menerima semua pembaruan melalui Facebook.Hanya Klik Tombol Like Di bawah <center><p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftheants.blog&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;"> Anda juga dapat menerima artikel lewat Email Gratis: </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=bdXld', '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="bdXld" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
</div>

<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.theant-budiana.com">Blogger Widgets</a></p>
</div>
</div>

Catatan :

Ganti tulisan yang saya blok merah pada kode di atas dengan nama pengguna halaman facebook anda biasanya seperti ini punya saya http://www.facebook.com/theants.blog ambil dari akhiran url-nya.

Lihat lagi pada kode di atas sobat bisa lihat kode yang saya blok kuning itu adalah akhiran judul fed anda liahat url rss fed punya saya http://feeds.feedburner.com/blogspot/bdXld ambil dari akhiran url-nya.

Kode di atas saya rancang khusus alias akan tampil satu kali kepada pengunjung dan akan tampil lagi sebulan kemudian dan jika anda ingin mengubahnya menjadi satuminggu sekali sobat ganti tulisan yang saya blok biru *30 menjadi *7 dan kalo sobat ingin menampilkan tiap hari sobat ganti menjadi *1 catatan penting jika sobat menampilkan terlalu sering akan membuat pengunjung setia blog kita kesal dengan adanya popup tersebut.

Cukup sampai disini dulu postingan mengenai bagaimana membuat popup likebok facebook dan rss fed dengan jquery untuk blog atau cara membuat likebok facebook tampil melayang dan muncul ketika blog di buka. Jika sobat ingin mempostingkannya di blog sobat silahkan, asalkan cantumkan sumber halaman ini terimakasih atas penghargaan terhadap tulisan saya.

Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya

Kindly Bookmark this Post using your favorite Bookmarking service:

warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.