Cara Membuat Widget PopUp Facebook Like Box

Cara Membuat Widget PopUp Facebook Like Box
hai sobat, kali ini saya akan posting mengenai sebuah widget yang dapat meningkatkan likers blog anda. its okey mari kita simak!

langkah-langkahnya adalah :
1. Login ke Dashboard blog anda
2. masuk ke halaman Tata Letak
3. Pilih posisi yang anda inginkan lalu klik HTML/Javascript
dan masukan kode dibawah ini :

<style>
/*
ColorBox Core Style:
Ini kode css biasa silahkan ubah jika anda mau merubah desain tampilannya @ http://yoshiwafa.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/AVvXsEhtG52uPoX5HH8XdLFKELfV8CQOD90DkVf1fnY8Pkz22kY_Asgpik37K4ju0O5fuvhGRu2D4PZxQwrgARZ2HnFgcSPoJE9H7L1SoQhdBcHXC1cVW58YOMK6QYcubWQfl2IYdizD0onz85bj/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxIoRBS7m8j_QlHZis23baz2quf7dgcD4zuV37OQuRYeOUTy8LT9hnHi3rEP_lVkpFrCTAxP7HCh_nMRItD8vCUI7U6uRuDEF4126s3-YDZPHgtmGJfqh2JNcRaOsBFI_A-ADUe-fV54Fj/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtG52uPoX5HH8XdLFKELfV8CQOD90DkVf1fnY8Pkz22kY_Asgpik37K4ju0O5fuvhGRu2D4PZxQwrgARZ2HnFgcSPoJE9H7L1SoQhdBcHXC1cVW58YOMK6QYcubWQfl2IYdizD0onz85bj/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtG52uPoX5HH8XdLFKELfV8CQOD90DkVf1fnY8Pkz22kY_Asgpik37K4ju0O5fuvhGRu2D4PZxQwrgARZ2HnFgcSPoJE9H7L1SoQhdBcHXC1cVW58YOMK6QYcubWQfl2IYdizD0onz85bj/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxIoRBS7m8j_QlHZis23baz2quf7dgcD4zuV37OQuRYeOUTy8LT9hnHi3rEP_lVkpFrCTAxP7HCh_nMRItD8vCUI7U6uRuDEF4126s3-YDZPHgtmGJfqh2JNcRaOsBFI_A-ADUe-fV54Fj/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtG52uPoX5HH8XdLFKELfV8CQOD90DkVf1fnY8Pkz22kY_Asgpik37K4ju0O5fuvhGRu2D4PZxQwrgARZ2HnFgcSPoJE9H7L1SoQhdBcHXC1cVW58YOMK6QYcubWQfl2IYdizD0onz85bj/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtG52uPoX5HH8XdLFKELfV8CQOD90DkVf1fnY8Pkz22kY_Asgpik37K4ju0O5fuvhGRu2D4PZxQwrgARZ2HnFgcSPoJE9H7L1SoQhdBcHXC1cVW58YOMK6QYcubWQfl2IYdizD0onz85bj/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtG52uPoX5HH8XdLFKELfV8CQOD90DkVf1fnY8Pkz22kY_Asgpik37K4ju0O5fuvhGRu2D4PZxQwrgARZ2HnFgcSPoJE9H7L1SoQhdBcHXC1cVW58YOMK6QYcubWQfl2IYdizD0onz85bj/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/AVvXsEi9tPH0ein0lToi8EjyKHyNPMmGd_4Yg4pR2lTxWstAiyngATsb8wr0w5iAyD2Pz16n80xpAw-9bTN0cTAe8N-xWNOCnlGgc_uff91SA-2dpjCp3b9lftoX7q0UB__xORjrmrBZuCZRR3-J/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYsn4YlmA6kj2vT6iWUIRSMB3neZ1zzvEgDtI1bMfYbNUPk1N-gE3accoJrexc9WyDnl2Ud70hMoP_rf3R8GdU8EYq-Yfmqp-auD9Xc2W9KjJkTS8KAYUo11SVCELqJFpjBDYGZYki3nH6/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/AVvXsEhtG52uPoX5HH8XdLFKELfV8CQOD90DkVf1fnY8Pkz22kY_Asgpik37K4ju0O5fuvhGRu2D4PZxQwrgARZ2HnFgcSPoJE9H7L1SoQhdBcHXC1cVW58YOMK6QYcubWQfl2IYdizD0onz85bj/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: #3B5998;
font-size: 16px !important;
font-weight: bold;
margin: 5px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:5px;
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.5/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=false') == -1) {
var fifteenDays = 0;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"350px", height:"470px", overflow:"none", 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;'>
<h3 class="box-title">
<center>Mohon Di Like dan Follow dulu, Sobat!<br/>
Terima Kasih Banyak</center>
<center><p style="line-height:3px;" ></p></center></h3>
<center>
<small>Tunggu sampai tombol Like dan Follow muncul</small><br/><br/>
<a href="https://twitter.com/alfymaghfira" class="twitter-follow-button" data-show-count="true" data-size="large" data-show-screen-name="false">Follow @alfymaghfira</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FAKSES-DATA-SERU%2F155520387963295&amp;width=292&amp;height=290&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:290px;" allowtransparency="true"></iframe><br/>
<small><b>Klik sembarang atau klik tanda silang [x] untuk menutup</b></small>
</center>
</div>
</div>

warna merah ganti dengan user twitter anda, sama hal nya dengan warna biru
warna hijau ganti dengan kode plug in like halaman FB anda
 Klik SIMPAN!

terimakasih :)


Referensi : Komputer Media

Cara Membuat Widget PopUp Facebook Like Box 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.

Share 'Cara Membuat Widget PopUp Facebook Like Box' On ...

Artikel yang baru saja Anda baca berkategori Teknologi / Tutorial dengan judul Cara Membuat Widget PopUp Facebook Like Box. Anda bisa bookmark halaman ini dengan URL http://aksesdataseru.blogspot.com/2013/06/cara-membuat-widget-popup-facebook-like.html. Terima kasih!

Ditulis oleh: Alfy Maghfira - Sunday 9 June 2013