Chèn quảng cáo vào blogspot ở các vị trí

Chèn quảng cáo vào blogspot (blogger) mới nhất 2017 ở các vị trí từ đơn giản đến phức tạp như đầu trang, cuối trang, bên phải, giữa bài viết. Bài viết này mình sẽ hướng dẫn tổng thể các bạn ở mọi vị trí.

Hướng dẫn chèn quảng cáo vào blogspot này sẽ giải quyết 2 vấn đề khó nhất : là ở giữa và float banner. Đây là những cách chèn quảng cáo nhiều bạn tìm kiếm nhất hiện nay.

1.Chèn quảng cáo bên sidebar.

Đây là việc đơn giản nhất trong chèn quảng cáo. Bạn lấy mã quảng cáo. Vào template blogger. Sau đó thêm 1 widget sidebar html rồi paste vào. Lưu ý, code ở html này giữ nguyên, không convert.

b1: Thêm Gadget.

chen quang cao sidebar

b2: Chọn  kiểu HTML/JavaScript  rồi paste code, sau đó save lại.

Nếu bạn muốn chèn 1 cái ảnh vào thì chỉ đơn giản dùng code sau:

<a href=”link bạn muốn đến cho ảnh”><img src=”link ảnh” /></a>

2.Chèn quảng cáo vào blogspot trong bài viết

Chú ý: Code quảng cáo paste trong template của blogspot các bạn nhớ covert Google Adsense  code để dùng trong XML template của Blogger.

a. Dưới tiêu đề.

Bạn dùng adsense thì nhớ dùng công cụ này để chuyển đổi:

http://adsense-convert.blogspot.com/

http://www.eblogtemplates.com/blogger-ad-code-converter/

Cách chuyển đổi rất đơn giản. Bạn vào lấy mã Adsense do Google cung cấp. Sau đó, bạn paste vào ô chứa mã adsense, tiếp tục ấn convert như hình dưới:

convert mã adsense

Sau đó tìm đoạn code sau:

<div class=’post-header-line-1’/>

– Chèn ngay vào dưới nó đoạn mã sau:

<b:if cond=’data:blog.pageType == “item”‘>
<p class=’ads’>

Thêm mã adsense đã convert

</p>
</b:if>

Lưu ý rằng đoạn <div class=’post-header-line-1’/> thường lặp lại vài lần ở các template hiện nay. Các bạn nhanh nhất là thử.

b. Giữa bài viết.

Đây là phần khó nhất. Bạn tìm <data:post.body/> rồi thay thế bằng đoạn sau:

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’adsense-content’ style=’display:block;text-align: left; padding-top:1px; padding-bottom:10px’>
Thêm mã adsense đã convert
</div></b:if>
<div id=’adsense-target’><data:post.body/>
</div>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script type=’text/javascript’>
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition);} else {parent.insertBefore(addition,target.nextSibling);}}
var adscont = document.getElementById(&quot;adsense-content&quot;);
var target = document.getElementById(&quot;adsense-target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[5]);}
</script></b:if>
</b:if>

Lưu ý: Mã adsense chuyển đổi  như trên. 5 là số thứ tự đoạn mã quảng cáo xuất hiện. (5  đoạn văn khác thuộc tính).

c. Chèn dưới mỗi bài đăng.

Rất đơn giản, bạn tìm đúng  <data:post.body/> vài lần rồi chèn dưới đoạn kiểu thế này:

<div class=’post-body entry-content’>
<p><data:post.body/></p>
<div style=’clear: both;’/>
</div>

Chèn như sau:

<b:if cond=’data:blog.pageType == “item”‘>
Thêm mã adsense đã convert </b:if>

d.Float banner – banner quảng cáo chạy dọc sidebar:

Các bạn thêm  1 widget ở sidebar, tốt nhất là widget cuối cùng. Sau đó vào html ẩn đi trên di động. Còn nếu các bạn gặp sự cố trên màn hình nhỏ hơn 1024 thì ẩn đi trên @media max-with 1024, tùy template các bạn dùng.Sau đó các bạn chỉ cần dùng đoạn code sau là chèn được quảng cáo, mày đỏ là các phần thay đổi được

<script>
var $stickyHeight = 460; //– đây là chiều cao
var $padding = 5; //
var $topOffset = 1020; //-độ cao từ top xuống- bắt đầu trượt banner- các bạn cứ thử theo là được
var $footerHeight = 200; //– khoảng cách tới kịch chân trang
/* <![CDATA[ */
function scrollSticky(){
if($(window).height() >= $stickyHeight) {
var aOffset = $(‘#sticky’).offset();
if($(document).height() – $footerHeight – $padding < $(window).scrollTop() + $stickyHeight) {
var $top = $(document).height() – $stickyHeight – $footerHeight – $padding – 185;
$(‘#sticky’).attr(‘style’, ‘position:absolute; top:’+$top+’px;’);
}else if($(window).scrollTop() + $padding > $topOffset) {
$(‘#sticky’).attr(‘style’, ‘position:fixed; top:’+$padding+’px;’);
}else{
$(‘#sticky’).attr(‘style’, ‘position:relative;’);
}
}
}
$(window).scroll(function(){
scrollSticky();
});
/* ]]> */
</script>
<div id=”sticky”>
…….(code here)
</div>

3. Kết luận chèn quảng cáo vào blogspot:

Việc chèn quảng cáo vào blogspot ở các vị trí thực ra như mình hồi đầu newbie đơn giản nhất là thử nhiều, sai thì Crl +Z lại. Nhớ làm bình tĩnh và cẩn thận là được.

Bài viết cùng Serie<< Chèn quảng cáo vào dưới bài viết bất kỳ cho Blogspot
Đọc nhiều cùng chuyên mục:

Add Comment

10 Comments

  1. Doãn Bắc Tâm
    26 Bình luận
    06/05/2017
    • Admin
      Admin
      06/05/2017
      • Doãn Bắc Tâm
        26 Bình luận
        06/05/2017
        • Thoangs
          CTV
          21/06/2017
  2. Khanh
    15 Bình luận
    07/05/2017
  3. Tạ Hữu Nam
    60 Bình luận
    07/05/2017