Thứ Sáu, ngày 10 tháng 4 năm 2015

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

Code tạo banner quảng cáo banner chạy dọc 2 bên Blogspot và web để kiếm thêm tiền thu nhập từ quảng cáo giúp tăng doanh thu cho cá nhân cũng như cho công ty.
Web bạn hay blogspot của bạn có lượng vitsit lớn, khách hàng muốn mua quảng cáo nhưng các vị trí quảng cáo có thể chèn hết rồi bây giờ chỉ còn 2 bên chưa chèn, bạn muốn bán quảng cáo 2 bên đó nhằm kiếm thêm thu nhập, hôm nay chia sẻ 69 xin hướng dẫn đến với các bạn cách để tạo quảng cáo dọc 2 bên web
Xin bật mí với các bạn là cách này không chỉ giúp có thể tạo quảng cáo 2 bên mà còn có thể giúp các bạn không muốn tạo quảng cáo 2 bên thêm một thanh lề có nút google + nút like facebook, hay là các nút chia sẻ.... 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 Blogspot và website Fix Đứng

Code tạo banner quảng cáo banner chạy dọc 2 bên Blogspot và web
Đố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="http://3.bp.blogspot.com/-DFWCRf2oANg/UmDs8ZxWtiI/AAAAAAAAFC0/0Ecu36I5MgI/s1600/fptarena1.png" width="120" /></a>

    </div>

    <div id="right_ads_float">

       <a href="Link đường dẫn" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-DFWCRf2oANg/UmDs8ZxWtiI/AAAAAAAAFC0/0Ecu36I5MgI/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
Chúng ta thường áp dụng cách này nhiều hơn cách phía trước

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
Đố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://www.chiase69.com"><img src="http://3.bp.blogspot.com/-DFWCRf2oANg/UmDs8ZxWtiI/AAAAAAAAFC0/0Ecu36I5MgI/s1600/fptarena1.png" width="125" /></a>

</div>    

<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">    

<a href="www.chiase69.com"><img src="http://3.bp.blogspot.com/-DFWCRf2oANg/UmDs8ZxWtiI/AAAAAAAAFC0/0Ecu36I5MgI/s1600/fptarena1.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://www.chiase69.com/ : 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
Nhận Chỉnh Sửa Tối Ưu Cho Blogspot
Liên Hệ
Email: anhhunglh@gmail.com
Yahoo: anhhung_249
Skype: anhhung249

Code tạo banner quảng cáo banner chạy dọc 2 bên Blogspot và web
  • Blogger Comments
  • Facebook Comments

30 nhận xét:

  1. nếu muốn làm cho banner hai bên cố định có được không anh - em muốn để chế độ trượt : anh xem giúp blog em : duy3s.com

    Trả lờiXóa
  2. @Ngô Lượng vào bố cục để thay đổi

    Trả lờiXóa
  3. Thanks đã share :)
    mình nghĩ code trên hoặc dưới add vào Blogspot widget HTML\Javascripts đều được.

    Trả lờiXóa
  4. Bạn ơi cho mình hỏi, mình thêm quảng cáo vào như vậy thì ai sẽ là người trả tiền cho mình, google adesen hay là ai muốn đặt quảng cáo thì họ sẽ liên hệ rồi trả phí cho mình vì mình thấy hình như mình muốn kiếm tiền bằng trang web của mình thì phải được sự chấp thuận của google và họ sẽ cung cấp mã cho mình rồi mình chèn vào web. Thank bạn

    Trả lờiXóa
  5. @công nguyễn văn Uh, Bạn là người kinh doanh bạn muốn quảng bá sản phẩm đó làm sản phẩm nổi bật thì bạn sẽ đặt quảng cáo 2 bên chẳng hạn. Hoặc bạn ko kinh doanh mà chỉ tạo web nhằm kiếm tiền từ quảng cáo thì khi Có khách hàng liên hệ mua quảng cáo thì bạn đặt lên, Còn có 1 trường hợp nữa là chơi các mạng quảng cáo kiếm tiền từ lượt view, lượt click như google adsense, bạn lấy code tk adsense để đặt lên

    Trả lờiXóa
  6. cám ơn bạn đã trả lời: mình có thắc mắc nữa là mình đã kích hoạt adesen thành công, bên google adesen đã gửi mã cho mình nhưng khi mình đưa vào HTML nó vẫn không hiện quảng cáo là sao nhỉ

    Trả lờiXóa
  7. @công nguyễn văn nếu đã phê duyệt 2 bước rồi thì khi lấy code có thể phải đợi lâu nhất 2 tiếng mới hiện quảng cáo

    Trả lờiXóa
  8. Mình muốn baner nằm bên ngoài của sidebar thì làm ntn bạn nhỉ. no toàn bị vào trong sidebar thôi

    Trả lờiXóa
    Trả lời
    1. Cái này nằm ngoài rồi đó bạn, chắc do web bạn kích thướng lớn quá nên nó bị đè lên sidebar, bây giờ bạn điều chỉnh kích thước nhỏ xuống cho vừa với web bạn

      Xóa
  9. nếu mình k muốn hiển thị trên mobi thì làm thế nào bạn?

    Trả lờiXóa
    Trả lời
    1. Bạn thêm code này vào css của bạn
      @media all and (max-width: 480px) {
      .left_ads_float{display: none;}
      .right_ads_float{display: none;}
      }

      Xóa
  10. sao em làm cái banner trượt theo code đó nó chỉ ra một banner bên trái thôi nhỉ

    Trả lờiXóa
    Trả lời
    1. Ở trong bài viết này có 2 code. Bạn hãy copy code phía dưới nhé. Mình kiểm tra thấy nó hiện bình thường

      Xóa
    2. e làm và đã có 2 banner nhưng khi e đổi thông số RightAdjust thì kích thước banner phải cũng thay đổi theo

      Xóa
    3. Là sao nhỉ. Vẫn không hiểu lắm. Nếu thay đổi kích thước mà banner không thay đổi gì thì có lẽ do kích thước hình ảnh mặc định của bạn như vậy nên hình không thể thay đổi thêm được

      Xóa
    4. e cũng làm ra 1 bên trÁI thôi.huhu

      Xóa
    5. @ngocha Mình vừa mới text lên blogspot của mình và thấy hiện ra 2 bên bình thường mà

      Xóa
  11. Hơi ngoài lề xíu.Sao trang website của em nó cứ bị viền đứt bao quanh phần nội dung làm sao để bỏ đc vậy.GIúp mình với

    Trả lờiXóa
    Trả lời
    1. vào chỉnh sửa html tìm đến css. .post{background: #fff;
      border: 1px dashed #000000;
      margin: 0em 0 .6em;
      padding-top: 30px;
      padding-right: 5px;
      padding-left: 10px;
      text-align: justify;} Xóa border: 1px dashed #000000;

      Xóa
  12. cho mình xin code ẩn tiện ích HTML/javascript khi xem blog bằng màn hình nhỏ hơn 8in được không admin :D
    (chèn trực tiếp vào tiện ích HTML/javascript nhé. mình mới học làm blog nên không biết
    thanks admin!

    Trả lờiXóa
    Trả lời
    1. Bạn đang sử dụng code nào để hiển thị HTML/javascript ở các loại màn hình khác. Bạn hãy kiểm tra xem code bạn có nằm trong trong 1 thẻ div không. Nếu có thẻ div thì lấy tên thẻ đó ra vd <ddiv class="tên thẻ">......code....<d/div>.
      Sau đó @media all and (min-width:(chỗ này là kích thước. 8in thì mình không biết màn hình thế nào vì trong website thường tính theo px. bạn đổi 8in ra thành bao nhiêu px rồi đặt vào đây nhé)) {.tencode{display: none;}}

      Xóa
    2. NHớ là thêm @media all and (min-width:....... cái đoạn này vào css nha.

      Xóa
  13. Hi yến, cho mình hỏi nếu mình muốn điều chỉnh khoản cách từ đầu trang tới banner(khi thực hiện thao tác lăng chuột xuống) thì mình điều chỉnh thông số nào vậy :)

    Trả lờiXóa
  14. Cho mình hỏi thẻ body nằm trong file nào vậy? mình mới tập nên hơi gà chút :)

    Trả lờiXóa
    Trả lời
    1. bạn đang dùng blogspot hay wordpress. Nếu blog thì nó nằm trong mẫu==> chỉnh sữa html==> rồi bạn hãy ấn tổ hợp phím ctrl + F và nhập<body vào để tìm. Còn ở wordpress thì nó nằm trong file header.php

      Xóa

Top