Share123.vn thông báo: Kể từ ngày 01/03/2019 chúng tôi sẽ chuyển hệ thống sang Webseo.com.vn, quý khách mua Template blogspot đẹp có thể truy cập vào hệ thống mới tại đây
Đăng bởi Huy Tập lúc 13/10/16 2
Trước đây mình đã chia sẻ một số bài viết về popup trên website ví dụ popup hiện giữa quảng cáo giữa màn hình, hay popup hiện quảng cáo hiện ẩn ở góc màn hình khi khách click vào một bài viết bất 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:
Tạo popup quảng cáo ẩn hiện ở góc màn hình
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:
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp1t84eAxoEFdhjFJELIhC1n5-0VpA1wbUNqVXJqYrbB5heiL1SgwUUpEABjP_IRDSHTTAnmcP3-_RFOYBII9Nt2ExS8smpLQ8Yft4evOvRbfRRRYj7BlIbam1iU6RdNBF4bkOD43fL7A/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.

Tags:

2 nhận xét:

  1. Anh cho em hỏi nếu chỉ muốn hiển thị quảng cáo trên Pc mà không hiện trên mobile thì làm như nào. Em xin cảm ơn

    Trả lờiXóa
    Trả lời
    1. bạn chỉ cần ẩn nó đi bằng css, ví dụ bạn muốn ẩn từ màn hình < 480px, bạn thêm 1 đoạn @media screen and (max-width:480px) {#pf204652hide {display:none;}}

      Xóa

Lưu ý: Khi để lại Nhận xét bạn nên click vào ô "Thông báo cho tôi" ở dưới để nhận phản hồi từ Admin

Tag liên kết

Đó chưa phải tất cả ... Chúng tôi còn 100 mẫu blog đẹp khác. View all Mẫu Template Blogger

Hãy nhanh tay gọi điện ngay đến chúng tôi theo số 0988227905 hoặc đặt hàng thiết kế ngay hôm nay theo mẫu form bên dưới.

Chúng tôi sẽ hoàn thành trong thời gian sớm nhất cho quý khách

Hãy truy cập để trải nghiệm dịch vụ của chúng tôi
Đã có
lượt Khách Hàng quan tâm đến dịch vụ của chúng tôi

Sử dụng nội dung ở trang này và dịch vụ tại Share123.vn có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách phát triển của chúng tôi.

www.Share123.vn - Website chuyên thiết kế blogspot, zip blogger, thiết kế blog chuẩn seo, blogger responsive, Thủ thuật Blogspot, Free Template Blogspot, kho giao diện blog đẹp, premium template blogger, free template blogger, Với kinh nghiệm nhiều năm trong nghề thiết kế Temple, design skin web chúng tôi cam kết tạo ra những sản phẩm chất lượng, tối ưu đến tay người dùng, thiết kế theo yêu cầu của quý khách, cùng đội ngủ support chuyên nghiệp nhiệt tình, ...

Copyright 2013 © Share123.vn - Blogger Team. All right Reserved - Hotline: 0988.227.905 - Email: nguyenhuytap@gmail.com - website: www.share123.vn

0988227905
Floating Image X