Thủ thuật tạo bảng quảng cáo ở góc phải cho blogspot

29 thg 3, 2012

Trên một số Web/Blog, các bạn sẽ bắt gặp một số bảng quảng cáo để quảng bá thương hiệu hoặc hình ảnh nào đó. Với thủ thuật hôm nay, mình xin chia sẻ với các bạn code thủ thuật gắn 1 bảng quảng cáo ở góc phải Blog, khi click vào mỗi bảng quảng cáo thì bạn sẽ được đưa đến trang Web/Blog đã liên kết.

Demo: http://home.kenhdaihoc.com

Hoặc xem ảnh bên dưới

Hướng dẩn: Thêm tiện ích HTML/Javascript và chèn code bên dưới vào
Chúc thành công!

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiysxfHRA9fNSikKheyE27UVx_coCiZCdvnoD16AGTcVlZo0_NgwPho55diZHJe-4YSXXc0UtVJ9cXDWVB9P301QGGCCExdqMcfhfiamHgznlJ1yLBWgARKmfe25X6nN8gsx9X6ahisbp0/s1600/rightp-kenhdaihoc.com.gif) no-repeat right top;}
        #cob263512{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNnu8O61gz89FOW2t9WPXzuv-7Q6XM0i1NPLWWGDku_R7nPfXLXPG7JU99Xesus0mTiwSjPCHjCaqs6fgPg-wMrhfPI5JQtOSL596ffUxx0x6U_5Cc-zKwLtX20FARsObrYfFZxsrCEsw/s1600/fulld-kenhdaihoc.com.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi26bDsL-aYC6I2-j9iATQqOIcWMiDUypbWMoqmtEPwoKojLsTnPXaJ9F2J4hRwl7XkYE7MNLzTwnj1dwiql9GacPSq4Se0gKknIgyRsPa8Z6hKKsncnVbUNxMyNfG5FmI0OOEpXEs1elo/s1600/closebutton-kenhdaihoc.com.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>
                 KenhDaiHoc.Com
               </div>
                <div id="co453569">

<a target="_blank" href="http://kenhdaihoc.com/forum" rel="nofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQA5iMwFncEsCAtc7iFaL2Angws8wnBDZCEcUMikAwO0FPeZpYf" height="115" title="Kenhdaihoc.com | Kênh thông tin-học tập- giải trí"/></a>


</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>