Code popup cho blogspot - Code popup cho blogspot
Chú ý: code popup chỉ hiện 1 lần duy nhất thôi nhé nên không gây phiền hà cho người dùng, cái này có thể thêm được like cho trang của bạn hoặc một quảng cáo cho chương trình quảng cáo rất hay
Có thể bạn cần xem bài này
code blogspot hiện lable widget trong blogspot theo ý mình
Các bạn hay bắt gặp như hình này
Hôm nay KHÁM PHÁ BLOGSPOT mình sẽ giới thiệu cho các bạn CÁCH LÀM POPUP CHO BLOGSPOT
B1 : thêm thư viện jquery vào giữa cặp thẻ HEAD
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
B2: thêm style css.
<style>
#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;}
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{}
#cboxLoadingOverlay{background:url(http://3.bp.blogspot.com/-7VRvnW_MUSw/TwRGXjXjloI/AAAAAAAACM0/5K-J5jgkxo4/s1600/%255Bwww.gj37765.blogspot.com%255Dloadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(http://3.bp.blogspot.com/-xjj51r2lm2M/TwRGaKezqHI/AAAAAAAACNI/lKX9_-YUUdY/s1600/%255Bwww.gj37765.blogspot.com%255Dloading.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(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.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;}
#mdfb {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#mdfb a,
#mdfb a:hover,
#mdfb a:visited {
text-decoration:none;
}
.mdbox-title {
background:#000;
color: #fff;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:20px 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;
}
.mdbox-tagline {
color: #999;
margin: 0;
text-align: center;
}
#mdsubs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}</style>
B3: Thêm java script
<script type="text/javascript">
$(function() {
if (document.cookie.indexOf('visited=flase') == -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:"#mdfb"});
}
}); </script>
B4 Thêm nội dung khi hiển thị bật lên
<div style='display:none'>
<div id='mdfb' style='padding:10px; background:#fff;'>
<center>
helo nhúng gì đó vào đây
</center>
</div></div>
<style>#cboxClose{display:none;}</style>
Chỉ có thế thôi. các bạn thắc mắc để lại comment nhé
{ 0 nhận xét... read them below or add one }
Đăng nhận xét