Thủ thuật chèn quảng cáo đủ các kiểu lên trang web nền tảng blogspot (đa vị trí, đa nền tảng, quảng cáo đa phong cách)

Đầu tiên xin giới thiệu kiểu quảng cáo lên mobile cực đỉnh đẹp mắt ( ads 300x200 & 300x600 dạng cố định dạng trượt ).

Bước 1 anh em tìm đoạn code :

"<b:section class='main' id='main'"
Nếu thấy showaddelement='no'>
Thì chỉnh lại thành
<b:section class='main' id='main' showaddelement='yes'>

Kế đến chèn 2 widget sau vào phía dưới :

<b:section class='main' id='main' showaddelement='yes'> :
<b:widget cond='data:blog.isMobileRequest and data:view.isPost' id='HTML9' locked='false' title='Quảng cáo bài viết 300 x 600' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'>

<img alt="Ads" src="https://www.5banners.com/store/img/cms/00108.gif" style="margin-top: 5px;box-shadow: 0px 0px 12px rgba(50, 50, 50, 0.2);width: 100%;margin-bottom: 10px;border: 1px dotted #ccc;"/></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>

<b:attr name='class' value='banner-body hidden'/>

<b:attr name='data-version' value=''/>

<b:attr name='id' value=''/>

<div class='banner-content'>

    <div class='banner-position'>

      <div class='banner-display'><div class='banner-iframe'><data:content/></div></div>

    </div>

</div>

</b:includable>

</b:widget>
<b:widget cond='data:blog.isMobileRequest and data:view.isPost' id='HTML10' locked='false' title='Quảng cáo bài viết 300x200' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'><![CDATA[<img src="https://mediads.in/wp-content/uploads/2020/08/banner-ads.jpg" alt="Ads"/>]]></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>

<b:attr name='class' value='banner-post hidden'/>

<b:attr name='data-version' value=''/>

<b:attr name='id' value=''/>

<div class='banner-300'><data:content/></div>

</b:includable>
</b:widget>

Bước kế tiếp chèn Css sau trên thẻ code </head> :

<style>
banner-post.hidden, .banner-body.hidden {

    display: none;

}

.banner-post {

   background: #f8f9fa;

   margin: 20px -15px;

}

.banner-post:before {

    content: "Quảng cáo";

    display: block;

    text-align: center;

    font-size: 12px;

    color: #ccc;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin: -5px 0 5px 0;

}

.banner-post>.widget-content {

    width: 300px;

    margin: 0 auto;

}

.banner-post a {

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    align-items: center;

    justify-content: center;

}

.banner-post img {

    width: 100%;

    height: auto;

}

.banner-body {

    position: relative;

    top: 20px;

}

.banner-body:after {

    content: "Kéo xuống để xem tiếp sau quảng cáo";

    font-size: 12px;

    color: #ccc;

    text-transform: uppercase;

    text-align: center;

    position: absolute;

    top: -35px;

    left: 0;

    right: 0;

}

.banner-content {

    width: 100%;

    margin:20px 0;

}

.banner-position {

    position: absolute;

    width: 100%;

}

.banner-display {

    display: inline-block;

    position: fixed;

    top: 0;

    left: 0;

    -webkit-backface-visibility: hidden;

    -webkit-transform: translate3d(0,0,0);

}

.banner-iframe {

    display: block;

    position: relative;

}

@media (min-width:481px) {

    .banner-body,.banner-post {

        display: none!important;

    }

}
</style>

Sau đó chèn tiếp đoạn Script sau trên thẻ </body> :

<script>//<![CDATA[

window.addEventListener('load',function(){

    var a=15, // QC hiển thị sau mỗi 15 thẻ <br>

      b=$('.banner-post'),

      c='<div class="banner-post">'+b.html()+'</div>',

      d=$('.banner-body'),

      br=$('.post-body br'),

      e=Math.ceil(br.length/2)

    if(br.length!=''){

      if(b.length!=''){

        if(br.length>a)for(var i=a;i<br.length;i+=a)$(c).insertAfter(br[i])

        $(b).remove()

      }

      if(d.length!=''){

        $(d).insertAfter(br[e]).removeClass('hidden')

        var _w=$(window).width()+'px',_h=$(window).height()+'px'

        $('.banner-content').css({'height':_h})

        $('.banner-position').css({'height':_h,'clip':'rect(0 '+_w+' '+_h+' -20px)'})

        $('.banner-display').css({'width':_w,'height':_h})

        $('.banner-iframe').css({'height':_h})

      }

    }

})

//]]></script>

Cuối cùng lưu lại và thưởng thức thành quả : Anh em có thể tham khảo mẫu quảng cáo theo link sau :

https://www.digitalnomad.vn/2021/02/danh-sach-tieu-de-bai-viet-tuyen-chon-sap-xep-theo-tung-chuyen-mucM5w1.html

Loại quảng cáo thứ 2 giới thiệu với anh em là mẫu quảng cáo ẩn hiện vào cuối trang (Sticky Ads Botom)

Code quảng cáo đơn giản gọn nhẹ a / e chỉ cần copy code dưới đây dán vào trên thẻ </body> là ok con dê :

<style>
.sticky_bottom{position:fixed;bottom:0;width:100%;max-width:2024px;z-index:999;background:#f2f2f2;padding:10px 5px 5px;text-align:center;box-sizing:border-box}
.button_sticky_bottom{position:absolute;width:40px;height:30px;background:#f2f2f2;top:-20px;padding:10px;border-radius:100%;z-index:888;left:50%;margin-left:-15px;text-align:center}
.ads_sticky_bottom{position:relative;z-index:999}
</style>
<div class='sticky_bottom'>
<a class='button_sticky_bottom' href='javascript:;'><i class='fa fa-angle-down'/> </a>
<div class='ads_sticky_bottom' style='display: block;'>
<font color='red' size='3'>
𝕕𝕚𝕘𝕚𝕥𝕒𝕝𝕟𝕠𝕞𝕒𝕕.𝕧𝕟
</font>
</div>
</div>
<script type='text/javascript'>
    $('.button_sticky_bottom').click(function(){
        $(".ads_sticky_bottom").slideToggle();
    })
</script>

Loại quảng cáo thứ 3 giới thiệu với anh em là mẫu quảng cáo dạng Float hiển thị cố định góc trái, góc phải - ở giữa khu vực bên trái & bên phải

Dạng quảng cáo Float cũng rất đơn giản gọn nhẹ tương tự như quảng cáo sticky bottom ads a / e chỉ cần copy code dưới đây dán vào trên thẻ </body> :

Dạng quảng cáo Float đầu & cuối blog bên trái - bên phải loại quảng cáo này phù hợp sử dụng quảng cáo dạng Text không chiếm nhiều diện tích làm che lấp nội dung trên Web-blog :

<style>
.float-contact-right {
position: fixed;
bottom: 40px;
right: 20px;
z-index: 99999;
}
</style>
<style>
.float-contact-left {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99999;
}
.chat-zalo {
background: #8eb22b;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-face {
background: #125c9e;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.float-contact .hotline {
background: #d11a59!important;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-zalo a, .chat-face a, .hotline a {
font-size: 18px;
color: white;
font-weight: 400;
text-transform: none;
line-height: 0;
}
}

</style>

Nếu không muốn hiển thị trên điện thoại thì chèn thêm code Css vào dưới </style> :

@media (max-width: 549px){
.float-contact{
display:none
}

<div class='float-contact-right'>

<script type='text/javascript'>
quotes2 = new Array()
quotes2[0] = "<a href='https://shorten.asia/rBWaAyk6'><button class='chat-zalo'>Sắm tết</button></a>"
quotes2[1] = "<a href='https://shorten.asia/HJepG516'><button class='hotline'>Ngày Tết trang trí nhà cửa</button></a>"
quotes2[2] = "<a href='https://shorten.asia/Q6hHHg8K'><button class='chat-face'>Ngày tết làm mới đồ dùng phòng ăn phòng bếp </button></a>"
quotes2[3] = "<a href='https://shorten.asia/V5a9rcHW'><button class='hotline'>Siêu Sale mùa Tết</button></a>"
randomquote2 = Math.random() * (quotes2.length)
randomquote2 = Math.floor(randomquote2)
document.write(quotes2[randomquote2])
</script>

</div>

<div class='float-contact-left'>

<script type='text/javascript'>
quotes = new Array()
quotes[0] = "<a href='https://shorten.asia/rBWaAyk6'><button class='chat-zalo'>Sắm tết</button></a>"
quotes[1] = "<a href='https://shorten.asia/HJepG516'><button class='hotline'>Ngày Tết trang trí nhà cửa</button></a>"
quotes[2] = "<a href='https://shorten.asia/Q6hHHg8K'><button class='chat-face'>Ngày tết làm mới đồ dùng phòng ăn phòng bếp </button></a>"
quotes[3] = "<a href='https://shorten.asia/V5a9rcHW'><button class='hotline'>Siêu Sale mùa Tết</button></a>"
randomquote = Math.random() * (quotes.length)
randomquote = Math.floor(randomquote)
document.write(quotes[randomquote])
</script>

</div>

Sau đây là các kiểu quảng cáo tổng hợp

Chèn hình ảnh quảng cáo ngẫu nhiên lên đầu bài viết :

Các bạn tìm đoạn code sau : <data:post.body/>
Chèn phía trên nó đoạn code :

Đoạn code ngẫu nhiên ( Ha1 ) :

<script type='text/javascript'>
quotes2head = new Array()
quotes2head[0] = "<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBGW-EGCxhIfwzc0Vn228ZVJ0MNYgP_D-z8jV-FioLGZ2C0mN-x8FGjzljW7TTGl8ClhfupkR7dc_qBzhOzRctm0qM7qFgLd3OjkrjQMzSqpmEnvZat9UMaGr0D3yq8kwfmZdh4fB-MIQ/s1600/Mat-ban-ghe-hoc-sinh-ban-ghe-cafe-ban-ghe-lam-viecOsE858.png'><img alt='Bàn ghế học sinh,bàn ghế cafe' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBGW-EGCxhIfwzc0Vn228ZVJ0MNYgP_D-z8jV-FioLGZ2C0mN-x8FGjzljW7TTGl8ClhfupkR7dc_qBzhOzRctm0qM7qFgLd3OjkrjQMzSqpmEnvZat9UMaGr0D3yq8kwfmZdh4fB-MIQ/s1600/Mat-ban-ghe-hoc-sinh-ban-ghe-cafe-ban-ghe-lam-viecOsE858.png' style='margin-top: 5px;box-shadow: 0px 0px 12px rgba(50, 50, 50, 0.2);width: 100%;margin-bottom: 10px;border: 1px dotted #ccc;'/></a>"
quotes2head[1] = "<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYcamAFSlWHQXt1cFaMCqpE276VGWq9ztK0P9wNhcD-iKeozSZ_uU2OCs7biHmri50HEmvyGJmoZGrtkztVKfM8aZji4hd3m7itgmGtPjs6Xscp0S9WoEC8nwmwf8IRoztkoAweog9HdM/s16000/Marketing-banghe-thotgo-remcua.png'><img alt='Bàn ghế, thớt gỗ, rèm cửa marketing online' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYcamAFSlWHQXt1cFaMCqpE276VGWq9ztK0P9wNhcD-iKeozSZ_uU2OCs7biHmri50HEmvyGJmoZGrtkztVKfM8aZji4hd3m7itgmGtPjs6Xscp0S9WoEC8nwmwf8IRoztkoAweog9HdM/s16000/Marketing-banghe-thotgo-remcua.png' style='margin-top: 5px;box-shadow: 0px 0px 12px rgba(50, 50, 50, 0.2);width: 100%;margin-bottom: 10px;border: 1px dotted #ccc;'/></a>"
randomquote2head = Math.random() * (quotes2head.length)
randomquote2head = Math.floor(randomquote2head)
document.write(quotes2head[randomquote2head])
</script>

Chèn hình ảnh quảng cáo ngẫu nhiên lên cuối bài viết :

Tương tự các chèn quảng cáo ngẫu nhiên đầu bài viết các bạn tìm đoạn code sau : <data:post.body/>
Chèn đoạn code ( Ha1 ) phía dưới nó.

Đang tiếp tục cập nhật...