Thủ thuật tạo Popup quảng cáo hiện lên góc phải Blogger
Lưu ý: Nếu bạn gặp khó khăn với cách làm của bài viết "Thủ thuật tạo Popup quảng cáo hiện lên góc phải Blogger" dưới đây hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời và hỗ trợ bạn nhiệt tình sau 3 phút, 24/24h. Ok, giờ chúng ta bắt đầu
Thủ thuật blogger cách tạo banner quảng cáo hiển thị dạng popup ở góc màn hình. Với mẫu này độc giả có thể bấm nút để ẩn hiện popup theo ý của độc giả, nghĩa là khi độc giả truy cập vào trang của bạn thì popup này sẽ hiện ra (show) và người dùng có thể bấm vào nút ẩn để ẩn nó đi nếu họ không thích.
1. Vào Bố cục (layout)
2. Chọn Thêm tiện ích => Tạo một widget HTML\JavaScripts và chèn 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://3.bp.blogspot.com/-pjTpLDeCS8I/Uas87l_nF0I/AAAAAAAADWM/EycEXhv_mhw/s1600/rightp.gif) no-repeat right top;}
#cob263512{background:url(http://2.bp.blogspot.com/-eykde4kjuGM/Uas9FM1ijfI/AAAAAAAADWU/IJ6hHuu6pNU/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://2.bp.blogspot.com/-91xti1kHuts/Uas9N_aBAYI/AAAAAAAADWc/s5DbPY-R7EQ/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>
#eb951855{ width:279px; padding-right:7px; background:url(http://3.bp.blogspot.com/-pjTpLDeCS8I/Uas87l_nF0I/AAAAAAAADWM/EycEXhv_mhw/s1600/rightp.gif) no-repeat right top;} #cob263512{background:url(http://2.bp.blogspot.com/-eykde4kjuGM/Uas9FM1ijfI/AAAAAAAADWU/IJ6hHuu6pNU/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://2.bp.blogspot.com/-91xti1kHuts/Uas9N_aBAYI/AAAAAAAADWc/s5DbPY-R7EQ/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> #eb951855{ width:279px; padding-right:7px; background:url(http://3.bp.blogspot.com/-pjTpLDeCS8I/Uas87l_nF0I/AAAAAAAADWM/EycEXhv_mhw/s1600/rightp.gif) no-repeat right top;} #cob263512{background:url(http://2.bp.blogspot.com/-eykde4kjuGM/Uas9FM1ijfI/AAAAAAAADWU/IJ6hHuu6pNU/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://2.bp.blogspot.com/-91xti1kHuts/Uas9N_aBAYI/AAAAAAAADWc/s5DbPY-R7EQ/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> Thiết Kế Blogger </div> <div id="co453569"> <!-- code ads --> <a target="_blank" href="http://www.webhagia.com/" rel="nofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="http://2.bp.blogspot.com/-RHnOQWB9Kh4/Uas9tZnr3VI/AAAAAAAADWk/QLtPd3ZtyvI/s1600/thu+thuat+blogger.jpg" height="115" title="Namkna | Kiến thức - Giải Trí - Thủ thuật - Giải pháp công nghệ"/></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><!-- 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><!-- 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>
Thiết Kế Blogger : tiêu đề khung quảng cáo http://www.webhagia.com/ : liên kết đến website nhà quảng cáohttp://2.bp.blogspot.com/-RHnOQWB9Kh4/Uas9tZnr3VI/AAAAAAAADWk/QLtPd3ZtyvI/s1600/thu+thuat+blogger.jpg Để khung popup hiện bên trái thì bạn thay chữ ringht:0 thành left:0
Ban quản trị:
Bạn đang đọc bài viết "Thủ thuật tạo Popup quảng cáo hiện lên góc phải Blogger". Nếu bạn đang gặp khó khăn với cách làm trên hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời bạn sau 3 phút, 24/24h (Nếu bị bật ra quảng cáo, vui lòng nhấn Bỏ Qua Quảng Cáo)