Cách chèn banner cố định 2 bên Blog

Bài này mình sẽ hướng dẫn các bạn chèn banner cố định 2 bên Blog theo cách đơn giản nhất, các bạn không rành về code cũng có thể làm được. Các bạn chỉ cần chèn code ngay sau thẻ <body> và thiết lập cho phù hợp với giao diện Blog của bạn là được.

Cách chèn banner cố định 2 bên trong Blogspot
Ảnh minh họa

Xem demo tại: https://nhipsongnet.blogspot.com

Cách thực hiện:

Các bạn chèn đoạn code dưới đây ngay sau thẻ <body> cua template:

Copy

<b:if cond='!data:blog.isMobileRequest'> // Điều kiện không hiển thị trên mobile hay ?m=1

<div id="slideads">

  <div id="slideads1">

    <!-- Code quảng cáo hay link ảnh bên trái kích thước tối đa rộng 160px cao 600px -->

  </div>

  <div id="slideads2">

    <!-- Code quảng cáo hay link ảnh bên phải kích thước tối đa rộng 160px cao 600px -->

  </div>

</div>

<style>

#slideads{position:relative;}

#slideads1,#slideads2{position:absolute;}

#slideads1{left: 0;}

#slideads2{right:0;}

</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<script>//<![CDATA[

var mq=window.matchMedia("(min-width: 1030px)");mq.matches&&(!function(t,o){t.extend({stickysidebarscroll:function(o,e){if(e&&e.offset?(e.offset.bottom=parseInt(e.offset.bottom,10),e.offset.top=parseInt(e.offset.top,10)):e.offset={bottom:100,top:0},(o=t(o))&&o.offset()){var s=o.offset().top,i=o.offset().left,f=(o.outerHeight(!0),o.outerWidth()),n=o.css("position"),a=o.css("top"),c=parseInt(o.css("marginTop"),10),p=t(document).height(),r=t(document).height()-e.offset.bottom,d=0,m=!1,h=!1;(!0===e.forcemargin||navigator.userAgent.match(/bMSIE (4|5|6)./)||navigator.userAgent.match(/bOS (3|4|5|6)_/)||navigator.userAgent.match(/bAndroid (1|2|3|4)./i))&&(h=!0),t(window).bind("scroll resize orientationchange load",o,function(g){p!==t(document).height()&&(r=t(document).height()-e.offset.bottom,p=t(document).height()),0==m&&(s=o.offset().top);var u=o.outerHeight(),l=t(window).scrollTop();h&&document.activeElement&&"INPUT"===document.activeElement.nodeName||(m=!0,l>=s-(c||0)-e.offset.top?(d=r<l+u+c+e.offset.top?l+u+c+e.offset.top-r:0,h?o.css({marginTop:parseInt((c||0)+(l-s-d)+2*e.offset.top,10)+"px"}):o.css({position:"fixed",top:e.offset.top-d+"px",width:f+"px"})):(m=!1,i=o.offset().left,o.css({position:n,top:a,left:i,width:f+"px",marginTop:(c||0)+"px"})))})}}})}(jQuery),$.stickysidebarscroll("#slideads1,#slideads2",{offset:{top:50,bottom:165}}));

//]]></script>

</b:if>

Lưu ý: Nếu template có sẵn link jquery.min.js thì xóa link ở trên

Cài đặt:

  • min-width: 1030px: Kích thước màn hình nhỏ nhất để script hoạt động
  • top:50: Khoảng cách tính từ đầu trang đến banner
  • bottom:165: Khoảng cách tính từ chân trang đến banner

Tùy theo độ rộng của màn hình và độ rộng của main, menu có cô định hay không? mà điều chỉnh cho phù hợp với giao diện Blog của bạn. Sau này nếu không muốn sử dụng các bạn vào template gỡ bỏ đoạn code đi là xong.

Hãy để lại một câu trả lời bạn muốn

avatar
250
  Subscribe  
Thông báo
Scroll to top
0353.456.495