PopUp Fb Like Box Dengan JQuery
Membuat pop up Facebook like box dengan jQuery
Hasil tampilannya seperti gambar di bawah :
Codingnya dibuat oleh Mohammad Mustafa Ahmedzai pemilik MyBloggerTricks
"Widget ini tidak selalu muncul pada tiap halaman atau postingan, melainkan hanya sekali saja untuk 1 visitor dengan IP dan browser yang sama. Dan akan muncul selanjutnya 30 hari kemudian, jadi Anda tidak usah khawatir tampilan widget ini akan mengganggu visitor. Widget ini bisa muncul pada halaman utama atau pun postingan, tergantung darimana visitor mengunjungi web Anda. Apabila ingin melihat untuk kedua kalinya, silahkan clear cookies pada browser."
Ke Tahap pembuatan :
1. Login ke Blogger
2. Pada Dasbor anda silahkan tambahkan Widget HTML/JavaScript
3. Masukan kode dibawah ini :
<style>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#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/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYq9qqg2cJX00ib6GP_GtLd54wJ1nko9TYO1xICMBu85vVGiUvob1cDlnT_LJmFwE6m03QFew-uiYiT9NP0kDHGQW59vbnvnCCbNyCOCpP0TYAHwtR_lTmQGp2SUCfqfSGHnUXY2zsBmw/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYq9qqg2cJX00ib6GP_GtLd54wJ1nko9TYO1xICMBu85vVGiUvob1cDlnT_LJmFwE6m03QFew-uiYiT9NP0kDHGQW59vbnvnCCbNyCOCpP0TYAHwtR_lTmQGp2SUCfqfSGHnUXY2zsBmw/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/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/AVvXsEhC8Nti9LJso4VPsl_61zIO1thiPRcY_YTGUFF5gsJelDWXQcCoBqGE0cKYgR7jkwfIVTQMbDD5f-s9AFPKwDef-1PgpVURKduCct0E430f7z2tUAty83m50K-aWj7jFEGNFz8pSrIo3ZQ/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsVtCdQJ7h5QHFKkDQ6Xg4C_AxvLUi1WXIvR99n7uuPVJX4molQ-F7nCO7ITliCfb4bCpL8rqc_-u-SNGknyPTdzfvFTWsTSu1QXGtxZ-VtmpuqkVRq8B0b233gLm6qbT8ZSqAxy8IVNo/s400/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:normal; 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/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/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: #2266BB;
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: 3px 3px 3px #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;
}
</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>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Dapatkan info terbaru via Facebook. Silahkan klik LIKE / SUKA.<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%2Fnewhiday&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>
<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.mybloggertricks.com">Blogger Widgets</a> and <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://dai-detected.blogspot.com/2012/04/popup-fb-like-box-dengan-jquery.html">Blogger Tutorials</a></p>
</div>
</div>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#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/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYq9qqg2cJX00ib6GP_GtLd54wJ1nko9TYO1xICMBu85vVGiUvob1cDlnT_LJmFwE6m03QFew-uiYiT9NP0kDHGQW59vbnvnCCbNyCOCpP0TYAHwtR_lTmQGp2SUCfqfSGHnUXY2zsBmw/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYq9qqg2cJX00ib6GP_GtLd54wJ1nko9TYO1xICMBu85vVGiUvob1cDlnT_LJmFwE6m03QFew-uiYiT9NP0kDHGQW59vbnvnCCbNyCOCpP0TYAHwtR_lTmQGp2SUCfqfSGHnUXY2zsBmw/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/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/AVvXsEhC8Nti9LJso4VPsl_61zIO1thiPRcY_YTGUFF5gsJelDWXQcCoBqGE0cKYgR7jkwfIVTQMbDD5f-s9AFPKwDef-1PgpVURKduCct0E430f7z2tUAty83m50K-aWj7jFEGNFz8pSrIo3ZQ/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsVtCdQJ7h5QHFKkDQ6Xg4C_AxvLUi1WXIvR99n7uuPVJX4molQ-F7nCO7ITliCfb4bCpL8rqc_-u-SNGknyPTdzfvFTWsTSu1QXGtxZ-VtmpuqkVRq8B0b233gLm6qbT8ZSqAxy8IVNo/s400/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:normal; 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/AVvXsEj0cc-tMoRkeCRbGceSZgUPas242PCSiMkhcGsZWpEfQG-qzQQuPhzeh5a-Z8rp20j7ZqLT-16Lmh2wVPVzfs5GCVT-SXmuwnQuGpA2qAqZUe_hVwYVnuWRd7_fmJ9m29d0lWYp99sff1o/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: #2266BB;
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: 3px 3px 3px #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;
}
</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>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Dapatkan info terbaru via Facebook. Silahkan klik LIKE / SUKA.<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%2Fnewhiday&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>
<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.mybloggertricks.com">Blogger Widgets</a> and <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://dai-detected.blogspot.com/2012/04/popup-fb-like-box-dengan-jquery.html">Blogger Tutorials</a></p>
</div>
</div>
4. Ganti newhiday dengan usename Anda.
5. Save
Ditulis Oleh : Dai-detected ~ Newbie Was Here
Anda sedang membaca sebuah artikel yang berjudul PopUp Fb Like Box Dengan JQuery,, Terimakasih atas kunjungan Anda serta kesediaan Anda untuk membaca artikel Diatas. Semoga artikel tersebut bermanfaat untuk anda ....
Fildena Espana
BalasHapusLasix Furosemide
Vilitra 40
Cenforce 100