Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 81
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    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.
                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn