GẮN BẢNG QUẢNG CÁO CÓ NÚT ẨN HIỆN

Bạn có thể dễ dàng chèn vào Blog mình một bảng quảng cáo giới thiệu về trang Web/Blog nào đó, bảng quảng cáo này sẽ xuất hiện khi một khách bất kỳ vào tham quan blog của bạn và nó sẽ có một nút ẩn hiện nằm ở góc phải của bảng quảng cáo, nếu không muốn xem, các bạn bấm vào nút dấu trừ ( - ) và khi click vào bảng quảng cáo này sẽ đưa các bạn đến đúng trang Web/Blog mà bạn đã liên kết...

Mời các bạn bấm vào xem thử phía dưới sẽ thấy rõ hơn.

Xem thử

Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía 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://img98.imageshack.us/img98/9400/rightp.gif) no-repeat right top;}
        #cob263512{background:url(http://img205.imageshack.us/img205/2176/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://img205.imageshack.us/img205/9837/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="&#7848;n &#273;i">&#7848;n</a></li>
                        <li id="pf204652show" style="display: none;"><a class="max" href="javascript:pf204652clickshow();" title="Hi&#7879;n l&#7841;i">Xem </a></li>
                    </ul>
                dungheinken - dunghennessy
               </div>
                <div id="co453569">  
<!-- code ads -->
<a target="_blank" href="http://www.dunghennessy.blogspot.com" rel="nofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHGps0MYuF157bfZhq_Dt0yU9o-Rk77uK4hVJE-RTSrokp4zjYoUgNs_PFi353N_mjfs6BqU8lzjTiBcWvYNbRz7zax24YbgT3fr3Wegz78nWIBQi8xhVyXxxyoAf3H0kbmMfDiEZw5o7G/s1600/www.loogix.com_9715320.gif" height="115" title="dunghennessy - Thủ thuật blogspot"/></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>

Bây giờ, bạn thay đổi các đường link màu xanh (http://www.dungheineken.blogspot.com.......) là địa chỉ trang Web/Blob mà bạn muốn liên kết, (http://3.bp......gif) link ảnh quảng cáo, (dungheineken - dunghennessy) tiêu đề bảng quảng cáo

và bấm LƯU lại là xong.
Mách nhỏ: để bảng quảng cáo thu hút khách tham quan thì bạn nên để hình động (.gif) thì đẹp hơn, nếu muốn làm ảnh động từ các ảnh tĩnh (giống như bảng quảng cáo của tôi) thì bạn VÀO ĐÂY để tạo nha (đây là trang Web hỗ trợ tạo ảnh động Free).

Chúc các bạn thành công

Nguồn: Itech Plus