Tạo khung quảng cáo đẹp
|
Thứ sáu, 21 Tháng 5 2010 15:22
Bạn đã có một trang web, Bạn muốn tạo những banner quảng cáo bắt mắt. Bài viết sau đây mình xin hướng dẫn các bạn tạo một quảng cáo có hiệu ứng đẹp.
Bước 1: Bạn tạo một thư mục có tên Quang_cao
Bước 2: Bạn tạo 1 file index.html trong thư mục đó. và nội dung trong index.html sẽ như sau:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>F5 Viet Nam</title>
<link rel="stylesheet" href="/css/style.css" type="text/css" />
</head>
<body>
<div id="YOS_adv">
<div id="YOS_adv_right">
<div id="YOS_adv_left">
<div id="YOS_adv_header">
<ul id="YOS_adv_control">
<li id="YOS_hide"><a class="min" href="javascript:YOS_clickhide();" title="Ẩn đi">Ẩn</a></li>
<li id="YOS_show" style="display: none;"><a class="max" href="javascript:YOS_clickshow();" title="Hiện lại">Xem </a></li>
</ul>
Chợ Mỹ Phẩm cung cấp nước hoa chính hãng
</div>
<div id="YOS_adv_content">
<!-- code ads -->
<a target="_blank" href="http://chomypham.com" rel="nofollow"> <img border="0" width="216" src="http://chomypham.com/images/banners/xahang_hot.jpg" height="167" title="Phim Nóng Của Teen"/></a>
<!-- code ads -->
</div>
</div>
</div>
</div>
<script>
YOS_bottomLayer = document.getElementById('YOS_adv');
var YOS_IntervalId = 0;
var YOS_maxHeight = 198;//Chieu cao khung quang cao
var YOS_minHeight = 20;
var YOS_curHeight = 0;
function YOS_show( ){
YOS_curHeight += 2;
if (YOS_curHeight > YOS_maxHeight){
clearInterval ( YOS_IntervalId );
}
YOS_bottomLayer.style.height = YOS_curHeight+'px';
}
function YOS_hide( ){
YOS_curHeight -= 3;
if (YOS_curHeight < YOS_minHeight){
clearInterval ( YOS_IntervalId );
}
YOS_bottomLayer.style.height = YOS_curHeight+'px';
}
YOS_IntervalId = setInterval ( 'YOS_show()', 5 );
function YOS_clickhide(){
document.getElementById('YOS_hide').style.display='none';
document.getElementById('YOS_show').style.display='inline';
YOS_IntervalId = setInterval ( 'YOS_hide()', 5 );
}
function YOS_clickshow(){
document.getElementById('YOS_hide').style.display='inline';
document.getElementById('YOS_show').style.display='none';
YOS_IntervalId = setInterval ( 'YOS_show()', 5 );
}
function YOS_clickclose(){
document.body.style.marginBottom = '0px';
YOS_bottomLayer.style.display = 'none';
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>F5 Viet Nam</title>
<link rel="stylesheet" href="/css/style.css" type="text/css" />
</head>
<body>
<div id="YOS_adv">
<div id="YOS_adv_right">
<div id="YOS_adv_left">
<div id="YOS_adv_header">
<ul id="YOS_adv_control">
<li id="YOS_hide"><a class="min" href="javascript:YOS_clickhide();" title="Ẩn đi">Ẩn</a></li>
<li id="YOS_show" style="display: none;"><a class="max" href="javascript:YOS_clickshow();" title="Hiện lại">Xem </a></li>
</ul>
Chợ Mỹ Phẩm cung cấp nước hoa chính hãng
</div>
<div id="YOS_adv_content">
<!-- code ads -->
<a target="_blank" href="http://chomypham.com" rel="nofollow"> <img border="0" width="216" src="http://chomypham.com/images/banners/xahang_hot.jpg" height="167" title="Phim Nóng Của Teen"/></a>
<!-- code ads -->
</div>
</div>
</div>
</div>
<script>
YOS_bottomLayer = document.getElementById('YOS_adv');
var YOS_IntervalId = 0;
var YOS_maxHeight = 198;//Chieu cao khung quang cao
var YOS_minHeight = 20;
var YOS_curHeight = 0;
function YOS_show( ){
YOS_curHeight += 2;
if (YOS_curHeight > YOS_maxHeight){
clearInterval ( YOS_IntervalId );
}
YOS_bottomLayer.style.height = YOS_curHeight+'px';
}
function YOS_hide( ){
YOS_curHeight -= 3;
if (YOS_curHeight < YOS_minHeight){
clearInterval ( YOS_IntervalId );
}
YOS_bottomLayer.style.height = YOS_curHeight+'px';
}
YOS_IntervalId = setInterval ( 'YOS_show()', 5 );
function YOS_clickhide(){
document.getElementById('YOS_hide').style.display='none';
document.getElementById('YOS_show').style.display='inline';
YOS_IntervalId = setInterval ( 'YOS_hide()', 5 );
}
function YOS_clickshow(){
document.getElementById('YOS_hide').style.display='inline';
document.getElementById('YOS_show').style.display='none';
YOS_IntervalId = setInterval ( 'YOS_show()', 5 );
}
function YOS_clickclose(){
document.body.style.marginBottom = '0px';
YOS_bottomLayer.style.display = 'none';
}
</script>
</body>
</html>
Bước 3: Bạn cần có 1 file style.css và có nội dung như sau:
* html div#YOS_adv {
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));
}
#YOS_adv{font: 12px Arial, Helvetica, sans-serif; color:#666; position:fixed; _position: absolute; right:0; bottom:0; height:198px; }
#YOS_adv_right{ width:224px; padding-right:7px; background:url(../images/YOS_adv_right.png) no-repeat right top;}
#YOS_adv_left{background: url('/../images/YOS_adv_left.png') no-repeat left top; height:198px; padding-left:7px;}
#YOS_adv_header{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:218px;}
#YOS_adv_header a{color:#690;text-decoration:none;}
#YOS_adv_control{float:right; padding:3px 0 0; margin:0; list-style:none; overflow:hidden; height:15px;}
#YOS_adv_control li{display:inline;}
#YOS_adv_control li a{background-image:url(http://www.giaitriso1.net/imgads/button.gif); background-repeat:no-repeat; width:30px; height:0; padding-top:15px; overflow:hidden; float:left;}
#YOS_adv_control li a.close{background-position: 0 0;}
#YOS_adv_control li a.close:hover{background-position: 0 -15px;}
#YOS_adv_control li a.min{background-position: -30px 0;}
#YOS_adv_control li a.min:hover{background-position: -30px -15px;}
#YOS_adv_control li a.max{background-position: -60px 0;}
#YOS_adv_control li a.max:hover{background-position: -60px -15px;}
#YOS_adv_content{display:block; margin:0; padding:0; height:170px; border-style:solid; border-width:1px; border-color:#111 #999 #999 #111; line-height:1.6em; overflow:hidden;}
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));
}
#YOS_adv{font: 12px Arial, Helvetica, sans-serif; color:#666; position:fixed; _position: absolute; right:0; bottom:0; height:198px; }
#YOS_adv_right{ width:224px; padding-right:7px; background:url(../images/YOS_adv_right.png) no-repeat right top;}
#YOS_adv_left{background: url('/../images/YOS_adv_left.png') no-repeat left top; height:198px; padding-left:7px;}
#YOS_adv_header{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:218px;}
#YOS_adv_header a{color:#690;text-decoration:none;}
#YOS_adv_control{float:right; padding:3px 0 0; margin:0; list-style:none; overflow:hidden; height:15px;}
#YOS_adv_control li{display:inline;}
#YOS_adv_control li a{background-image:url(http://www.giaitriso1.net/imgads/button.gif); background-repeat:no-repeat; width:30px; height:0; padding-top:15px; overflow:hidden; float:left;}
#YOS_adv_control li a.close{background-position: 0 0;}
#YOS_adv_control li a.close:hover{background-position: 0 -15px;}
#YOS_adv_control li a.min{background-position: -30px 0;}
#YOS_adv_control li a.min:hover{background-position: -30px -15px;}
#YOS_adv_control li a.max{background-position: -60px 0;}
#YOS_adv_control li a.max:hover{background-position: -60px -15px;}
#YOS_adv_content{display:block; margin:0; padding:0; height:170px; border-style:solid; border-width:1px; border-color:#111 #999 #999 #111; line-height:1.6em; overflow:hidden;}
Bước 4: bạn cần có 2 ảnh để làm khung bo bên ngoài, ảnh này mình sẽ cung cấp trong file đính kèm.
Bước 5: Bạn save tất cả lại và chạy thử
Và đây là file demo đính kèm, Download here
chúc bạn có một quảng cáo đẹp
Cập nhật ngày Thứ hai, 26 Tháng 7 2010 10:05
Các bài viết khác:
Các bài viết cũ hơn:
Trực tuyến
Hiện có 1 khách Trực tuyến
