Sau đây Cuộc sống muôn màu xin hướng dẫn cách chèn khung quảng cáo popup hay thông báo luôn dưới góc phải (trái) màn hình dành cho Blogger/ Blogspot. Khung quảng cáo sẽ trượt lên và mở của sổ quảng cáo nhỏ dưới góc màn hình khi load trang và có thể ẩn hiển tùy ý.

Quảng cáo dưới góc màn hình cho blogspot
Quảng cáo dưới góc màn hình cho blogspot

Cách chèn khung quảng cáo dưới góc màn hình cho Blogger/ Blogspot

Tạo một widget mới để chèn code quảng cáo popup

Rất đơn giản, các bạn chỉ cần vào công cụ quản trị Blogger, "Bố cục", thêm Widget (Tiện ích) mới, chọn tiện ích HTML/Javascript.

- Để trống tiêu đề Widget.
- Copy toàn bộ đoạn code dưới đây cho vào phần nội dung của Widget:

<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; right:0; bottom:0; height:150px; }    
 #eb951855{ width:279px; padding-right:7px; background:url(https://lh4.googleusercontent.com/-ZCel684tsGA/Uo8tAONTcZI/AAAAAAAACkg/DaELN1N7HKY/w15-h150-no/cuocsongmuonmau.info_bg_right.gif) no-repeat right top;}    
 #cob263512{background:url(https://lh4.googleusercontent.com/-vNLa5Sfsz84/Uo8tAL6LAkI/AAAAAAAACkk/CuyKlQfH4Jo/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:277px;}    
 #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://lh6.googleusercontent.com/-hUB6FHSCOcg/Uo8uqebMB5I/AAAAAAAAClA/t3_oubc1PaE/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;Hot: Bán cho thuê căn hộ cao cấp Thảo Điền Pearl
 </div>    
 <div id="co453569">
<!-- code ads -->    
<a target="_blank" href="http://www.canhothuehcm.com/2013/10/ban-cho-thue-can-ho-cao-cap-thao-dien-pearl.html"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="https://lh6.googleusercontent.com/-Uoi9AAnO-hM/UmNLSWBlAOI/AAAAAAAACY8/4EinHfijRt0/w264-h115-no/1.jpg" height="115" title="Dự án mới | Căn hộ cao cấp Thảo Điền Pearl"></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>
- Tìm trong đoạn code các dòng mình đã hightlight đỏ và thay lại cho phù hợp với blog của bạn.

Have fun :)


Share on Google Plus

Tác giả: Đặng Việt Hoàng

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

39 nhận xét :

  1. sửa máy tính tại nhà
    sửa máy tính tại nhà hà nội cái này hữu dụng nhỉ. thử xem mới được

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Thanks bạn, 1 bài viết bổ ích, và mình đã làm được ^^.

    Tuy nhiên, sau 1 hồi tham khảo thêm, tò mò chỉnh sửa thêm bớt code ở mục toàn trang, ko biết thừa thiếu đoạn nào mà khi truy cập web/blogspot của mình thì cái quảng cáo góc dưới màn hình có thêm 1 cái chạy lên phía trên (giống kiểu hồn lìa khỏi xác ấy ^^)

    Sao thế nhỉ?
    http:// www. nhadatdongnambo. com

    Giải đáp dùm mình nhé!

    ReplyDelete
    Replies
    1. Sorry, tại mình đọc ko kỹ bài viết :D
      Thanks đoạn code hay!

      Delete
  4. HAY QUÁ NHƯNG MÀ K ĐƯỢC
    http://mai2labaoxa.blogspot.com/search/label/blog?&max-results=15

    ReplyDelete
  5. Link ảnh để dạng gif được ko bạn nhỉ


    nonstop

    ReplyDelete
  6. http://muachungcuhn.com/du-an/chung-cu-hp-landmark-tower.html >>> mình đã làm đc ... cám ơn bạn chia sẻ rất hay.

    ReplyDelete
  7. Cám ơn bạn mình đã làm thành công tại trang người lớn

    ReplyDelete
  8. Làm sao để nó tự tắt sau một thời gian nhất định

    ReplyDelete
    Replies
    1. vấn đề này khó - có thể là không thể được

      Delete
  9. Mai Phương Huy cung cấp dịch vụ ban may photocopy - cho thue may photocopy giá cực rẻ đảm bảo chất lượng . Xin liên hệ Mai Phương Huy để có giá cả hợp lý nhất.
    Công ty Mai Phương Huy Chân thành cám ơn quý khách hàng!

    ReplyDelete
  10. Cám ơn bạn, mình đã áp dụng và thành công. linkm88moinhat.net

    ReplyDelete
  11. CHo mình hỏi. Muốn chuyển nó hiện bên trái làm thế nào vậy ?

    ReplyDelete
  12. ên thật là Phan Thanh Bảo Ngọc, được biết đến là một cô gái tài năng và nghị lực. Trong suốt 8 năm lăn lộn vào đời, bắt đầu từ khi mới lên 14 tuổi, Tuệ Nghi đã trải qua không ít gian nan, khổ cự in tem bảo hành
    sâm cau
    củ ba kích
    g phim, nhân vật chàng bác sĩ điển trai không có nhiều đất diễn. Anh cũng khiến fan tiếc nuối vì không được biên kịch xây dựng một câu chuyện tình cảm hấp dẫn. Tuy nhiên, ngoại hình bắt mắt cũng đủ khiến fan phát sốt vì "soá

    ReplyDelete
  13. http://thienphuc.vn/cho-thue-may-photocopy/

    ReplyDelete
  14. Cảm ơn bạn đã chia sẻ, code này hữu dụng lắm !
    CHO THUÊ MÁY PHOTOCOPY

    ReplyDelete
  15. thanh koy nhiều

    ReplyDelete
  16. Bài viết hay quá, đọc đi đọc lại vẫn thấy hay
    benhtrivn.com

    ReplyDelete
  17. Bài viết quá hay và bổ ích đọc ngay mấy bí kíp trong bài viết này kinh doanh gì năm 2017 đi, thế mà cũng hỏi, rồi một số cách khách có thể như làm giàu

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Rất hay cảm ơn admin rất nhiều. Và nếu mọi người ai có nhu cầu thuê máy photocopy hãy liên hệ ngay với công ty Thuê Máy Photocopy của chúng tôi tạo website http://thuemayphoto.info/ xin chân thành cảm ơn

    ReplyDelete