Home » » Tạo Banner quảng cáo với hiệu ứng trượt dọc 2 bên

Tạo Banner quảng cáo với hiệu ứng trượt dọc 2 bên

Facebizvn | 00:30 | 0 comments

Tạo Banner quảng cáo với hiệu ứng trượt dọc 2 bên





Banner quảng cáo trượt dọc 2 bên trang web là hình thức quảng cáo rất phổ biến hiện nay trên các Forum\Website lớn. Không những giúp tận dụng “đất”, nó còn dễ dàng gây được sự chú ý của người đọc với hiệu ứng trượt theo khi trang được cuộn lên\xuống.

Tiện ích này trước đây đã được một số Blogger giới thiệu. Tuy nhiên có một số nhược điểm “chết người” như : không hiển thị tốt trên trình duyệt Firefox, hoặc nếu hiển thị thì khi click vào bất cứ liên kết nào trên Blog cũng không có tác dụng ( unclickable ).
Sau khi tham khảo code từ một số website tên tuổi, CĐQTKD5A đã tìm được đoạn code ưng ý, có thể khắc phục được các lỗi nêu trên, đặc biệt là hiển thị tốt ngay cả trên trình duyệt “già nua xấu xí” IE6.

☼ Cách tiến hành:
   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Phần tử trang
   4-Tạo một widget HTML\JavaScript và chèn vào đoạn code bên dưới :


<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">      
<a href="http://cdqtkd5a.blogspot.com/"><img src="Link ảnh quảng cáo" width="125" /></a> 
</div>      
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">       
<a href="http://cdqtkd5a.blogspot.com/"><img src="Link ảnh quảng cáo" width="125" /></a>       
</div>       
<script>       
    function FloatTopDiv()      
    {      
        startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;      
        startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;      
        var d = document;      
        function ml(id)      
        {      
            var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];      
            el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};      
            el.x = startRX;      
            el.y = startRY;      
            return el;      
        }      
        function m2(id)      
        {      
            var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];      
            e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};      
            e2.x = startLX;      
            e2.y = startLY;      
            return e2;      
        }      
        window.stayTopLeft=function()      
        {      
            if (document.documentElement && document.documentElement.scrollTop)      
                var pY =  document.documentElement.scrollTop;      
            else if (document.body)      
                var pY =  document.body.scrollTop;      
             if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else  {startLY = TopAdjust;startRY = TopAdjust;};      
            ftlObj.y += (pY+startRY-ftlObj.y)/16;      
            ftlObj.sP(ftlObj.x, ftlObj.y);      
            ftlObj2.y += (pY+startLY-ftlObj2.y)/16;      
            ftlObj2.sP(ftlObj2.x, ftlObj2.y);      
            setTimeout("stayTopLeft()", 1);      
        }      
        ftlObj = ml("divAdRight");      
        //stayTopLeft();      
        ftlObj2 = m2("divAdLeft");      
        stayTopLeft();      
    }      
    function ShowAdDiv()      
    {      
        var objAdDivRight = document.getElementById("divAdRight");      
        var objAdDivLeft = document.getElementById("divAdLeft");        
        if (document.body.clientWidth < 1000)      
        {      
            objAdDivRight.style.display = "none";      
            objAdDivLeft.style.display = "none";      
        }      
        else      
        {      
            objAdDivRight.style.display = "block";      
            objAdDivLeft.style.display = "block";      
            FloatTopDiv();      
        }      
    }  
</script>       
<script>       
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");      
</script>



Trong đoạn code trên :
<a href="http://dammedautu.vn/"> : liên kết đến khi người đọc click vào. Thay http://dammedautu.vnbằng liên kết trang bạn cho phù hợp
<img src=”…”/> : banner bạn muốn hiển thị
width="125" : chiều rộng của banner. Có 2 giá trị được đánh dấu cùng màu cam
MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùng màu tím,
LeftAdjust = 5 : khoảng cách từ bìa trái trang web đến banner
RightAdjust = 5 : khoảng cách từ bìa phải trang web đến banner
TopAdjust = 10 : khoảng cách từ rìa trên trang web đến banner
Lưu ý : Do tiện ích sử dụng những giá trị xác định để điều chỉnh vị trí của banner so với trang web, do đó, tính thẩm mỹ của tiện ích sẽ phụ thuộc vào độ phân giải của màn hình máy tính.
5.  Lưu tiện ích lại là Ok.
Chia sẻ bài viết :

Đăng nhận xét

Nội quy! Đóng lại
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa
 
Hỗ trợ : Thiết kế logo nhanh | TNCOFFEE.VN | KHOINGUYENKNT Copyright © 2014. Code Thủ Thuật Tiện ích Cho Blogspot
noithatdecor.com.vn Nội thất decor
Xem tốt nhất ở độ phân giải 1024 x 768 pixel