Code Thủ Công ( Script / CSS / HTML ) P.1

Trong nhiều trường hợp nền tảng viết Blog không có sẵn Tiện Ích / Widget cần thiết, chúng ta có thể sử dụng code thủ công ( Script / CSS / HTML ) cơ bản giúp việc hiển thị một số định dạng khung / box / slider nhằm tạo sự thuận tiện cho người xem, đem lại trải nghiệm tốt hơn cho người dùng.

Sau đây là danh sách Code mẫu giúp bạn " chèn vào giao diện trang chủ / trang đăng bài viết ,...  

[*] Code Tạo Mục Lục : 

<style>
.mucluc { background: #daefff; border: 1px solid #1fa507; border-radius:4px; margin: 0 20px 20px 20px; padding: 0 10px 0 10px; font-weight: 400; font-size: 16px; line-height:25px}
.mucluc1 { border-bottom: 1px dotted #1fa507; font-weight:600;}
.mucluc1:before { content: "\f00b"; font-family: "Font Awesome 5 Free"; font-weight: 600; margin-right:5px;}
</style>

<div class="mucluc">
<p class="mucluc1">Mục Lục:</p>
<ul>
<li><a href="#1">Sự Khác Biệt Giữa Hamster & Chuột :</a></li>
<li><a href="#2">Vậy mèo có ăn thịt hamster không ?</a></li>
<li><a href="#3">Mèo và hamster có thể chơi đùa với nhau không ?</a></li>
<li><a href="#4">Loài nào mới là kẻ thù đáng sợ nhất với hamster ? </a></li>  
</ul>
</div>

Xem link bài viết mẫu : https://khoz.ladi.blog/hamster-la-chuot-khong-phai-thuc-an-cua-meo

[*] Slider 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;">                  
Mr. 
Bing
<!--<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://w.ladicdn.com/s400/60988adb4f31f60012f43f81/cong_thuc_viet_content_093901-20230922024056-k_e_w.png" style="float: left; margin: 0px 10px; width: 90px;"/> </div>
<b style="font-size: 14px;">
#BLOG CONTENT ĐỈNH CAO ! </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/>
Liên Hệ :<br/>
<b>✉</b> : <b style="color:blue">Freelancervietlach@gmail.com</b> <br/>
  
<div style="font-size: 22px;margin-top:2px"><b>HOT :</b></div>  
➠  iPhone 15 Pro Max Phiên Bản TiTan ( Blue Titanium & Natural Titanium ).
  <br/><b style="color:red">Bạn quan tâm </b> 
  <a href="https://khoz.ladi.blog/iphone-15-pro-max-phien-ban-titan">Click Here</a> <br/>
  
  
<div style="font-size: 22px;margin-top:2px"><b>Blog / Web :</b></div>
<b style="font-size: 18px;padding-left:5px">1. www.goghepthanh.com</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 -->

[*] Tab Cạnh Phải 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>

[*] Code Sticky Chân Trang :  

<style>
/* Sticky Ads */
.sticky-buttonBottomAd-GiaBaoBlog{position:fixed;bottom:0;right:20px;width:50px;height:50px;border-radius:50px;background-color:#fdd929;box-shadow:0px 4px 12px 0 rgba(9,32,76,.05);z-index:20;overflow:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;opacity:0;visibility:hidden}
.sticky-buttonBottomAd-GiaBaoBlog.sticky{bottom:20px;opacity:1;visibility:visible}
.sticky-buttonBottomAd-GiaBaoBlog > *{display:flex;align-items:center;height:100%}
.sticky-buttonBottomAd-GiaBaoBlog > * svg{margin:auto;fill:inherit}
.sticky-adBottomAd-GiaBaoBlog{position:fixed;bottom:0;left:0;width:100%;min-height:30px;max-height:200px;padding:5px 0;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);-webkit-transition:all .1s ease-in;transition:all .1s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:20}
.sticky-adBottomAd-GiaBaoBlog .sticky-adBottomAd-GiaBaoBlogClose{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;position:absolute;right:0;top:-30px;background-color:#fefefe;box-shadow:0 -6px 18px 0 rgba(9,32,76,.08)}
.sticky-adBottomAd-GiaBaoBlog .sticky-adBottomAd-GiaBaoBlogClose svg{fill:#767676}
.sticky-adBottomAd-GiaBaoBlog .sticky-adBottomAd-GiaBaoBlogContent{flex-grow:1;overflow:hidden;display:block;position:relative}
.sticky-adBottomAd-GiaBaoBlogInput:checked + .sticky-adBottomAd-GiaBaoBlog{padding:0;min-height:0}
.sticky-adBottomAd-GiaBaoBlogInput:checked + .sticky-adBottomAd-GiaBaoBlog .sticky-adBottomAd-GiaBaoBlogContent{display:none}  
  </style>  
 
<input class='sticky-adBottomAd-GiaBaoBlogInput hidden' id='sticky-adBottomAd-GiaBaoBlogIn' type='checkbox'/>
<div class='sticky-adBottomAd-GiaBaoBlog' id='sticky-adBottomAd-GiaBaoBlog'>
<label class='sticky-adBottomAd-GiaBaoBlogClose' for='sticky-adBottomAd-GiaBaoBlogIn'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'></path></svg></label>
<div class='sticky-adBottomAd-GiaBaoBlogContent'>
<!--<div class='ads-here' style='display:block;height:60px'/>-->
  
<center>  
✔ Khách Là Nhà Phân Phối Thớt Gỗ : 
<a href="https://khoz.ladi.blog/tim-nha-phan-phoi-nhung-chiec-thot-go-dep-ben-an-toan-khi-su-dung-duoc-yeu-thich-nhat-hien-nay"> 
<b>Click Để Xem </b></a>
</center>
  
<!--End Quảng cáo -->  
</div>
</div>

[*] Sidebar / Float Bar Trái :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script language = "Javascript">
$(document).ready(function() {
  $("a[href*='#']:not([href='#])").click(function() {
    let target = $(this).attr("href");
    $('html,body').stop().animate({
      scrollTop: $(target).offset().top
    }, 1000);
    event.preventDefault();
  });
});
 
</script>
<style>
.menu-float-right {
    width: 100px;
    position: fixed;
    bottom: 10%;
    left: 0;
    z-index: 99999;
}
.menu-float-right #group {
    position: absolute;
    left: 0px;
}
.menu-float-right ul {
    padding: 0;
}
.menu-float-right #group ul li {
    background: rgba(0, 0, 0, 0.0); 
    position: relative;
    border-radius: 3px;
    border: 1px solid #fff;
    list-style: none;
    margin-bottom: 10px;
}
.menu-float-right #group ul li img {
    width: 50px;
    border-radius: 5px;
}
.menu-float-right #group ul li .mo-ta {
    font-size: 9px;
    text-align: center;
    color: rgb(255, 255, 255);
    position: absolute;
    width: 90%;
    left: 5%;
    bottom: 5%;
    margin-bottom: 0px;
}
</style>
     background: #5eb509;

<div class="menu-float-right">
      <div id="group">
         <ul>
             <li class="bang-gia">
                 <a href="https://khoz.ladi.blog/iphone-15-pro-max-phien-ban-titan" target="blank">
                   <img src="https://w.ladicdn.com/60988adb4f31f60012f43f81/iphone-15-pro-max-black-thumb-600x600-2-20230914060503-gmn00.png" >
                    <p class="mo-ta">
                      Iphone 
                     <br/> 15 
                     <br/>Pro 
                     <br/>Max
                     </p>
                 </a>
                 
             </li>
         <!--  
             <li class="khuyen-mai">
                 <a href="/khuyen-mai" target="blank"><img src="http://maylockhi2.ninhbinhweb.net/wp-content/uploads/2018/09/icon-qua-tang.png" >
                 <p class="mo-ta">Khuyến mãi</p></a>
             </li>
             <li class="tu-van">
                 <a href="/hoi-dap" target="blank"><img src="http://maylockhi2.ninhbinhweb.net/wp-content/uploads/2018/09/icon-lien-he.png" >
                 <p class="mo-ta">Tư vấn</p></a>
             </li>
             
             <li class="lien-he">
                 <a href="/lien-he"  target="blank"><img src="http://maylockhi2.ninhbinhweb.net/wp-content/uploads/2018/09/icon-tu-van.png">
                 <p class="mo-ta">Liên hệ</p></a>
             </li>
             <li id="back_to_top" >
                 <a href="#top"><img src="http://maylockhi2.ninhbinhweb.net/wp-content/uploads/2018/09/icon-back-to-top.png" >
                 <p class="mo-ta">Lên đầu</p></a>
             </li>
        -->   
         </ul>
     </div>
 </div>