Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Tạo popup ẩn hiện ở góc màn hình trong Blogspot

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi taphanghai, 13/10/16.

Lượt xem: 2,028

  1. taphanghai Mới đăng kí

    Trong bài viết này mình chia sẻ lại một kiểu popup được các admin web sử dụng khá nhiều là quảng cáo popup ẩn hiện ở góc màn hình bên trái hoặc bên phải website, có khá nhiều bài chia sẻ về code này, ở đây mình chỉ chia sẻ lại cho các bạn mới bước chân vào tìm hiểu blogspot tham khảo và sử dụng.

    Demo:
    [​IMG]
    Demo popup quảng cáo ẩn hiện ở góc màn hình

    Cách làm:
    Đăng nhập vào trang quản trị blogspot
    Bạn chèn đoạn code popup sau vào Mẫu
    Đăng nhập => Mẫu => Chỉnh sửa HTML => tìm thẻ </body> và chèn đoạn code:
    Code:
    <style type="text/css">
    #fl813691{position:fixed;z-index:9999;right:0;border-radius:4px 4px 0 0;bottom:0;padding:2px;background:#4e4d4d}
    #eb951855{width:300px;position:relative} //Chiều rộng quảng cáo
    #coh963846{color:#690;display:block;height:20px;line-height:20px;font-size:11px;width:100%}
    #coh963846 a{color:#690;text-decoration:none}
    #coc67178{float:right;padding:0;margin:0;list-style:none;overflow:hidden;height:15px}
    #coc67178 li{display:inline}
    #coc67178 li a{background-image:url(https://4.bp.
    	
    blogspot.com/-53EJchH_4Bw/T2L-dTcqXNI/AAAAAAAAAng/RYJUMdSQLPQ/s1600/closebutton-namkna.gif);background-repeat:no-repeat;width:30px;height:0;padding-top:15px;overflow:hidden;float:left}
    #coc67178 li a.close{background-position:0 0}
    #coc67178 li a.close:hover{background-position:0 -15px}
    #coc67178 li a.min{background-position:-30px 0}
    #coc67178 li a.min:hover{background-position:-30px -15px}
    #coc67178 li a.max{background-position:-60px 0}
    #coc67178 li a.max:hover{background-position:-60px -15px}
    #co453569{display:block;width:100%;height:100%;position:absolute;z-index:9999}
    </style>
    <div id="fl813691">
    <div id="eb951855">
    <div id="cob263512">
    <div id="coh963846">
    <ul id="coc67178">
    <li id="pf204652hide">
    <a class="min" href="javascript:pf204652clickhide();" title="Ẩn  đi">Ẩn</a></li>
    <li id="pf204652show" style="display: none;">
    <a class="max" href="javascript:pf204652clickshow();" title="Hiện  lại">Xem </a></li>
    </ul>
    </div>
    <div id="co453569">
    <!-- code ads -->
    <img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg"/>
    <!-- code ads -->
    <script>     
    //<![CDATA[
    pf204652bottomLayer = document.getElementById('fl813691');   
    var pf204652IntervalId = 0;   
    var pf204652maxHeight = 250;//Chieu cao khung quang cao     
    var pf204652minHeight = 20;   
    var pf204652curHeight = 0;   
    function pf204652show(){pf204652curHeight+=2,pf204652curHeight>pf204652maxHeight&&clearInterval(pf204652IntervalId),pf204652bottomLayer.style.height=pf204652curHeight+"px"}function pf204652hide(){pf204652curHeight-=3,pf204652curHeight<pf204652minHeight&&clearInterval(pf204652IntervalId),pf204652bottomLayer.style.height=pf204652curHeight+"px"}function pf204652clickhide(){document.getElementById("pf204652hide").style.display="none",document.getElementById("pf204652show").style.display="inline",pf204652IntervalId=setInterval("pf204652hide()",5)}function pf204652clickshow(){document.getElementById("pf204652hide").style.display="inline",document.getElementById("pf204652show").style.display="none",pf204652IntervalId=setInterval("pf204652show()",5)}function pf204652clickclose(){document.body.style.marginBottom="0px",pf204652bottomLayer.style.display="none"}pf204652IntervalId=setInterval("pf204652show()",5);
    //]]> 
    </script>
    </div>
    </div>
    </div>
    </div>
    
    Bạn cũng có thể chèn đoạn code trên vào phần Bố cục Blog
    Đăng nhập => Bố cục => Tạo tiện ích HTML/Javacript => Paste đoạn code trên.
    Lưu ý:
    Bạn thay đoạn code quảng cáo demo màu đỏ thành quảng cáo bạn muốn hiển thị, ví dụ như 1 ảnh quảng cáo, 1 video quảng cáo, hoặc 1 đoạn flash.
    Bạn cũng có thể tùy chỉnh chiều cao và kích thước quảng cáo theo chú thích code tôi đã chú thích.
    Chúc bạn thành công.

    Trích từ: Share123.vn

  2. maybaogoqd

    maybaogoqd Banned

    e k làm đc ạ....
  3. taphanghai

    taphanghai Mới đăng kí

    @maybaogoqd bạn có thể vào link , để copy và hướng dẫn cho chuẩn đoạn code, trên này đôi khi bị lỗi lúc mình paste vào.

Ủng hộ diễn đàn