Thủ Thuật BlogSpot Slide dính lề trái phải, đầu trang, cuối trang ( chân trang ) Website / Blogspot

Gia Bảo

Mẫu Slide màu cam Bám Lề bên phải :

<!--Slide Bên Phải -->  
<style>
/* ==================== Form Area ======================*/
    .Slide-ben-phai-mau-cam {
        position: fixed;
        top: 0;
        left: 100%;     
        background: #fff;
        height: 100%;
        width: 350px;
        max-width: calc(100% - 45px);
        z-index: 100000;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
    .Slide-ben-phai-mau-cam.open {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14);
        box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14);
    }
 
/* ==================== Toolbar Area ======================*/
    .NoidungSlide-form-toolbar .inner {
        position: absolute;
        top: 200px;
        right: 100%;
        display: block;
        width: 30px;
        border: 1px solid #fff;
        border-right: 0;
        border-radius: 5px 0 0 5px;
        background: #fff;     
        text-align: center;
        -webkit-box-shadow: -3px 0 10px -2px rgba(0, 0, 0, 0.1);
        box-shadow: -3px 0 10px -2px rgba(0, 0, 0, 0.1);
    }
    .NoidungSlide-form-toolbar .inner a {
        display: block;
        padding: 4px;
        background: #000000;
        border-radius: 10px 0px 0px 10px;
        -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
</style>
 
 
<!-- Start Sliding Form  -->
<div class="Slide-ben-phai-mau-cam">
<!-- Start Form Toolbar -->
<div class="NoidungSlide-form-toolbar">
            <div class="inner">
<a class="trigger-option" href="#" style="background:linear-gradient(-45deg, #ffa600 0%, #ff5e03 50%);color:white;text-decoration: none; padding-right:4px;font-size: 11.5px;">                  
Seo & Mar
   ket
   ing
<!--<img src="https://image.flaticon.com/icons/svg/893/893268.svg" width="40px" />-->
</a>
</div>
    
 <!-- Noi dung code -->
 
<!--Giới Thiệu -->
<div style="font-size: 14.5px;margin: 2.5px;background: white;padding: 4.5px 8px !important;border-radius: 4px;border: 1px solid #000000;border-radius: 3px;text-align: justify;line-height: 1.4;">
<div> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaQxq6ww6IKziBofqYGB0ohiYzmSOiecyq7ftSkZKKXUypYBpLNZylCxwnj62Z_uGPPDMRvD3RGk7HMZTrkcZV56ka6bH8YEcI6HnGPGy_S_3yfEgpiHYs2jFaLqtA2dJrJjgHTwZpCE8/s1600/Logo-Blog-Gia-Bao300.png" style="float: left; margin: 0px 10px; width: 90px;"/> </div>
<b style="font-size: 25.5px;">
#CHÀO MỪNG BẠN ĐẾN VỚI BLOG GIA BẢO ! </b><br/>

Hỗ Trợ Giải Pháp Marketing, Giúp Doanh Nghiệp và Cá Nhân Kinh Doanh Bán Hàng Online Gia Tăng Doanh Số &amp; Lợi Nhuận <br/>
Tài Trợ Blog Gia Bảo :<br/>
<b>✉</b> : <b style="color:blue">Freelancervietlach@gmail.com</b> <br/>
➠ Gia Bảo Blog là nơi giới thiệu sản phẩm cho doanh nghiệp kinh doanh sản xuất :
Thớt gỗ, Gỗ ghép, Ván Mdf, Plywood... <b style="color:red">Bạn cần mua</b>
<a href="https://www.digitalnomad.vn/search/label/Nam%20Trung%20JSC">Click Here</a> <br/>
➠ Gia Bảo Blog trợ thủ đắc lực trong việc quảng bá thương hiệu,
  giới thiệu sản phẩm, dịch vụ giúp gia tăng doanh số và lợi nhuận cho doanh nghiệp.
  <b style="color:red">Bạn quan tâm</b> <a href="https://www.digitalnomad.vn/search/label/Marketing">Click Here</a> <br/>
➠ Gia Bảo Blog không phải cửa hàng kinh doanh bán hàng online mà là nơi giới thiệu nhà cung cấp,
  giải pháp, thông tin hữu ích nhằm giúp người đọc chọn mua hàng đúng chất lượng với giá tốt nhất.
  <b style="color:red">Bạn quan tâm</b> <a href="https://www.digitalnomad.vn/search/label/%C4%90i%20Ch%E1%BB%A3%20T%E1%BA%A1i%20Nh%C3%A0">Click Here</a> <br/>  
  SLΩGΔΠ : <b style="color:blue">Copy &amp; làm mọi thứ trở nên hấp dẫn hơn, lôi cuốn hơn.</b> <br/>
Hợp Tác Kinh Doanh - Bán Hàng Ký Gửi Với Doanh Nghiệp Sản Xuất Ngành Gỗ, Đơn Vị Thiết Kế - Trang Trí Nội Thất. Marketing Tiếp Thị Quảng Bá Mặt Hàng Rèm Cửa, Phụ Kiện Nội Thất, Sàn Gỗ Kỹ Thuật, Sàn Tre Ngoài Trời, Sàn Nhựa Hèm Khóa, Gỗ Cao Su, Gỗ Tràm, Ván Gỗ Ghép, Ván Mdf, Ván Plywood, Thớt Gỗ, Mặt Bàn Ghế Gỗ,...
<br/>
  SLΩGΔΠ : <b style="color:blue">Bán Cái Gì SEM Cái Đó ! Viết Phải Đúng &amp; Seo Phải Trúng.</b><br/>
Search Marketing : SEO (Search Engine Optimization) - Tối Ưu Hóa Công Cụ Tìm Kiếm -
Tăng Thứ Hạng Cho Website và PSA ( Paid Search Advertising ) - Quảng cáo tìm kiếm trả tiền. <br/>
Yêu Thích Thiết Kế Xây Dựng Nội Dung Web Markeitng Trên Nền Tảng : BlogSpot, Weebly, WordPress &amp; Shopify <br/>
Mục Tiêu : Kiếm Tiền Online Từ Mạng Quảng Cáo ( Ad Network ), Affiliate, Tìm Kiếm Nhà Tài Trợ Cần Quảng Bá Sản Phẩm, Dịch Vụ Thương HIệu Trên WebSite   <br/>
<div style="font-size: 22px;margin-top:2px"><b>Blog Marketing:</b></div>
<b style="font-size: 18px;padding-left:5px">1. www.digitalnomad.vn</b> <br/>
<b style="font-size: 18px;padding-left:5px">2. www.vietquangcao.xyz</b><br/>  
</div>  
<!--End Giới Thiệu -->        
 <!-- Noi dung code -->                  
</div>
<!-- End Form Toolbar -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
        $(".trigger-option").on("click", function (e) {
            e.preventDefault(),
                (function () {
                    $formOption.toggleClass("open");
                })();
        });
    
        var $html = $("html"),
            $formOption = $(".Slide-ben-phai-mau-cam"),
            $body = $("body");
</script>    
<!--End Slide Bên Phải -->

Mẫu Slide Picture dính lề bên phải :

<style>
 /* ==================== Form Area ======================*/
    .Slide-ben-phaiPicture {
        position: fixed;
        top: 0;
        left: 100%;
        background: #fff;
        height: 100%;
        width: 350px;
        max-width: calc(100% - 45px);
        z-index: 100000;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
    .Slide-ben-phaiPicture.open {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14);
        box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14);
    }
    /* ==================== Toolbar Area ======================*/
    .form-toolbarSlide-ben-phaiPicture .inner {
        position: absolute;
        top: 200px;
        right: 100%;
        display: block;
        width: 60px;
        border: 1px solid #fff;
        border-right: 0;
        border-radius: 5px 0 0 5px;
        background: #fff;
        text-align: center;
        -webkit-box-shadow: -3px 0 10px -2px rgba(0, 0, 0, 0.1);
        box-shadow: -3px 0 10px -2px rgba(0, 0, 0, 0.1);
    }
    .form-toolbarSlide-ben-phaiPicture .inner a {
        display: block;
        padding: 10px;
        background: #000000;
        border-radius: 10px 0px 0px 10px;
        -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
</style>
</head>
<body>
   
 
 
 
<!-- Start Sliding Form  -->
<div class="Slide-ben-phaiPicture">
             <!-- Start Form Toolbar -->
        <div class="form-toolbarSlide-ben-phaiPicture">
            <div class="inner">
                <a class="trigger-option" href="#" style="background:white;text-decoration: none;">
                 <!--          Sản Phẩm Bán Chạy Online -->
                    <img src="https://image.flaticon.com/icons/svg/893/893268.svg" width="40px" />
                </a>
            </div>
          <!-- Noi Dung Code -->
         
         
          <!-- End Noi Dung Code -->
        </div>
        <!-- End Form Toolbar -->
</div>
     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".trigger-option").on("click", function (e) {
            e.preventDefault(),
                (function () {
                    $formOption.toggleClass("open");
                })();
        });
   
        var $html = $("html"),
            $formOption = $(".Slide-ben-phaiPicture"),
            $body = $("body");
    </script>   

Mẫu Slide bên phải dạng Tab nhiều màu nổi bật :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".tabColorBenPhai").mouseover(function() {
    $(this).animate({ "left": "-=40px" }, 200 );
  });
  $(".tabColorBenPhai").mouseout(function() {
    $(this).animate({ "left": "+=40px" }, 200 );
  });

  $(".tabColorBenPhai-left").mouseover(function() {
    $(this).animate({ "left": "+=40px" }, 200 );
  });
  $(".tabColorBenPhai-left").mouseout(function() {
    $(this).animate({ "left": "-=40px" }, 200 );
  });
});

(function ( $ ) {
    $.fn.hoverSlide = function( options ) {

        var settings = $.extend({
          position: "fixed",
          color: "white",
          backgroundColor: "#abc",
          padding: "5px",
          font:"400 15px Lato, sans-serif",
          lineHeight: "1.8",
          left: "",
          right: "-50px",
          width: "120px",
          borderRadius: "5px",
          top: "60px",
          zIndex: 99,
          opacity: "",
          cursor: "pointer"
        }, options );

        return this.css({
          position: settings.position,
          color: settings.color,
          backgroundColor: settings.backgroundColor,
          padding: settings.padding,
          font: settings.font,
          lineHeight: settings.lineHeight,
          left: settings.left,
          right: settings.right,
          width: settings.width,
          borderRadius: settings.borderRadius,
          top: settings.top,
          zIndex: settings.zIndex,
          opacity: settings.opacity,
          cursor: settings.cursor
        });
    };
}( jQuery )); 
    </script> 

    <div id="click1-tabColorBenPhai" class="tabColorBenPhai tabColorBenPhai1"> SALE</div>
    <div id="click2-tabColorBenPhai" class="tabColorBenPhai tabColorBenPhai2"> SEO</div>
    <div id="click3-tabColorBenPhai" class="tabColorBenPhai tabColorBenPhai3"> MARKETING</div>
    <div id="click4-tabColorBenPhai" class="tabColorBenPhai tabColorBenPhai4"> BLOG</div>-->

    <script>
      $(".tabColorBenPhai1").hoverSlide({
        backgroundColor: "#2196F3"
      });

      $(".tabColorBenPhai2").hoverSlide({
        top: 120,
        backgroundColor: "#F1C40F"
      });

      $(".tabColorBenPhai3").hoverSlide({
        top: 180,
        backgroundColor: "#f44336"
      });

      $(".tabColorBenPhai4").hoverSlide({
        top: 240,
        backgroundColor: "#555"
      });
    </script>
 

Mẫu Slide Dính Chân Trang ( Menu Footer đơn giản mà hiệu quả phù hợp với template Median Ui ) :

<!-- Link Chân Trang -->  
<b:if cond='data:blog.isMobileRequest'>
<!--Code hiển thị nội dung trên mobile-->
<div style='z-index:9999999;font-size: 11.5px;background: white;margin-top: 2px;padding-top: 2px;padding-left: 10px;padding-right: 10px;border-radius: 4px;border: 1px solid black;border-radius: 3px;text-align: justify;position: Fixed; bottom: 0; left: 0px;width:100%'>
<b>
<a href='https://www.digitalnomad.vn/search?q=th%E1%BB%9Bt+g%E1%BB%97'>#Mua Thớt Gỗ</a> &amp;nbsp;
<a href='https://www.digitalnomad.vn/2021/03/van-ghep-gia-re-pho-thong-go-ghep-tieu-chuan-xuat-khau-la-giU9p3e3.html'>#Mua Gỗ Ghép</a> &amp;nbsp;
<a href='https://www.digitalnomad.vn/2021/03/go-soi-dung-vao-viec-gi-mua-o-dau-chat-luong-gia-reX5M2.html'>#Mua Gỗ Sồi</a> &amp;nbsp;
<a href='https://www.digitalnomad.vn/2021/06/mua-van-mdf-hdf-plywood-van-tron-phu-melamine-laminate-acrylic-veneerBf421.html'>#Mua Ván Mdf &amp; Plywood </a> &amp;nbsp;
</b>  
</div>
<b:else/>
 
</b:if>  
<!-- End Link Chân Trang -->  

Mẫu Slide Dính đầu Trang :

<!-- Link Header -->  
<b:if cond='data:blog.isMobileRequest'>
<!--Code hiển thị nội dung trên mobile-->
<div style='z-index:9999999;font-size: 11.5px;background: white;margin-top: 2px;padding-top: 2px;padding-left: 10px;padding-right: 10px;border-radius: 4px;border: 1px solid black;border-radius: 3px;text-align: justify;position: Fixed; top: 0; left: 0px;width:100%'>
<b>
<a href='https://www.digitalnomad.vn/search?q=th%E1%BB%9Bt+g%E1%BB%97'>#Mua Thớt Gỗ</a> &amp;nbsp;
<a href='https://www.digitalnomad.vn/2021/03/van-ghep-gia-re-pho-thong-go-ghep-tieu-chuan-xuat-khau-la-giU9p3e3.html'>#Mua Gỗ Ghép</a> &amp;nbsp;
<a href='https://www.digitalnomad.vn/2021/03/go-soi-dung-vao-viec-gi-mua-o-dau-chat-luong-gia-reX5M2.html'>#Mua Gỗ Sồi</a> &amp;nbsp;
<a href='https://www.digitalnomad.vn/2021/06/mua-van-mdf-hdf-plywood-van-tron-phu-melamine-laminate-acrylic-veneerBf421.html'>#Mua Ván Mdf &amp; Plywood </a> &amp;nbsp;
</b>  
</div>
<b:else/>
 
</b:if>  
<!-- End Link Header -->  

Gia Bảo