Home » wordpress » Code tạo banner quảng cáo banner chạy dọc 2 bên web - Blogspot - Wordpress

20/1/14

Code tạo banner quảng cáo banner chạy dọc 2 bên web - Blogspot - Wordpress

20/1/14 by Unknown

Code tạo banner quảng cáo banner chạy dọc 2 bên web - Blogspot.Hướng dẫn tạo quảng cáo trượt 2 bên trang web.Code tạo banner quảng cáo banner chạy dọc 2 bên website.Javasrcipt quảng cáo chạy 2 bên trang web.Code tạo banner quảng cáo banner chạy dọc 2 bên web - Blogspot khi kéo chuột xuống thì nó chạy theo

Sau đây Shop Gấu Mèo xin chia sẻ đến các bạn hay làm web-blogspot đang có nhu cầu tạo banner quảng cáo, Code này khá tiện lợi vì khi gặp màn hình vuông (độ phân giải 768x1024) 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, nhưng chỉ những ai sử dụng màn hình dài mới thấy được quảng cáo. Và code này đã fix cho nằm im và chạy dọc rất êm ái ko chạy giựt giựt gây nhức mắt cho người dùng

Code tạo banner quảng cáo banner chạy dọc 2 bên web - Blogspot Fix đứng
  • Đối với Blogspot
    B1- Đăng nhập vào Blog
    B2- Vào bố cục (Layout)
    B3- Chọn Thêm tiện ích (add widget)
    B4-Tạo một widget HTML\Javascripts và chèn vào đoạn code bên dưới :
  • Còn đối với website thì bạn chỉ cần  thêm phần code dưới lên trên thẻ đóng </body>  ( Chú ý: các bạn thay đổi phần chữ màu đỏ theo ý thích của bạn nhé )


 <div id="left_ads_float">
        <a href="Link đường dẫn" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY27P9voxksQo29ofyzvhK8_-ya7AnNty-WxNVCnZOkI1Av5pZCM-WOhO8KoOOtRcHMLVudkilgaTaXoZ_1aVxoU9fSu6QJmevyMOoNaXkyAtTXlG72TJXKqsfRt0t7nzj1c9legJ7Spo/s1600/fptarena1.png" width="120" /></a>
    </div>
    <div id="right_ads_float">
       <a href="Link đường dẫn" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY27P9voxksQo29ofyzvhK8_-ya7AnNty-WxNVCnZOkI1Av5pZCM-WOhO8KoOOtRcHMLVudkilgaTaXoZ_1aVxoU9fSu6QJmevyMOoNaXkyAtTXlG72TJXKqsfRt0t7nzj1c9legJ7Spo/s1600/fptarena1.png" width="120" /></a>
    </div>
<style>
#left_ads_float
{
    bottom:24px;
    left: 10px;
    position:fixed; }
#right_ads_float
{
    bottom:24px;
    right: 10px;
    position:fixed;
}
</style>
<script>
var vtlai_remove_fads=false;
function vtlai_check_adswidth()
    {
        if(vtlai_remove_fads)
        {
            document.getElementById('left_ads_float').style.display='none';
            document.getElementById('right_ads_float').style.display='none';
            return;
        }else if(document.cookie.indexOf('vtlai_remove_float_ads')!=-1)
        {
            vtlai_remove_fads=true;
            vtlai_check_adswidth();
            return;
        }
        else
        {
            var lwidth=parseInt(document.body.clientWidth);
            if(lwidth<1110)
            {
                document.getElementById('left_ads_float').style.display='none';
                document.getElementById('right_ads_float').style.display='none';
            }
            else
            {
                document.getElementById('left_ads_float').style.display='block';
                document.getElementById('right_ads_float').style.display='block';
            }
            setTimeout('vtlai_check_adswidth()',10);
        }
    }
</script>
   
Cách tạo Banner quảng cáo trượt dọc 2 bên cho blogspot / website

- Dạng này là dạng 2 banner ở 2 bên web. Khi kéo chuột xuống sẽ có hiệu ứng 2 banner trượt theo khi kéo chuột xuông

Cách làm như sau

Đối với website: Bạn chỉ cần thêm phần code dưới lên trên thẻ đóng </body>

Đối với Blogspot
B1- Đăng nhập vào Blog
B2- Vào bố cục (Layout)
B3- Chọn Thêm tiện ích (add widget)
B4-Tạo một widget HTML\Javascripts và chèn vào đoạn code bên dưới :

Code tạo banner quảng cáo banner chạy dọc 2 bên web - Blogspot.Hướng dẫn tạo quảng cáo trượt 2 bên trang web.Code tạo banner quảng cáo banner chạy dọc 2 bên website.Javasrcipt quảng cáo chạy 2 bên trang web.Code tạo banner quảng cáo banner chạy dọc 2 bên web - Blogspot khi kéo chuột xuống thì nó chạy theo
Sau đây Shop Gấu Mèo xin chia sẻ đến các bạn hay làm web-blogspot đang có nhu cầu tạo banner quảng cáo, Code này khá tiện lợi vì khi gặp màn hình vuông (độ phân giải 768x1024) 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, nhưng chỉ những ai sử dụng màn hình dài mới thấy được quảng cáo. Và code này đã fix cho nằm im và chạy dọc rất êm ái ko chạy giựt giựt gây nhức mắt cho người dùng

Code tạo banner quảng cáo banner chạy dọc 2 bên web - Blogspot Fix đứng
  • Đối với Blogspot
    B1- Đăng nhập vào Blog
    B2- Vào bố cục (Layout)
    B3- Chọn Thêm tiện ích (add widget)
    B4-Tạo một widget HTML\Javascripts và chèn vào đoạn code bên dưới :
  • Còn đối với website thì bạn chỉ cần  thêm phần code dưới lên trên thẻ đóng </body>  ( Chú ý: các bạn thay đổi phần chữ màu đỏ theo ý thích của bạn nhé )( thêm vào phần Header.php trước phần "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">")


 <div id="left_ads_float">
        <a href="http://shopgaumeo.net/" target="_blank"><img border="0" src="http://shopgaumeo.net/wp-content/uploads/2014/01/tet3.png" width="120" /></a>
    </div>
    <div id="right_ads_float">
       <a href="http://shopgaumeo.net/" target="_blank"><img border="0" src="http://shopgaumeo.net/wp-content/uploads/2014/01/tet-2.png" width="120" /></a>
    </div>
<style>
#left_ads_float
{
    bottom:24px;
    left: 10px;
    position:fixed; }
#right_ads_float
{
    bottom:24px;
    right: 10px;
    position:fixed;
}
</style>
<script>
var vtlai_remove_fads=false;
function vtlai_check_adswidth()
    {
        if(vtlai_remove_fads)
        {
            document.getElementById('left_ads_float').style.display='none';
            document.getElementById('right_ads_float').style.display='none';
            return;
        }else if(document.cookie.indexOf('vtlai_remove_float_ads')!=-1)
        {
            vtlai_remove_fads=true;
            vtlai_check_adswidth();
            return;
        }
        else
        {
            var lwidth=parseInt(document.body.clientWidth);
            if(lwidth<1110)
            {
                document.getElementById('left_ads_float').style.display='none';
                document.getElementById('right_ads_float').style.display='none';
            }
            else
            {
                document.getElementById('left_ads_float').style.display='block';
                document.getElementById('right_ads_float').style.display='block';
            }
            setTimeout('vtlai_check_adswidth()',10);
        }
    }
</script>
   
Cách tạo Banner quảng cáo trượt dọc 2 bên cho blogspot / website

- Dạng này là dạng 2 banner ở 2 bên web. Khi kéo chuột xuống sẽ có hiệu ứng 2 banner trượt theo khi kéo chuột xuông

Cách làm như sau

Đối với website: Bạn chỉ cần thêm phần code dưới lên trên thẻ đóng </body>

Đối với Blogspot
B1- Đăng nhập vào Blog
B2- Vào bố cục (Layout)
B3- Chọn Thêm tiện ích (add widget)
B4-Tạo một widget HTML\Javascripts 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://shopgaumeo.net/"><img src="http://shopgaumeo.net/wp-content/uploads/2014/01/tet3.png" width="125" /></a>
</div>   
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">   
<a href="http://shopgaumeo.net/"><img src="http://shopgaumeo.net/wp-content/uploads/2014/01/tet-2.png" 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>



 Phần bạn cần tùy chỉnh code

  • http://shopgaumeo.net/ : là liên kết mở ra khi người đọc click vào ảnh.
  • Phần màu cam trong đoạn code <img src="…"/>  là link ảnh banner trượt dọc sẽ hiển thị
  • width="125" : chiều rộng của banner. Có 2 giá trị được đánh dấu 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ừ mép trái trang web đến banner
  • RightAdjust = 5 : khoảng cách từ mép phải trang web đến banner
  • TopAdjust = 10 : khoảng cách từ mép trên trang web đến banner



 Chúc các bạn thành công !

 Phần bạn cần tùy chỉnh code

  • http://shopgaumeo.net/ : là liên kết mở ra khi người đọc click vào ảnh.
  • Phần màu cam trong đoạn code <img src="…"/>  là link ảnh banner trượt dọc sẽ hiển thị
  • width="125" : chiều rộng của banner. Có 2 giá trị được đánh dấu 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ừ mép trái trang web đến banner
  • RightAdjust = 5 : khoảng cách từ mép phải trang web đến banner
  • TopAdjust = 10 : khoảng cách từ mép trên trang web đến banner



 Chúc các bạn thành công !

Tags: ,
author

Bài viết này được sưu tầm bởi Shop Gấu Mèo

Thông tin chi tiết xem tại Website

Những bài viết liên quan

0 Responses to “Code tạo banner quảng cáo banner chạy dọc 2 bên web - Blogspot - Wordpress”

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)

Featured Posts

© 2013 SƯU TẬP WORDPRESS - BLOGGER. All rights reserved.
Kiều Trung Kiên | Shop Gấu Mèo