Thường khi các bạn vào một website hay một blogspot sẽ thấy có một quảng cáo hoặc mục hỗ trợ support từ từ hiện lên ở góc trái hoặc góc phải website, và có nút ẩn đi hoặc hiện lên, hôm nay mình hướng dẫnCách thêm banner quảng cáo 2 góc phải và trái website.
Live Demo
Cách làm: (áp dụng được cả blogspot và website )
Đăng nhập => Bố cục => Thêm tiện ích HTML/Javacript => Paste đoạn code sau vào:
Tags:
 |
| Demo banner quảng cáo 2 góc phải và trái website |
Cách làm: (áp dụng được cả blogspot và website )
Đăng nhập => Bố cục => Thêm tiện ích HTML/Javacript => Paste đoạn code sau vào:
<style type="text/css">
* html div#share123_ads {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));}
#share123_ads{font: 12px Arial, Helvetica, sans-serif; color:#666; position:fixed; _position: absolute; left:0; bottom:0; height:150px; }
#share123_bg{ width:279px; padding-right:7px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip3MAcra1Fj7BYeCfHY6gaox0nzgai9SiwrjIzupEKlVjVbDjcgorkO5BbUOeMF6Q2dtZqB0irY26_QtJNVy0HbvkTO4cHJFSgke_9_G4c1bT-9jY9_2eBYo4UrCRjR5AeNpkA4Cho240/s1600/rightp_1.png) no-repeat right top;}
#cob263512{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgOt_dGy3wyfOg7rsIeACkaOvQkn-tnjRiXKEfeldn-uUFso6uIBLf1DQ3HWikAH9JGNxfQ5gInUZRjjZf2sfgYWNTqHz1RzGdg17x8i5RPYHhQJK3N7V7kV7v514nGIbV_pTMbDLcNZA/s1600/full1d.gif) no-repeat left top; height:150px; padding-left:7px;}
#share123_ads_head{color:#fff;display:block; height:20px; line-height:20px; font-size:12px; width:277px;}
#share123_ads_head a{color:#690;text-decoration:none;}
#share123_ads_view{float:right; padding:0; margin:0; list-style:none; overflow:hidden; height:15px;}
#share123_ads_view li{display:inline;}
#share123_ads_view li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0pr_Gqqr4S8Vc-Jxt2-ZDb7GuhajXcWHgt_Kb7wST888tccBCfoZDKAZj28Nnk791U0WeTrs8LSupUezD3n0ixDTGikHGZje_okm1LpX9eL78VnJ_dZKwHFHt1lWGrgtw5c5q_sfPb-w/s1600/closebutton.gif); background-repeat:no-repeat; width:30px; height:0; padding-top:15px; overflow:hidden; float:left;}
#share123_ads_view li a.close{background-position: 0 0;}
#share123_ads_view li a.close:hover{background-position: 0 -15px;}
#share123_ads_view li a.min{background-position: -30px 0;}
#share123_ads_view li a.min:hover{background-position: -30px -15px;}
#share123_ads_view li a.max{background-position: -60px 0;}
#share123_ads_view 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="share123_ads" style="height: 152px;">
<div id="share123_bg">
<div id="cob263512">
<div id="share123_ads_head">
<ul id="share123_ads_view">
<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>
Hỗ trợ trực tuyến từ Share123.vn
</div>
<div id="co453569">
<!-- code ads -->
<a target="_blank" href="http://share123.vn" rel="dofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcBH5pIY3Pt_E4WMC9Ig7wJUNdGiTUW3mRvisNJnROoHuBBo_2Aackb90VZGMIHSR_l8Rny2zvMjwgb3JQHl4NHndioUGjbMrr0IpUXSCAGCC-RLdPOQcAvtMin1pAvGPiXEK-JJG84NM/s320/logo.png" height="115" title="http://share123.vn"/></a>
<!-- code ads -->
</div>
</div></div></div>
<script>
pf204652bottomLayer = document.getElementById('share123_ads');
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>
Các bạn chú ý:
- Thay textlink http://share123.vn thành link blog, website của bạn
- Thay ảnh https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcBH5pIY3Pt_E4WMC9Ig7wJUNdGiTUW3mRvisNJnROoHuBBo_2Aackb90VZGMIHSR_l8Rny2zvMjwgb3JQHl4NHndioUGjbMrr0IpUXSCAGCC-RLdPOQcAvtMin1pAvGPiXEK-JJG84NM/s320/logo.png bằng ảnh cần hiển thị của bạn
- Nếu muốn banner hiển thị sang phải thì thay giá trị left:0; thành right:0 là được.
Share123.vn Chúc bạn thành công
Thiết kế Web SEO
Cảm ơn Share nhiều nhé. mình đã áp dụng và thành công. tuy nhiên cần phải chỉnh sửa một số thứ cho phù hợp với blog mình, nhưng cách này không làm ảnh hưởng đến code. rất hay
Trả lờiXóahttp://ngosangreal.blogspot.com/