Lập trình

Code tạo banner quảng cáo chạy dọc 2 bên website

Học jQuery – Chắc đã có lần các bạn vào một website nào đó thấy có 2 banner quảng cáo chạy 2 bên website rồi đúng không? Hôm này giáo trình hay sẽ hướng dẫn các bạn tạo banner quảng cáo …

Học jQuery – Chắc đã có lần các bạn vào một website nào đó thấy có 2 banner quảng cáo chạy 2 bên website rồi đúng không? Hôm này Hiếu Đặng sẽ hướng dẫn các bạn tạo banner quảng cáo chạy dọc 2 bên website bằng javascript và HTML/CSS một cách đơn giản và cũng rất chuyên nghiệp.

Tất nhiên, các bạn sẽ tìm thấy rất nhiều code trên mạng nhưng code này mình đã tối ưu chút đỉnh nên nó sẽ phù hợp với các độ phân giải màn hình. Tiện đây chia sẻ luôn đến các bạn hay làm web nhé, code này khá tiện lợi vì khi gặp màn hình vuông (độ phân giải 768×1024) thì banner sẽ không bị chèn vào trong gây khó chịu vướng víu mà nó sẽ tự mất đi, chỉ những ai sử dụng màn hình dài mới thấy được quảng cáo.

code-tao-banner-quang-cao-chay-doc-2-ben-website

Để sử dụng code này các bạn copy về đặt ở cuối website thông thường là file footer. Nhưng lưu ý là nhớ đặt trước thẻ đóng </body> nhé. (Các bạn cũng có thế page code này vào thẻ <head> nhưng mình khuyên các bạn để cuối trang để tối ưu cho việc seo website)

Dưới đây là code quảng cáo chạy 2 bên website.

<div id=”divAdRight” style=”display: block; position: fixed; top: 0px;”>
<a href=”http://giaotrinhhay.com”><img src=”http://giaotrinhhay.com/link_hinh.jpg” width=”120″ /></a>
</div>
<div id=”divAdLeft” style=”display: block; position: fixed; top: 0px;”>
<a href=”http://giaotrinhhay.com”><img src=”http://giaotrinhhay.com/link_hinh.jpg” width=”120″ /></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;
            else if (document.body)
                var pY =  document.body;
            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 = 120;RightBannerW = 120;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>”);
</script>

Các bạn nhớ thay đổi các thông số phù hợp và đường dẫn link ảnh cho đúng trước khi chạy. Chúc các bạn thành công !

Nguyễn Tấn Tài

Nguyễn Tấn Tài Founder/ CEO Giaotrinhhay.com - Giáo Trình Hay Chia Sẻ: Tài liệu SEO website, DIGITAL MARKETING, Ebook CNTT, Mẹo vặt, Phần mềm, Thủ thuật PC và kho tài liệu học tập hữu ích miễn phí.

Bài viết liên quan

DEVOPS LÀ GÌ?
DEVOPS LÀ GÌ?

DEVOPS LÀ GÌ? Devops là gì Theo Wikipedia Devops là thuật ngữ chỉ tập hợp các hoạt [...]

17
Sep
Database là gì?
Database là gì?

Database là gì? Database được gọi là Cơ sở dữ liệu, là một bộ sưu tập dữ liệu có [...]

16
Sep
Tạo Responsive và Mobile-Friendly Tooltip bằng jQuery

Việc tìm kiếm một chức năng Tooltip phù hợp với website hay blog thì không [...]

13
May
Code tự động lưu ảnh vào host khi copy bài từ nguồn khác

Như tiêu tiêu đề thôi hôm nay mình sẽ share đoạn code tự động lưu [...]

27
Apr
Tài liệu lập trình về Yii framework

Tài liệu lập trình về Yii framework Yii không phải là cái gì đó mới [...]

04
Dec
Sypex Dumper: Upload và backup dữ liệu lớn – hướng dẫn sử dụng Sypex Dumper

Xin chào các bạn, lần trước tôi có đăng bài viết làm thế nào để [...]

09
Sep

Leave a Reply