Hướng dẫn chèn khung quảng cáo dưới góc màn hình

(iCOM) Khi bạn vào những website lớn, đặc biệt là những website về công nghệ, thường thấy có 1 khung pop up nhỏ trồi lên ở góc màn hình. Trên đó có thể hiện thị 1 banner quảng cáo, 1 thông tin đặc biệt hoặc là thông báo hỗ trợ và chăm sóc khách hàng trực tuyến. Bài viết này sẽ hướng dẫn bạn làm một khung hỗ trợ như thế.

Bạn tiến hành làm các bước như sau:

1/. Vào phần quản trị blog / Chọn Bố cục / Chọn Thêm tiện ích / Chọn HTML/Javascript
2/. Không cần điền tiêu đề, dán đoạn code sau vào nội dung:

<style type="text/css">  
 * html div#fl813691 {position: absolute; overflow:hidden;  
 top:expression(eval(document.compatMode &&  
 document.compatMode=='CSS1Compat') ?  
 documentElement.scrollTop  
 +(documentElement.clientHeight-this.clientHeight)  
 : document.body.scrollTop  
 +(document.body.clientHeight-this.clientHeight));}  
  #fl813691{font: 12px Arial, Helvetica, sans-serif; color:#666;  position:fixed; _position: absolute; left:0; bottom:0; height:150px; }  
 #eb951855{ width:150px; padding-right:7px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBHraq54F41Tai6MqiWhunwllnn3RpZQomHziPGg9wLul3MJhh6Q4KJOa_6IJoalzCARfxO0rKCgJb4iMRYaLALO5xKB4W_icV0oAnZutqqKhyBYmvjyue2neOtYIxMh_W45bzrJB4lke7/w15-h150-no/cuocsongmuonmau.info_bg_right.gif) no-repeat right top;}  
 #cob263512{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2UMpt_Wn002E0fo-g8VbWdvbt3rYmu8KNlTThHl1y0kB8Y_D3EeWMRAQELEKqYivPSEC1NHhJ2fKBlaa3bhXG26UAyZb7C1jORkP-DIRPrEywjIpDNS2tILBsF-PfDGxcOXBqQQ5wLCV7/w501-h150-no/cuocsongmuonmau.info_bg.gif) no-repeat left top; height:150px; padding-left:7px;}  
 #coh963846{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:210px;}  
 #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/AVvXsEhl1dxQX22gTJoGs0e4ZqmnP5WCqSVhj2-CkdwxyIMl7AGS6YHGSHjitGbaAU8LOaKgeuSwoxwOfc-XaIRGy65vQwUPO9-DMy1CNRpQg4RxT3uVd7kN9xT119ReHArvPK85BfQkYvkO5doI/w90-h30-no/cuocsongmuonmau.info_button.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; margin:0; padding:0; height:123px;  border-style:solid; border-width:1px; border-color:#111 #999 #999 #111;  line-height:1.6em; overflow:hidden;}  
 </style>  
 <div id="fl813691" style="height: 152px;">  
 <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>  
 &nbsp;Bạn cần giúp đỡ?
 </div>  
 <div id="co453569">
<!-- code ads -->  
<a target="_blank" href="http://www.nguyenquocchien.com/p/lien-he.html"> <img style="margin:3px 1px 1px 3px;" border="0" width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrIOkvGQ7j8IbVEwfwzy9Wvs3Txk_spi0ro0yKNQ9NL-jCOBLI4Mv126aKX6XVRv5jd4gwuFG57d-iNWHJ3Fyi3XSs-HOEmjKQjgRzBBg2iUfitFdw7YdE23F49EpHHKwtulW1yL44RrAO/s1600/Contact-us5.png" height="115" title="Gửi thư cho tôi nhé" /></a>  
<!-- code ads -->  

</div>  
 </div></div></div>  
 <script>  
 pf204652bottomLayer = document.getElementById('fl813691');  
 var pf204652IntervalId = 0;  
 var pf204652maxHeight = 150;//Chieu cao khung quang cao  
 var pf204652minHeight = 20;  
 var pf204652curHeight = 0;  
 function pf204652show( ){  
 pf204652curHeight += 2;  
 if (pf204652curHeight > pf204652maxHeight){  
 clearInterval ( pf204652IntervalId );  
 }  
 pf204652bottomLayer.style.height = pf204652curHeight+'px';  
 }  
 function pf204652hide( ){  
 pf204652curHeight -= 3;  
 if (pf204652curHeight < pf204652minHeight){  
 clearInterval ( pf204652IntervalId );  
 }  
 pf204652bottomLayer.style.height = pf204652curHeight+'px';  
 }  
 pf204652IntervalId = setInterval ( 'pf204652show()', 5 );  
 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';  
 }  
 </script>

Lưu ý: Bạn thay đổi những chỗ đánh dấu mầu đỏ theo ý mình nhé.

Chúc các bạn thành công.

- Nguyễn Quốc Chiến,

Chuyên gia Tư vấn, Đào tạo

Nguồn: cuocsongmuonmau