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.
Mục Lục:
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ố & 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>
