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

Thời gian qua có nhiều học viên Internet marketing Coaching hỏi Adam Thiên về cách tạo banner chạy dọc 2 bên website, chính vì vậy hôm nay Adam Thiên quyết định viết bài viết này hy vọng giúp ích cho mọi người trong quá trình phát triển website. Thưa các bạn, có thể nói 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 và các 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.

Cách tạo banner trượt hai bên

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.
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, Adam Thiên đã 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.

Mời mọi người xem tại đây:

Demo-banner-trượt-hai-bên

Và cũng theo yêu cầu của một số anh/chị trước đây, hôm nay Adam Thiên sẽ hướng dẫn các bạn cách chèn tiện ích “Banner quảng cáo trượt dọc 2 bên” vào Blog, qua 4 bước rất đơn giản sau.

Bước 1: Đăng nhập vào Blog

Bước 2: Vào bố cục

Bước 3: 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 target="_blank" href="http://khoahocinternet3hmienphi.internetmarketing.vn/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD4awOkOGeORvQoWq8rtA6IpXG2Mbcji4Piwq6HLsnTxu7TakBfL1FMSqgx9zrbdtzEGhdCRG4DsCJnZXQ_57KVEsQPqyIG-KzEjzTxcLYuiamH4fqkeVBmwpu3Gs5I5oplAksyvWu6gRm/s1600/banner-160x600.jpg" width="125" /></a>
</div>
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a target="_blank" href="http://khoahocinternet3hmienphi.internetmarketing.vn/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD4awOkOGeORvQoWq8rtA6IpXG2Mbcji4Piwq6HLsnTxu7TakBfL1FMSqgx9zrbdtzEGhdCRG4DsCJnZXQ_57KVEsQPqyIG-KzEjzTxcLYuiamH4fqkeVBmwpu3Gs5I5oplAksyvWu6gRm/s1600/banner-160x600.jpg" 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>

<a href='http://www.hocinternetmarketing.net/'>.</a>

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://www.hocinternetmarketing.net/"> : liên kết đến khi người đọc click vào. Thay http://www.hocinternetmarketing.net/ bằ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

Bước 4: Lưu tiện ích lại là OK.

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.

Chúc các bạn và anh/chị sớm thành công trên môi trường internet. Nếu có thắc mắc gì mọi người có thể để lại comments bên dưới để cùng thảo luận nhé.

Adam Thiên

http://www.hocinternetmarketing.net/