12 October, 2025

Thăm dò ý kiến mọi người.

October 12, 2025 Posted by Tôi Hùng ✅ , No comments
Chào mọi người.
Chúc mọi người một ngày chủ nhật thật an yên hạnh phúc bên gia đình và những người thân :D.
Mọi người cho mình hỏi chút ý kiến về chương trình đăng bài lên hung.pro.vn mà lúc xưa mình có phát triển rồi mình lại dừng. :D, vì nhiều hạn chế trên chương trình mà mình lại không có nhiều thời gian để tìm hiểu và phát triển chương trình thật tốt, để phục vụ cho blog.
Thăm dò ý kiến mọi người.

Phía trên là hình ảnh chương trình mình tối ưu lại giao diện và phát triển thêm nhiều tiện ích cho người dùng trên chương trình mình phát hành nằm 2024 nhưng rồi mình lại không phát hành nữa vì nhiều lý do khác nhau.
Chương trình mình phát triển không có gì quá đặc sắc cũng như nhiều chương trình củ, nhưng được cái giao diện mình có tối ưu về việc mỡ rộng và thu nhỏ để thuận tiện hơn cho mọi người trong việc viết bài. Vì chương trình này mình cũng ấp ủ từ việc đăng bài từ trang website linkthuthuat.com mà lúc xưa rầm rộ ở việc nhiều người sữ dụng và việc tối ưu SEO rất hòa hợp với tự nhiên. Và điều quan trọng là có nhiều người sữ dụng để tăng contenttừ khóa của nhiều bài viết khác nhau. Trang đó lúc xưa như một forum và được nhiều anh em blogger chia sẽ bài viết và thủ thuật hay lên.
Nhưng khi đăng bài lên trang website đó thì việc chuyển hướng link về trang dích rất ok, nhưng trên chương trình mình viết thì lại bị hạn chế về điều đó, nhiều lần mình đã tìm hiểu và áp dụng nhưng không thành công nên mình cũng thụt ý chí tìm hiểu và phát hành chương trình rộng rải, mà chỉ dùng cho cá nhân là chủ yếu về việc đăng bài lên blog.
Việc đăng bài từ chương trình mình viết lại hạn chế rất nhiều về việc đăng bài từ phiên bản website.
Qua bài viết này mình muốn hỏi ý kiến mọi người rằng mình nên phát triển chương trình này lại không, và mình cũng nhận viết chương trình này cho những blog khác và giá cả sẽ rất học sinh cho mọi người làm trang blog của bản thân như một forum thu nhỏ. Để người dùng có thể kiếm backlink chất lượng từ blog của mọi người.
Cảm ơn mọi người đã xem.
Ai quan tâm về điều này có thể cho mình xin ý kiến với nhé. Cảm ơn mọi người nhiều.

10 October, 2025

Chia sẽ Code Trang News đẹp cho blogspot

October 10, 2025 Posted by Tôi Hùng ✅ , , , 3 comments

Bữa có 1 bạn nhắn mình hỏi code tạo Trang News trên blog của mình, sẵn đây mình viết bài share code lên cho anh em nào cần thì dùng. Code này hoạt động cũng đơn giản thôi, gọi bài theo Label, css cho đẹp lên thôi!

Share code tạo Trang News đẹp cho blogspot
Share code tạo Trang News đẹp cho blogspot

Bộ code News page dưới đây sẽ giúp bạn hiển thị danh sách bài viết theo dạng thẻ card lưới, có hiệu ứng hover, thumbnail nổi bật và bố cục cân đối trên mọi thiết bị.

👉 Demo thực tế:

🔗 https://www.hung.pro.vn/p/news-blogger.html

Giới thiệu về trang News

Trang News Page này được thiết kế dành cho những ai muốn tạo một chuyên mục tin tức riêng biệt, tách biệt khỏi trang chủ nhưng vẫn đồng bộ giao diện.

Điểm mạnh:

  • Giao diện đơn giản, hiện đại, tinh tế.
  • Dễ dàng tùy chỉnh category hoặc label hiển thị.
  • Dạng grid 3 cột (desktop), 2 cột (tablet) và 1 cột (mobile).
  • hiệu ứng hover mượttiêu đề bài viết rõ nét.
  • Có khung tìm kiếm bài viết nhanh.

Code đầy đủ

Trang → Trang mới → Đặt tên trang → Chế độ xem HTML và dán toàn bộ code dưới đây vào:

HTML:

<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Source+Sans+Pro:wght@400;500;600&display=swap" rel="stylesheet">
<div id="atn-mag"
     class="atn-mag"
     data-label="News"    
     data-page-size="22">
  <div class="atn-mag-search">
    <input type="search" id="atn-mag-search" placeholder="🔍 Tìm kiếm bài viết..." aria-label="Tìm kiếm bài viết">
  </div>
  <div id="atn-mag-grid" class="atn-mag-grid" aria-live="polite"></div>
  <div class="atn-mag-actions">
    <button id="atn-mag-load" type="button" class="atn-mag-btn">Tải thêm</button>
  </div>
  <div id="atn-mag-empty" class="atn-mag-empty" hidden>Không có bài viết nào phù hợp.</div>
</div>

CSS:

<style>
.atn-mag {
  max-width:1100px;
  margin:0 auto;
  padding:20px;
  font-family:'Source Sans Pro',system-ui,sans-serif;
}
.atn-mag-title {
  margin:0 0 14px;
  color:#0f172a;
  font:900 28px/1.25 'Merriweather',serif;
}
.atn-mag-search {margin-bottom:20px}
#atn-mag-search {
  width:100%;
  padding:14px 16px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  color:#0f172a;
  font:500 14px/1.4 'Source Sans Pro',sans-serif;
  outline:none;
  transition:box-shadow .15s ease,border-color .15s ease;
}
#atn-mag-search:focus {
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.atn-mag-actions {
  display:flex;
  justify-content:center;
  margin:18px 0 8px;
}
.atn-mag-btn {
  padding:10px 16px;
  border-radius:12px;
  border:1px solid #dbe3ea;
  background:#0ea5e9;
  color:#fff;
  font:700 13px/1 'Source Sans Pro',sans-serif;
  cursor:pointer;
  transition:transform .1s ease,filter .15s ease;
}
.atn-mag-btn:active {transform:translateY(1px)}
.atn-mag-btn[disabled]{opacity:.55;cursor:not-allowed}
.atn-mag-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
}
.atn-card {
  grid-column:span 4;
  display:flex;
  flex-direction:column;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 24px rgba(2,6,23,.06);
  transition:transform .15s ease;
}
.atn-card:hover {transform:translateY(-2px)}
.atn-thumb {
  width:100%;
  aspect-ratio:16/9;
  background:#f1f5f9;
  overflow:hidden;
  display:flex;    
  align-items:center;
  justify-content:center;
}
.atn-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  line-height:0;
  vertical-align:middle;
  margin:0;
  padding:0;
  transition:transform .35s ease, filter .35s ease;
}
.atn-thumb:hover img {
  transform:scale(1.05);
  filter:brightness(1.05) contrast(1.05);
}
.atn-body {
  padding:16px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.atn-meta {
  margin-bottom:8px;
  color:#64748b;
  font:500 12px/1.2 'Source Sans Pro',sans-serif;
}
.atn-title {margin:0 0 10px}
.atn-title a {
  color:#0f172a;
  text-decoration:none;
  font:800 19px/1.4 'Merriweather',serif;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.atn-title a:hover {
  color:#2563eb;
  text-decoration:none!important;
}
.atn-excerpt {
  color:#334155;
  font:500 14px/1.6 'Source Sans Pro',sans-serif;
  margin:0;
  flex-grow:1;
}
.atn-read {
  margin-top:12px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:#0ea5e9;
  font:700 13px/1 'Source Sans Pro',sans-serif;
  text-decoration:none;
}
.atn-read svg {
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
}
.atn-card.is-featured {
  grid-column:span 12;
  display:grid;
  grid-template-columns:6fr 6fr;
  gap:20px;
  align-items:stretch;
  border-radius:16px;
}
.atn-card.is-featured .atn-thumb {
  aspect-ratio:auto;
  height:100%;
}
.atn-card.is-featured .atn-body {
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.atn-card.is-featured .atn-title a {
  font-size:24px;
  line-height:1.3;
  -webkit-line-clamp:3;
}
.atn-card.is-featured .atn-excerpt {
  font-size:15px;
  -webkit-line-clamp:4;
}
@media (max-width:1024px){
  .atn-card{grid-column:span 6}
  .atn-card.is-featured{grid-template-columns:1fr}
}
@media (max-width:640px){
  .atn-mag{padding:14px}
  .atn-card{grid-column:span 12}
  .atn-title a{font-size:18px}
  .atn-excerpt{font-size:13.5px}
}
@media (max-width:420px){
  .atn-mag{padding:10px}
  .atn-title a{font-size:17px}
  .atn-excerpt{display:none}
}
.atn-mag-empty {
  padding:14px;
  border:1px dashed #e2e8f0;
  border-radius:12px;
  background:#fafafa;
  color:#64748b;
  text-align:center;
}
</style>

Script:

<script>
(function(){
  var ROOT=document.getElementById("atn-mag");
  if(!ROOT) return;
  var label=ROOT.getAttribute("data-label")||"";
  var pageSize=parseInt(ROOT.getAttribute("data-page-size")||"13",10);
  var grid=document.getElementById("atn-mag-grid");
  var btn=document.getElementById("atn-mag-load");
  var emptyEl=document.getElementById("atn-mag-empty");
  var search=document.getElementById("atn-mag-search");
  var start=0, total=0, cache=[];
  function buildCard(post,i){
    var thumb=post.media$thumbnail?post.media$thumbnail.url.replace(/\/s\d+\-c/,"/s600"): "https://via.placeholder.com/600x400?text=Blogger";
    var date=new Date(post.published.$t);
    var title=post.title.$t||"Không tiêu đề";
    var link=(post.link.find(l=>l.rel==="alternate")||{}).href||"#";
    var summary=(post.summary?post.summary.$t.replace(/<[^>]+>/g,""):"").replace(/&#8230;/g,"...").substring(0,160)+"...";
    var html='<article class="atn-card'+(i===0?" is-featured":"")+'">'+
      '<div class="atn-thumb"><a href="'+link+'" title="'+title+'"><img src="'+thumb+'" alt="'+title+'"/></a></div>'+
      '<div class="atn-body">'+
      '<div class="atn-meta"><span class="atn-date">'+date.toLocaleDateString("vi-VN")+'</span></div>'+
      '<h2 class="atn-title"><a href="'+link+'">'+title+'</a></h2>'+
      '<p class="atn-excerpt">'+summary+'</p>'+
      '<a class="atn-read" href="'+link+'">Đọc tiếp <svg viewBox="0 0 24 24"><path d="M5 12h14M13 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>'+
      '</div></article>';
    return html;
  }
  function render(){
    grid.innerHTML="";
    if(cache.length===0){ emptyEl.hidden=false; return; }
    emptyEl.hidden=true;
    cache.forEach(function(p,i){ grid.insertAdjacentHTML("beforeend",buildCard(p,i)); });
  }
  function fetchPosts(cb){
    var url="/feeds/posts/summary/-/"+encodeURIComponent(label)+"?alt=json&max-results="+pageSize+"&start-index="+(start+1);
    fetch(url).then(r=>r.json()).then(function(json){
      total=json.feed.openSearch$totalResults.$t;
      var posts=json.feed.entry||[];
      cache=cache.concat(posts);
      start+=posts.length;
      render();
      if(start>=total){ btn.disabled=true; btn.textContent="Hết bài"; }
    }).catch(function(){ btn.disabled=true; });
  }
  btn.addEventListener("click",function(){ fetchPosts(); });
  search.addEventListener("input",function(){
    var q=this.value.toLowerCase();
    var cards=grid.querySelectorAll(".atn-card");
    var found=0;
    cards.forEach(function(c){
      var t=c.querySelector(".atn-title a").textContent.toLowerCase();
      if(t.indexOf(q)>-1){ c.style.display=""; found++; }
      else c.style.display="none";
    });
    emptyEl.hidden=found!==0;
  });
  fetchPosts();
})();
</script>

Tùy chỉnh

  • Đổi data-label="News" → thành tên nhãn (Label) mà anh muốn hiển thị.
  • Đổi data-page-size="22" để hiển thị nhiều hay ít bài hơn.
  • Có thể chèn thêm phân trang (load more) nếu muốn.

Kết luận

Code này cực kỳ phù hợp cho các blog:

  • Chia sẻ tin tức, cập nhật thông tin.
  • Giới thiệu sản phẩm mới, sự kiện, thông báo.
  • Hoặc dùng làm trang danh mục “News” chuyên nghiệp cho blog cá nhân, doanh nghiệp.

08 October, 2025

Công cụ Thumbnail Generator

October 08, 2025 Posted by Tôi Hùng ✅ , , , , 6 comments

Chào mọi người.


Mình vừa tìm được công cụ này bên anhtrainang.com nên mình không chần chừ gì viewsource công cụ này và chia sẽ lại để mọi người biết và làm ảnh bài viết đẹp mắt và tạo bản quyền riêng cho website của mình.

Công cụ này cho phép bạn tạo ảnh thumbnail YouTube (1280x720) có hiệu ứng phát sáng động (Glow Motion) hoàn toàn bằng HTML + CSS + SVG animate, không cần framework hay API ngoài.
Điểm đặc biệt là code này chạy được ngay trên nền Blogspot, tức là chỉ cần chèn đoạn code vào Trang blogspot và sử dụng luôn không cần làm gì thêm!

Các tính năng chính

  • 🖼 Kích thước chuẩn thumbnail: 1280×720px, 960x540px, 640x360px.
  • 💡 Hiệu ứng phát sáng “Glow Motion” mượt chậm, màu cố định theo theme.
  • 🔵 10 kiểu họa tiết nền động: Circle Lines, Dot Grid, Wave, Ribbon, Halo, Mesh...
  • 🧩 Có thể đổi màu chủ đạo, tiêu đề, mô tả, logo riêng.
  • 💾 Xuất ảnh PNG tĩnh (canvas render).
  • ⚙️ Hoạt động ổn định ngay trên trang Blogspot.

Cấu trúc công cụ

Toàn bộ công cụ chỉ gồm một khối HTML duy nhất chứa:

  • Phần giao diện form nhập liệu (Title, Description, Logo, Theme Color, Layout Decor).
  • Phần preview động SVG (Glow Motion).
  • Phần script xử lý render + xuất PNG.

Cách sử dụng

  • Mở trang Blogger → Trang mới → Chế độ HTML.
  • Dán toàn bộ đoạn code ở dưới vào bài viết.
  • Xuất bản Trang – công cụ sẽ hoạt động trực tiếp.
  • Nhập thông tin, chọn layout, bấm Download PNG để xuất ảnh thumbnail.

Demo phía bên dưới hoặc tại đây
.

Thumbnail Generator

🖼️ Thumbnail Generator v7.0 — Glow Motion Pro

Preview dynamic, export PNG 1280×720
Generated preview
Tip: Chuột phải vào preview → “Save image as...” để tải nhanh ảnh SVG.

License Key For Template Blogger

October 08, 2025 Posted by Tôi Hùng ✅ , , , 2 comments

Gần đây các bạn có thể thấy trên Blog mình đã chia sẻ một vài template mà họ đã sử dụng license key để kích hoạt đúng không? Ví dụ như Plus UI v2.6.1 hay Apmody v1.4 chẳng hạn tuy 2 template đã mã hoá JavaScript mình vẫn chưa biết cách giải nhưng mình biết đoạn mã JavaScript để kích hoạt license key ở đâu nên mình đã thay nó bằng đoạn mã khác cũng tương tự.

Cách tạo License Key cho template Blogger sử dụng JavaScript đơn giản

Và trong bài viết này mình sẽ chia sẻ cho các bạn đoạn mã JavaScript để kích hoạt license key cho template Blogger và cách lưu trữ license key.

Cách hoạt động của License Key

Cách hoạt động của nó thì rất đơn giản rằng các bạn sẽ lưu thông tin để tạo License Key trên Google Script để tăng tính bảo mật và từ thông tin đó mình sẽ chuyển nó sang dạng mã hoá Base64 kiểu như này dFu5d8WerUWerZN3OHf=. Nó cũng có thể sử dụng tương tự viết Github nhưng nó sẽ rất dễ bị người khác biết và thay đổi. License Key sẽ do các bạn tuỳ ý quản lý và mỗi License Key chỉ sử dụng được trên 1 Blog cố định.

Cách tạo Google Script chứa thông tin License Key

Có 2 cách để tạo Google Script chứa thông tin License Key nhưng mình sẽ hướng dẫn các bạn cách nhanh nhất mà mình đã dùng.

Bước 1: Truy cập https://script.google.com/home và chọn New project.

Cách tạo License Key cho template Blogger sử dụng JavaScript đơn giản

Bước 2: Đặt tên cho project của bạn và thay thế toàn bộ đoạn mã có sẵn bằng đoạn mã sau:


function doGet() {
  var nldblog = ContentService.createTextOutput();
  nldblog.append('{"user":[{"no":0,"name":"","url":"","id":"","code":""},{"no":1,"name":"","url":"","id":"","code":""},{"no":2,"name":"","url":"","id":"","code":""},{"no":3,"name":"","url":"","id":"","code":""},{"no":4,"name":"","url":"","id":"","code":""},{"no":5,"name":"","url":"","id":"","code":""},{"no":6,"name":"","url":"","id":"","code":""},{"no":7,"name":"","url":"","id":"","code":""},{"no":8,"name":"","url":"","id":"","code":""},{"no":9,"name":"","url":"","id":"","code":""},{"no":10,"name":"","url":"","id":"","code":""}]}');
  return nldblog;
}

Cách tạo License Key cho template Blogger sử dụng JavaScript đơn giản

Với mỗi License Key sẽ là 1 object bao gồm như sau:

{"no":0,"name":"","url":"","id":"","code":""}

Trong đó no là số thứ tự, url là url của blog kích hoạt key, id là id của blog kích hoạt key, code đây sẽ là thông tin để tạo license key. Ví dụ 1 object như sau:

{"no":0,"name":"Hung Pro VN","url":"www.hung.pro.vn","id":"7597100408077620606","code":"hungprocopy"}

Bước 3: Sau đó các bạn chọn Deploy và chọn tiếp New deployment. Một popup sẽ hiện lên và tại cột Select type các bạn chọn vào hình bánh răng cưa và chọn Web app. Tại cột Configuration các bạn để như sau:

Cách tạo License Key cho template Blogger sử dụng JavaScript đơn giản

Xong các bạn chọn Deloy. Tiếp theo sẽ hiện URL của Web app các bạn hãy lưu lại vào notepad hay đâu đó.

Cách tạo License Key cho template Blogger sử dụng JavaScript đơn giản

Để thêm 1 object thông tin license key mới các bạn thêm hoặc sửa 1 object tương tự như trên và tại bước 3 các bạn chọn Deply và sau đó chọn Manage deployments. Tiếp đó 1 popup hiện nên tại cột Configuration các bạn chọn hình cây bút (Edit) sau đó tại mục Version các bạn chọn New version và bấm Deploy.

Vậy là xong phần Google Script.

Thêm code JavaScipt kiểm tra giấy phép vào template

Bước 1: Các bạn thêm đoạn code dưới đây vào sau thẻ <body>.

<script><b:eval expr='&quot;const blogID=&apos;&quot; + data:blog.blogId + &quot;&apos;;&quot;'/></script>

Bước 2: Tiếp tục thêm đoạn code dưới đây vào phía trước thẻ </body>.

<script>//<![CDATA[
    var licensekey = "licensekey";
//]]></script>

Đoạn code này sẽ public để nhận license key và licensekey ở đây sẽ thay thế bằng License Key các bạn tạo.

Bước 3: Thêm tiếp đoạn code dưới đây ngay phía dưới đoạn code vừa thêm ở bước 2.

<script>//<![CDATA[
    var e, s = "https://www.nldblog.com";
    function o() {
        window.alert("Invalid License Key"), document.body.innerHTML = "", window.location.href = s
    }
    try {
        e = atob(licensekey)
    } catch (e) {
        try {
            o()
        } catch (e) {
            window.location.href = s
        }
    }
    var n = e.split("-"),
        l = n[0];
    if (void 0 === (n = n[1])) try {
        o()
    } catch (e) {
        window.location.href = s
    }
    str = [n], getAJ({
        url: "Web app URL",
        async: !0,
        success: function (e) {
            var n = JSON.parse(e).user[str];
            if (void 0 === n) try {
                o()
            } catch (e) {
                window.location.href = s
            }
            var u = n.id,
                d = n.code,
                a = n.url;
            try {
                if (blogID + l === u + d && 0 != function (e) {
                        if (-1 == window.location.pathname.indexOf("/b/preview") && -1 == window.location.pathname.indexOf("/b/blog-preview")) return e == window.location.hostname
                    }(a)) return void console.log('Licensed to: ' + n.name + ', Licensed for: ' + n.url);
                try {
                    o()
                } catch (e) {
                    window.location.href = s
                }
            } catch (e) {
                try {
                    o()
                } catch (e) {
                    window.location.href = s
                }
            }
        }
    })
    function getAJ(e) {
        var r = new XMLHttpRequest;
        try {
            r = new XMLHttpRequest
        } catch (t) {
            try {
                r = new ActiveXObject("Msxml2.XMLHTTP")
            } catch (t) {
                try {
                    r = new ActiveXObject("Microsoft.XMLHTTP")
                } catch (t) {
                    return console.warn("Something went wrong!"), !1
                }
            }
        }
        r.onreadystatechange = function () {
            var n;
            4 == r.readyState && (200 == r.status ? (n = r.responseText, e.success(n)) : "function" == typeof e.error && e.error(r))
        }, r.open("GET", e.url, e.async), r.send()
    }
//]]></script>

Thay https://www.hung.pro.vn bằng URL sẽ chuyển hướng khi sai License Key và Web app URL bằng Web app URL mà mình đã bảo các bạn lưu lại vào notepad ở phần trước.

Và để tăng thêm bảo mật thì các bạn nên mã hoá đoạn JavaScript ở bên trong thẻ <script>//<![CDATA[ ... //]]></script> bằng một số công cụ sau hoặc tuỳ cách hoá của các bạn.

https://www.cleancss.com/javascript-obfuscate hoặc https://javascriptobfuscator.com/Javascript-Obfuscator.aspx các bạn có thể mã hoá nhiều lần để bảo mật cao hơn.

Vậy là xong, tiếp theo là cách để các bạn lấy License Key dạng mã base64.

Các tạo License Key

Ở phần Cách tạo Google Script chứa thông tin License Key thì mình đã nói một object gồm những thông tin như sau:

{"no":0,"name":"NLD Blog","url":"www.hung.pro.vn","id":"7597100408077620606","code":"hungprocopy"}

Thì ở đây License Key sẽ có cấu trúc bao gồm code-no ví dụ object ở trên License Key của mình sẽ là nldblogcode-0 chuyển sang dạng base64 nó sẽ thành bmxkYmxvZ2NvZGUtMA==.

Để chuyển License Key sang dạng base64 thì các bạn sử dụng công cụ sau Base64 Converter dán License Key dạng code-no vào và bấm Encode lúc này bạn sẽ nhận được 1 đoạn mã dạng base64. Để dịch ngược thì các bạn là tương tự rồi bấm Decode.

Kết luận

Vậy là xong, mình vừa hướng dẫn các bạn Cách tạo License Key cho template Blogger sử dụng JavaScript đơn giản để giúp bảo vệ template của các bạn khi bị người khác rip hoặc bán để tránh bị chia sẻ template. Nếu có vấn đề hay thắc mắc gì thì các bạn hãy comment xuống phía dưới mình sẽ giải đáp nếu có thể.


Tự động đánh số thứ tự cho Nhận Xét có phân cấp của Blogspot chỉ bằng CSS

October 08, 2025 Posted by Tôi Hùng ✅ , 4 comments
Bài viết hướng dẫn mọi người đánh số thứ tự cho nhận xét blogspot có phân cấp chỉ bằng CSS

Hướng dẫn

Xác định class của khung chứa phần Nhận xét

Phần khung chứa Nhận xét thường có dạng như sau <div class="comment-thread toplevel-thread"></div>
Như vậy ta xác định được class sẽ là comment-threadtoplevel-thread, và ta chọn 1 trong số các class của thẻ này để gắn hiển thị đánh số thứ tự cho các thẻ li trong đó

CSS

.comment-thread ol  {
    counter-reset: section 0;
}
.comment-thread ol li  {
    counter-increment: section;
}
.comment-thread ol li::before  {
    content: counters(section, ".") " ";
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 3px 5px;
    background: #f9f9f9;
    position: absolute;
    z-index: 999;
    margin-top: -9px;
    margin-left: 30px;
}
Vậy là xong, giờ các nhận xét tự động đánh số theo phân cấp dù bạn có đẻ bao nhiêu cấp cho Nhận Xét của bạn đi nữa.

Demo tại khung bình luận ở bài viết này.

Top