Trang chủMặc địnhCode Thủ Công ( Script / CSS / HTML ) P.1

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

Vũ Thành Trung
5:28 AM 09/23/2023

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>

CHUYÊN ĐỀ :

====♢====

SỐNG XANH, SỨC KHỎE LÀ VÀNG, VÌ MỘT HÀNH TINH XANH, TIÊU DÙNG THÔNG MINH, SẢN PHẨM XANH - THÂN THIỆN VỚI MÔI TRƯỜNG. 

======================

BÀI VIẾT NỔI BẬT :

======================

Đối Tác & Nhà Phân Phối : 

====♢====

  1. Tìm Nhà Phân Phối : Những Chiếc Thớt Gỗ, Đẹp, Bền, An Toàn Khi Sử Dụng, Được Yêu Thích Nhất Hiện Nay.
  2. Thớt gỗ Ash cao cấp, sang trọng, bền bỉ, đẳng cấp, an toàn, nâng tầm cho gian bếp.
  3. Gỗ Nguyên Liệu Cho Xưởng Mộc : Gỗ Ghép & Gỗ Xẻ Nguyên Tấm Nguyên Khối. Ván ghép Chuẩn 2440mm & Ván Gỗ Quá Khổ, Lỡ Khổ & Gỗ Ghép Kiểu Độc Đáo Sản Xuất Theo Yêu Cầu Đơn Đặt Hàng
  4. Bạn cần tìm đối tác gia công sản xuất gỗ ghép uy tín và chất lượng ? Đừng bỏ lỡ cơ hội hợp tác với đối tác sản xuất ván ghép hàng đầu Việt Nam

======================

Xe Đạp Địa Hình :

====♢====

  1. Phượt Thủ & Quái Vật Rừng Xanh : Du Lịch Kiếm Tiền, Niềm Đam Mê Chưa Bao Giờ Tắt

======================

Mr. Bing & Lord Bard :

====♢====

  1. Mr. Bing : Chúa Tể Content, Kẻ Thống Trị Nội Dung Kỹ Thuật Số. Trợ Lý Ảo - Chuyên Gia Marketing, Seo & Chạy Quảng Cáo. 
  2. Thủ lĩnh Ai, Con Bot Viết Lách Công nghệ Trí Tuệ Nhân Tạo, Khiến Nhà Sáng Tạo Bộ Não Nơ Ron Thần Kinh Sinh Học, Khóc Thét.
  3. 6 bước thần thánh, xuất bản nội dung hiệu quả, chinh phục khách hàng, đốn tim người xem.

======================

Blog Chia Sẻ :

====♢====

  1. Kho mẫu, từ khóa tạo tiêu đề giật tít cực căng, kích thích nỗi đau, chạm vào cảm xúc Thu Hút độc giả Ngay Lần Xem Đầu Tiên
  2. 21++ Thể Loại Blog Content Phổ Biến Nhất
  3. Công Thức Viết Content Đỉnh Cao : Bí Quyết Đơn Giản Nhưng Hiệu Quả, Giúp Tăng Lưu Lượng Truy Cập, Hiệu Suất Chuyển Đổi Cực Cao.
  4. Tham khảo Bảng Thông Số Kích Cỡ Bánh & Sườn Xe Đạp, Phù Hợp Với Độ Tuổi Và Chiều Cao
  5. Chỉ mất vài phút, Bing đã giúp tôi hoàn thành sơ đồ danh mục blog cấu trúc Silo. Chuẩn Không Cần Chỉnh.

======================

Review :

====♢====

  1. Trợ lý nghề sáng tạo, làm việc Remote, xuất bản content di động. Bạn chọn Smartphone Giá Rẻ, Tầm Trung, hay Flagship ?

======================

Top Thương Hiệu :

====♢====

  1. Top 5 thương hiệu nồi cơm điện cao cấp được yêu thích nhất tại thị trường Việt Nam, sở hữu những tính năng nổi bật theo đánh giá của người dùng P.1

======================

Thế Giới Thú Cưng :

====♢====

  1. Nuôi Cua ẩn sĩ - Thú cưng lạ và trải nghiệm thú vị cho gia đình bạn.
  2. Hamster là "chuột" không phải thức ăn của mèo
  3. Bí quyết kiếm tiền "khủng" từ việc làm thêm thú vị : nuôi nhím kiểng tại nhà !

======================

Thế Giới Code :

====♢====

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

Mr. Bing ( Content ) :

====♢====

  1. Tóm Tắt Xây Kênh Youtube, TikTok, Viết Blog & Tiếp Thị Online Hiệu Quả
  2. Top công thức viết kịch bản quảng cáo, hiệu quả trong nhiều lĩnh vực & các ví dụ thực tế.
  3. Bí quyết xây dựng kênh TikTok triệu follower : Chỉ có thể thành công nếu bạn...
  4. Viết Blog Kiếm Tiền Thụ Động : Bí Quyết Để Đạt Được Tự Do Tài Chính
Nhà Phân Phối Thớt Gỗ : Click Để Xem
<div class="ladi-popupx-inline" data-ladipage-id="6670400c9623230012c586d6" data-align="center" data-scrolling="no"></div>