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'>&lt;!--
&lt;img src=&quot;https://www.5banners.com/store/img/cms/00108.gif&quot; alt=&quot;Ads&quot;/&gt;--&gt;

&lt;img alt=&quot;Ads&quot; src=&quot;https://www.5banners.com/store/img/cms/00108.gif&quot; style=&quot;margin-top: 5px;box-shadow: 0px 0px 12px rgba(50, 50, 50, 0.2);width: 100%;margin-bottom: 10px;border: 1px dotted #ccc;&quot;/&gt;</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> :

<!--Css chen quang cao tu dong mobile-->
<style>
banner-post.hidden, .banner-body.hidden {

    display: none;

}

.banner-post {

   background: #f8f9fa;

   margin: 20px -15px;

}

.banner-post:before {

    content: &quot;Quảng cáo&quot;;

    display: block;

    text-align: center;

    font-size: 12px;

    color: #ccc;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin: -5px 0 5px 0;

}

.banner-post&gt;.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: &quot;Kéo xuống để xem tiếp sau quảng cáo&quot;;

    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> 
<!--End Css chen quang cao tu dong mobile--> 
Sau đó chèn tiếp đoạn Script sau trên thẻ </body> :

<!--Chen quang cao tu dong mobile-->
<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>   
<!--End chen quang cao tu dong mobile-->     

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ê :

<!--Ads chan trang -->
 <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'>
    $(&#39;.button_sticky_bottom&#39;).click(function(){
        $(&quot;.ads_sticky_bottom&quot;).slideToggle();
    })
</script> 
<!--end Ads chan trang -->

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 :

<!-- code quảng cáo top bên trái & bên phải -->
<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'>
<!-- RANDOM QUOTES -->
<script type='text/javascript'>
quotes2 = new Array()
quotes2[0] = &quot;<a href='https://shorten.asia/rBWaAyk6'><button class='chat-zalo'>Sắm tết</button></a>&quot;
quotes2[1] = &quot;<a href='https://shorten.asia/HJepG516'><button class='hotline'>Ngày Tết trang trí nhà cửa</button></a>&quot;
quotes2[2] = &quot;<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>&quot;
quotes2[3] = &quot;<a href='https://shorten.asia/V5a9rcHW'><button class='hotline'>Siêu Sale mùa Tết</button></a>&quot;
randomquote2 = Math.random() * (quotes2.length)
randomquote2 = Math.floor(randomquote2)
document.write(quotes2[randomquote2])
</script>
<!-- RANDOM QUOTES -->
</div>  

<div class='float-contact-left'>
<!-- RANDOM QUOTES -->
<script type='text/javascript'>
quotes = new Array()
quotes[0] = &quot;<a href='https://shorten.asia/rBWaAyk6'><button class='chat-zalo'>Sắm tết</button></a>&quot;
quotes[1] = &quot;<a href='https://shorten.asia/HJepG516'><button class='hotline'>Ngày Tết trang trí nhà cửa</button></a>&quot;
quotes[2] = &quot;<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>&quot;
quotes[3] = &quot;<a href='https://shorten.asia/V5a9rcHW'><button class='hotline'>Siêu Sale mùa Tết</button></a>&quot;
randomquote = Math.random() * (quotes.length)
randomquote = Math.floor(randomquote)
document.write(quotes[randomquote])
</script>
<!-- RANDOM QUOTES -->
</div>  
<!-- End code quảng cáo top bên trái & bên phải -->


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 ) :

<!-- RANDOM QUOTES -->
<script type='text/javascript'>
quotes2head = new Array()
quotes2head[0] = &quot;<a href='https://1.bp.blogspot.com/-Wz1VldCf_Eg/YD95-o0JSOI/AAAAAAAACxc/3VhIfhK9Bp4jB-pyA2hhH4ppKfyvZbPRQCLcBGAsYHQ/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://1.bp.blogspot.com/-Wz1VldCf_Eg/YD95-o0JSOI/AAAAAAAACxc/3VhIfhK9Bp4jB-pyA2hhH4ppKfyvZbPRQCLcBGAsYHQ/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>&quot;
quotes2head[1] = &quot;<a href='https://1.bp.blogspot.com/-SxLYWK8BYVY/YEeTc9c_ZhI/AAAAAAAAC0w/Wx_hNRuQaGwsWeaU1izzZty6MTCw1dagACLcBGAsYHQ/s16000/Marketing-banghe-thotgo-remcua.png'><img alt='Bàn ghế, thớt gỗ, rèm cửa marketing online' src='https://1.bp.blogspot.com/-SxLYWK8BYVY/YEeTc9c_ZhI/AAAAAAAAC0w/Wx_hNRuQaGwsWeaU1izzZty6MTCw1dagACLcBGAsYHQ/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>&quot;
randomquote2head = Math.random() * (quotes2head.length)
randomquote2head = Math.floor(randomquote2head)
document.write(quotes2head[randomquote2head])
</script>
<!-- RANDOM QUOTES --> 

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...

   

✨ Bài viết được thực hiện bởi Blogger Gia Bảo, Freelancer Marketing Online, có nhiệm vụ kết nối khách cần mua với nhà phân phối, công ty sản xuất. BLOG GIA BẢO không phải đơn vị trực tiếp bán hàng trên website mà chỉ là nơi giúp bên mua gặp gỡ bên bán.

✨ Nổi bật : Mô hình Freelancer Marketing Online Cùng Nhà Phân Phối / Công Ty Sản Xuất Triển Khai Kênh Bán Hàng Trực Tuyến Thông Qua Việc Mở Gian Hàng TMĐT : Xem thêm,....

Kem chống nắng Biore UV Aqua Rich Watery Essence/Gel SPF 50+/ PA++++ 50ml/90ml

Xem Giá Bán
Xem thêm : Chăm Sóc Cơ Thể
Mua ngay

Bộ bàn ăn gỗ cao su gấp gọn

Xem Giá Bán
Tìm hiểu thêm về : Gỗ ghép
Đặt Mua ngay