Membuat Like Box Pop Up Facebook Page

Label:
Hay sobat blogger, beginilah nasib newbie hahaha tidak ada pengunjung yang comen hehehe. oke hari ini begitu sangat menjengkelkan, banjir melanda andir dan sekitarnya ;). tapi gak papa lah, dari pada bingung, mending ngupdate blog dulu ajah, hahaha mungkin bagi newbie yang ingin Fp nya dilikin trick ini tidak salah untuk dicoba, like box pop up adalah like box yang berada saat kita membuka blogspot kita , muncul sebuah pop up yang menuntun untuk like fb dan follow twittter. mau? WANI PIRO? hahaha oke chek it dot




Copy code berikut

<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/AVvXsEhYcdGomevf7kYE_hwzUR1ikE9LkjUFSVuOAnWGRP4XquSUtcXSoAbK9LLbE9-AbK87DoC2CXUgRaaJYVvYrsTw1EK_Adi8XmhCAMQElX-T_BWNdWpqAg8VbVfH0We3Y3iAshwhHECeX2r_/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXQlFWb9fkaImlAnen7YdrT3rkWqrekE4kq6sft87TekBi8ZEppjZYldt4HhLTXAewKXi-T8vKomeqfgGGPDZ-7LlLOO2O2uHAj5ruQeMACiHvrWGk_5LW3PRkxQMdap-c5t-mvDVp4vb_/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYcdGomevf7kYE_hwzUR1ikE9LkjUFSVuOAnWGRP4XquSUtcXSoAbK9LLbE9-AbK87DoC2CXUgRaaJYVvYrsTw1EK_Adi8XmhCAMQElX-T_BWNdWpqAg8VbVfH0We3Y3iAshwhHECeX2r_/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYcdGomevf7kYE_hwzUR1ikE9LkjUFSVuOAnWGRP4XquSUtcXSoAbK9LLbE9-AbK87DoC2CXUgRaaJYVvYrsTw1EK_Adi8XmhCAMQElX-T_BWNdWpqAg8VbVfH0We3Y3iAshwhHECeX2r_/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXQlFWb9fkaImlAnen7YdrT3rkWqrekE4kq6sft87TekBi8ZEppjZYldt4HhLTXAewKXi-T8vKomeqfgGGPDZ-7LlLOO2O2uHAj5ruQeMACiHvrWGk_5LW3PRkxQMdap-c5t-mvDVp4vb_/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYcdGomevf7kYE_hwzUR1ikE9LkjUFSVuOAnWGRP4XquSUtcXSoAbK9LLbE9-AbK87DoC2CXUgRaaJYVvYrsTw1EK_Adi8XmhCAMQElX-T_BWNdWpqAg8VbVfH0We3Y3iAshwhHECeX2r_/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYcdGomevf7kYE_hwzUR1ikE9LkjUFSVuOAnWGRP4XquSUtcXSoAbK9LLbE9-AbK87DoC2CXUgRaaJYVvYrsTw1EK_Adi8XmhCAMQElX-T_BWNdWpqAg8VbVfH0We3Y3iAshwhHECeX2r_/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYcdGomevf7kYE_hwzUR1ikE9LkjUFSVuOAnWGRP4XquSUtcXSoAbK9LLbE9-AbK87DoC2CXUgRaaJYVvYrsTw1EK_Adi8XmhCAMQElX-T_BWNdWpqAg8VbVfH0We3Y3iAshwhHECeX2r_/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/AVvXsEh5RiwYvqo1tvrHuBgEJBXcivz9z5VpVOcwcCuoykcZSnwnb5KHBqb7npsyr6USMLevjUw-kGBwQ8ppkxvA5sLuFXGJjecAIi_uvtTS0WDu_6rgO083XLW1383bv5TtcT8JGqE-uqjhsqTM/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfWX_UnIbXc1U_A1Z4HTGA4y1zyXuFDBvhU-4lTs6jACFCYu4Mho5yAIB6RMBNceH1LI7aTwlkNoIpw2m0fFCwismzxkTAV8XZGg2T_p73J7jiBFb2blcCM1qaju4M16UkveBHQJV3ogB6/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/AVvXsEhYcdGomevf7kYE_hwzUR1ikE9LkjUFSVuOAnWGRP4XquSUtcXSoAbK9LLbE9-AbK87DoC2CXUgRaaJYVvYrsTw1EK_Adi8XmhCAMQElX-T_BWNdWpqAg8VbVfH0We3Y3iAshwhHECeX2r_/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>Di Like dan Follow Ya Sahabat<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/andrycyber619" class="twitter-follow-button" data-show-count="true" data-size="large" data-show-screen-name="false">Follow @and_mysterio</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%2FKomputer-Media%2F187547511295803%3Fref%3Dhl&amp;width=292&amp;height=200&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:200px;" allowtransparency="true"></iframe><br/>
<small><b>Klik sembarang atau klik tanda silang [x] untuk menutup</b></small><a href=http://andricyber.blogspot.com> LIKE </a>
</center>
</div>
</div>

Nah setelah itu masuk ke blogger dan Klick tataletak >> Tambahkan Widget >> Html / Java script

NOTE:
Warna biru buat code like box di FP kamu, warna merah buat username twitter kamu.


Terima kasih

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)