Code quảng cáo từ dưới trồi lên ở góc phải (Blogger)

August 3, 2012
Code quảng cáo banner dạng popup trồi từ dưới lên trên bên góc bên trái hoặc bên phải
Dưới đây là đoạn code quảng cáo banner dạng popup trồi từ dưới lên trên ở góc phải của Blog mỗi khi khách ghé thăm. Bên cạnh đó sẽ có nút Ẩn/Hiện tương ứng với việc quảng cáo sẽ hạ xuống hoặc trồi lên. Bạn có thể xem demo tại ngay góc dưới bên phải trang này.
Hướng dẫn
- Vào Bảng điều khiển của Blogger, chọn Thiết kế, chọn tiếp Phần tử trang
- Tạo một widget HTML\JavaScripts và đưa code bên dưới vào.
<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(http://2.bp.blogspot.com/--wwYEfFLp1k/UBveNA-ASmI/AAAAAAAAH_0/jRGY2DUaXHE/s1600/rightp.gif) no-repeat right top;}
#cob263512{background:url(http://3.bp.blogspot.com/-McOs59VXqZs/UBvddL7CJCI/AAAAAAAAH_g/pT8NYc38tps/s1600/fulld.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(http://4.bp.blogspot.com/-aXVgTv8GLVg/UBvdcbVjmGI/AAAAAAAAH_Y/sVCZg586S94/s1600/closebutton.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;Đêm Không Ngủ - Diễn đàn Kết bạn
</div>
<div id="co453569">
<!-- code ads -->
<a target="_blank" href="http://demkhongngu.com/" rel="dofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="260" src="http://1.bp.blogspot.com/-whsFyj-XN6Y/UBvN92cUvJI/AAAAAAAAH-I/LbrLZalY79s/s1600/demkhongngu.jpg" height="115" title="Diễn đàn Kết bạn"/></a>
<!-- code ads -->
</div>
</div></div></div>
<script>
pf204652bottomLayer = document.getElementById('fl813691');
var pf204652IntervalId = 0;
var pf204652maxHeight = 148;//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>
- Bạn chỉnh sửa lại các phần tô màu cho phù hợp:
+ Đêm Không Ngủ - Diễn đàn Kết bạn : Thay bằng tiêu đề quảng cáo của bạn
+ http://demkhongngu.com/ : URL website quảng cáo
+ http://1.bp.blogspot.com/-whsFyj-XN6Y/UBvN92cUvJI/AAAAAAAAH-I/LbrLZalY79s/s1600/demkhongngu.jpg : Link hình ảnh banner quảng cáo
+ Diễn đàn Kết bạn: Tên website quảng cáo
+ Thay right:0 thành left:0 nếu bạn muốn banner trồi lên phía bên trái thay vì bên phải Blog.

 Đêm Không Ngủ - Diễn đàn Kết bạn
  1. canh_kaka Bạn viết code trong blogspot kiểu gì vậy?
  2. Đỗ Phú Quý @canh_kaka: Chưa hiểu câu hỏi của bạn! :-?
  3. canh_kaka Ah nghĩa là mình muốn tạo cái form viết code giống như cảu bạn ý :D
  4. Đỗ Phú Quý @canh_kaka: Blog của mình sử dụng thẻ quote để chứa code.
    Bạn tìm đến class quote tương ứng trong template rồi thay lại bằng nội dung như trong class .post blockquote của mình bên dưới:
    .post blockquote{
    display:block;
    font: 1em 'Courier New', Fixed, monospace;
    font-size : 100%;
    max-height:300px;
    color: #666666;
    overflow : auto;
    text-align:left;
    border : 1px solid #99cc66;
    padding : 0px 20px 0 30px;
    margin:1em 0 1em 0;
    line-height:17px;}
  5. Truong Pham Xuan Quý ơi cho mình hỏi chút. Mình muốn quảng cáo nó chỉ hiện ở 1 trang như của bạn thì làm thế nào?Mình chèn code kia của bạn vào nhưng nó lại hiện ra trên tất cả các trang.
    P/s: Mình có thể tùy chỉnh mỗi trang đặt 1 quảng cáo như vậy ko?
    Trang của mình là :http://www.greencanaltravel.com
    chuyên bán vé máy bay đi trung quốc
  6. Đỗ Phú Quý @Truong Pham Xuan: Quảng cáo mình chỉ để hiển thị ở riêng bài viết này làm mẫu thôi.
    - Bạn muốn hiển thị quảng cáo ở riêng 1 bài viết thì chèn mã quảng cáo vào riêng bài viết đó là được (tab soạn thảo HTML).
    - Muốn hiển thị ở tất cả các trang thì chèn luôn mã quảng cáo vào Template hoặc tiện ích HTML/Javascript.
  7. Truong Pham Xuan ok. mình hiểu rồi. Cảm ơn Quý nhiều nha.:)
  8. Nap the online Cảm ơn bạn Quý, mình đã test thành công
  9. Nguyễn Lam Cảm ơn bạn về bài viết
    và tiện đây bạn cho mình hỏi một chút .nếu, mình muốn làm quảng xuất hiện ngẫu nhiên tại một vị trí nhất định do mình thiết lập và quảng cáo đó có thể thay đổi mỗi lần khi mình F5 sẽ hiện một thông tin về chương trình mình thiết lập sẵn được không ?Email của mình nguyenduynampkd@gmail.com tại địa chỉ Nhà Đẹp | Bếp Xinhrất mong nhận được Email của bạn :)
  10. Dinh vi toan cau Cảm ơn bạn nhé ! Đang tìm hiểu để quảng cáo kiếm tiền nuôi host & Domain
  11. doc truyen Hay quá , tìm mãi mới ra code này. chuẩn luôn , hj
  12. Hoàn Hoài QUY OI CHO HOAN XIN CORE DIEN DAN FON DC KHONG
  13. Văn Đạt hay qá cảm ơn anh nhìu ạ