December 11, 2014

Code popup cho blogspot

Tổng hợp Code popup cho blogspot 

Tổng hợp các Code Popup Javascripts quảng cáo cho website Ưu điểm cái này mình thích là dùng jquery nên có vẻ mượt mà và load nhẹ hơn tốt cho seo


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


Hôm nay SEO Khương 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é


Biểu tượng cảm xúcBiểu tượng cảm xúc