 |
| Pop Up Melayang |
Sering kalo Kita Buka Blog dibuat gak nyaman dan membuat kita tak betah di blog itu dikarenakan adanya pop up yang melayang melayang yang berisi iklan atau anjuran like facebook dan pop up itu terus muncul saat kita membuka halaman demi halaman, Tapi Pada Kali ini saya mempunyai sebuah script dimana nanti di blog kita akan muncul pop up melayang yang hanya muncul saat pertama kali membuka blog kita dan untuk halaman seterusnya atau saat membuka halaman lain lagi pop up ini tidak muncul . demonya Silahkan Saja Di Blog Ini : http://pokoe.blogspot.com/
Nah Kalo Anda Tertarik Memasangnya Di blog anda caranya juga cukup simple dan mudah tanpa menambahkan css dan tetek bengek lainya , cukup hanya menambahakn kode dibawah ini di gadget / elemen laman blog anda , pilih html/javascript dan masukan kode berikut :
<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/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin9gWq1yZ6dPP3f91pMzA7iSsgzlBL036deZYG_ltkEDD-bnr-cAJuz_Zi04W0ZRpbZWxZ1YwUL2VZZ9QXwdakBRDwzU54M-A0jDzBDyeRR4kw0iOOuKr-8euUbLwEsu72Sqiq9GHGRW0/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin9gWq1yZ6dPP3f91pMzA7iSsgzlBL036deZYG_ltkEDD-bnr-cAJuz_Zi04W0ZRpbZWxZ1YwUL2VZZ9QXwdakBRDwzU54M-A0jDzBDyeRR4kw0iOOuKr-8euUbLwEsu72Sqiq9GHGRW0/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/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/AVvXsEgYhFSFDOosDvTj1v_qjfT91tH4M4KzTOPWDy6pwIGlHjs5uUCN7nK1cjLFBJIlAB0XYsZY1EA4Mu5kIJ7UMo-aKxG8sHtVjN0ZqyVD19eh09XbZbZhjQ8wC_MVj47vq5QxOOb6dQqQ2ks/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUvRvauhlu7-PEDJAvnAPkpSGu93zKXWkpjfe2Pcnvijvit4eSq0YjQkekdTL4w7VA5ftEQ06aAJK6TTrurmRJnDApdjtQaD2apa9W7GHyAOoryv-xNkgG_6Kjw7JZaENTPSAda_q9jfo/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/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/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: 20px !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;
}
</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 update terbaru kami, klik suka / like dibawah<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%2FContohSurat&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>
</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/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin9gWq1yZ6dPP3f91pMzA7iSsgzlBL036deZYG_ltkEDD-bnr-cAJuz_Zi04W0ZRpbZWxZ1YwUL2VZZ9QXwdakBRDwzU54M-A0jDzBDyeRR4kw0iOOuKr-8euUbLwEsu72Sqiq9GHGRW0/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin9gWq1yZ6dPP3f91pMzA7iSsgzlBL036deZYG_ltkEDD-bnr-cAJuz_Zi04W0ZRpbZWxZ1YwUL2VZZ9QXwdakBRDwzU54M-A0jDzBDyeRR4kw0iOOuKr-8euUbLwEsu72Sqiq9GHGRW0/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/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/AVvXsEgYhFSFDOosDvTj1v_qjfT91tH4M4KzTOPWDy6pwIGlHjs5uUCN7nK1cjLFBJIlAB0XYsZY1EA4Mu5kIJ7UMo-aKxG8sHtVjN0ZqyVD19eh09XbZbZhjQ8wC_MVj47vq5QxOOb6dQqQ2ks/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUvRvauhlu7-PEDJAvnAPkpSGu93zKXWkpjfe2Pcnvijvit4eSq0YjQkekdTL4w7VA5ftEQ06aAJK6TTrurmRJnDApdjtQaD2apa9W7GHyAOoryv-xNkgG_6Kjw7JZaENTPSAda_q9jfo/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/AVvXsEh1ybDg2mYEN2i75p_byFvGSdovbqrA8hy7waguMZyljousapQRioGVH17EQGEBwn0XiP3We8EwnWxIqtN0dMHGayKTdcgImO6aSrcGVcD27BwOiGHDxrYXupbGcE5rpOg1GAed0dE0Lvk/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: 20px !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;
}
</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 update terbaru kami, klik suka / like dibawah<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%2FContohSurat&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>
</div>
Ganti Tulisan Berwarna Merah Sesuka Anda . Juga Ganti url facebook dengan punya Anda. Jika Ingin Mengisi Kotak Tersebut dengan iklan atau lainya ganti kode yang berwarna hijau dengan kode html anda
--- Share Yaa Bro ----
Hubungi saya jika Anda menemukan konten yang rusak, aneh atau tidak berhasil Anda terapkan. Silahkan beritahu kami dengan klik : Contact Me! . Kami akan berusaha membalas atau memperbaiki konten secepatnya. Terima Kasih.
15komentar:
it works !!! kalo gak percaya liat blogku
yui ..
coba buka pake pc laen , atau hapus chace di browser dulu
pendidikan islam
http://alfajarcyber.blogspot.com
http://rafivadra.blogspot.com
Post a Comment