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

Người đăng: yeu mai em on Thứ Sáu, 2 tháng 12, 2011


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/AVvXsEjP07O9TouIFR6xN6Ceogu7hXbYcjgOafPX1_Y4dpzm7IC1ut4slM8DirosyeN4skCOMKVZNeS-URcbk7neHJOknpH767zmnTdEP3dxyFOaig6icm92Moiqnu-jjWdCps2XCnaTol9g-B6O/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

{ 0 nhận xét... read them below or add one }

Đăng nhận xét