Bài viết mới theo nhãn hiển thị hai cột với hiệu ứng toolip

Các tính năng ưu việt

• Bố cục hai cột hiện đại: Có ảnh đại diện, tiêu đề, ngày đăng, nhãn và số bình luận khi Blogger cung cấp.
• Floating Portal Tooltip: Rê chuột vào bài viết để xem tiêu đề đầy đủ, ảnh, nội dung tóm tắt và thông tin đăng bài.
• Chọn chuyên mục: Chuyển đổi giữa Thủ Thuật Blogger, Blogspot, CSS và Javascript.
• Tìm kiếm và sắp xếp: Tìm trong những bài đã tải, sắp xếp mới nhất, cũ trước hoặc A–Z.
• Nút Xem thêm: Ban đầu tải 12 bài, mỗi lần nhấn tải thêm 8 bài.
• Cập nhật tự động: Kiểm tra lại dữ liệu sau 5 phút khi trang đang mở.
• Tối ưu hiệu suất: Lazy loading ảnh, không cần jQuery, hỗ trợ giao diện sáng/tối và mobile.

Cách thực hiện

<!-- TRUCBLOG PRO: BÀI VIẾT THEO NHÃN 2 CỘT | MINI + FAST -->

<style>

/* TRUCBLOG | Bài viết theo nhãn - 2 cột  */

#rc-posts-2-col{

  --tlp-surface:var(--surface,var(--post-bg,#fff));

  --tlp-alt:var(--surface-alt,#f6f4fc);

  --tlp-text:var(--text-main,#242133);

  --tlp-muted:var(--text-muted,#756f82);

  --tlp-border:var(--palette-border,var(--border,#e6e1ef));

  --tlp-accent:var(--accent,#7155be);

  --tlp-shadow:0 8px 22px rgba(32,24,55,.08);

  display:block!important;position:relative;isolation:isolate;

  width:100%!important;max-width:100%;min-width:0;

  font:inherit;font-size:13px;color:var(--tlp-text);line-height:1.45;

  background:transparent;container-type:inline-size;

}

#rc-posts-2-col *,#rc-posts-2-col *::before,#rc-posts-2-col *::after{box-sizing:border-box}

#rc-posts-2-col [hidden]{display:none!important}

#rc-posts-2-col .tlp-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--tlp-border)}

#rc-posts-2-col .tlp-titleicon{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border-radius:9px;color:var(--tlp-accent);background:color-mix(in srgb,var(--tlp-accent) 11%,var(--tlp-surface));font-size:16px}

#rc-posts-2-col .tlp-titlebox{min-width:0;flex:1}

#rc-posts-2-col .tlp-headline{display:block;margin:0;font-size:14px;font-weight:800;line-height:1.2;color:var(--tlp-text);letter-spacing:-.015em}

#rc-posts-2-col .tlp-subtitle{margin:3px 0 0;color:var(--tlp-muted);font-size:10.5px;line-height:1.25;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

#rc-posts-2-col .tlp-count{min-width:24px;padding:3px 7px;text-align:center;border-radius:99px;background:color-mix(in srgb,var(--tlp-accent) 12%,var(--tlp-surface));color:var(--tlp-accent);font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums}

#rc-posts-2-col .tlp-refresh{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border:1px solid var(--tlp-border);border-radius:9px;background:var(--tlp-surface);color:var(--tlp-accent);font-size:17px;line-height:1;cursor:pointer;transition:background .17s,border-color .17s,transform .17s}

#rc-posts-2-col .tlp-refresh:hover{background:var(--tlp-alt);border-color:var(--tlp-accent)}

#rc-posts-2-col .tlp-refresh:active{transform:scale(.93)}

#rc-posts-2-col .tlp-refresh.is-loading{animation:tlp-spin .9s linear infinite}

@keyframes tlp-spin{to{transform:rotate(360deg)}}

#rc-posts-2-col .tlp-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(94px,.70fr);gap:7px;margin:0 0 9px}

#rc-posts-2-col .tlp-filter{grid-column:1/-1;display:flex;align-items:center;gap:6px;min-width:0}

#rc-posts-2-col .tlp-label-select,#rc-posts-2-col .tlp-sort,#rc-posts-2-col .tlp-search{

  min-width:0;width:100%;height:32px;border:1px solid var(--tlp-border);border-radius:8px;

  padding:0 9px;background:var(--tlp-surface);color:var(--tlp-text);font:inherit;font-size:11.5px;outline:none;max-width:100%;

}

#rc-posts-2-col .tlp-label-select{flex:1;font-size:12px;color:var(--tlp-accent);font-weight:700}

#rc-posts-2-col .tlp-search::placeholder{color:var(--tlp-muted)}

#rc-posts-2-col .tlp-label-select:focus-visible,#rc-posts-2-col .tlp-sort:focus-visible,#rc-posts-2-col .tlp-search:focus-visible,#rc-posts-2-col button:focus-visible,#rc-posts-2-col a:focus-visible{outline:2px solid var(--tlp-accent);outline-offset:2px}

#rc-posts-2-col .tlp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:9px;min-width:0;margin:0;padding:0;list-style:none}

#rc-posts-2-col .tlp-item{min-width:0;min-height:0;list-style:none;margin:0;padding:0}

#rc-posts-2-col .tlp-card{height:100%;min-width:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--tlp-border);border-radius:12px;background:var(--tlp-surface);text-decoration:none!important;color:var(--tlp-text)!important;box-shadow:0 2px 8px rgba(28,22,53,.025);transition:transform .2s,border-color .2s,box-shadow .2s}

#rc-posts-2-col .tlp-card:hover,#rc-posts-2-col .tlp-card:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--tlp-accent) 45%,var(--tlp-border));box-shadow:var(--tlp-shadow)}

#rc-posts-2-col .tlp-media{display:block;position:relative;width:100%;aspect-ratio:1.48;overflow:hidden;background:linear-gradient(125deg,color-mix(in srgb,var(--tlp-accent) 20%,var(--tlp-alt)),var(--tlp-alt));flex:0 0 auto}

#rc-posts-2-col .tlp-cover{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}

#rc-posts-2-col .tlp-card:hover .tlp-cover{transform:scale(1.045)}

#rc-posts-2-col .tlp-fallback{display:grid;place-items:center;width:100%;height:100%;color:var(--tlp-accent);font-size:27px}

#rc-posts-2-col .tlp-media-flag{position:absolute;left:7px;bottom:7px;max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(20,17,32,.73);color:#fff;padding:2px 6px;border-radius:5px;font-size:9px;font-weight:650;backdrop-filter:blur(5px)}

#rc-posts-2-col .tlp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding:9px 9px 8px}

#rc-posts-2-col .tlp-posttitle{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;color:var(--tlp-text);font-size:11.8px;line-height:1.38;font-weight:750;min-height:2.76em}

#rc-posts-2-col .tlp-meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:4px;color:var(--tlp-muted);font-size:9.8px;white-space:nowrap;font-variant-numeric:tabular-nums}

#rc-posts-2-col .tlp-meta span{overflow:hidden;text-overflow:ellipsis}

#rc-posts-2-col .tlp-empty,#rc-posts-2-col .tlp-error{grid-column:1/-1;border:1px dashed var(--tlp-border);border-radius:11px;padding:14px;text-align:center;color:var(--tlp-muted);font-size:12px}

#rc-posts-2-col .tlp-error button{display:inline-block;margin-top:8px;padding:7px 11px;background:var(--tlp-accent);border:0;border-radius:8px;color:#fff;cursor:pointer}

#rc-posts-2-col .tlp-skeleton{height:172px;border:1px solid var(--tlp-border);border-radius:12px;background:linear-gradient(100deg,var(--tlp-alt) 14%,color-mix(in srgb,var(--tlp-surface) 80%,var(--tlp-alt)) 37%,var(--tlp-alt) 66%);background-size:220% 100%;animation:tlp-shimmer 1.25s ease-in-out infinite}

@keyframes tlp-shimmer{to{background-position-x:-220%}}

#rc-posts-2-col .tlp-actions{display:flex;justify-content:center;margin-top:12px}

#rc-posts-2-col .tlp-more{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 15px;border:1px solid var(--tlp-border);border-radius:9px;background:var(--tlp-surface);color:var(--tlp-accent);font:inherit;font-weight:750;font-size:11.5px;cursor:pointer;transition:background .2s,border-color .2s}

#rc-posts-2-col .tlp-more:hover{background:var(--tlp-alt);border-color:var(--tlp-accent)}

#rc-posts-2-col .tlp-more:disabled{opacity:.5;cursor:wait}

#rc-posts-2-col .tlp-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;border-top:1px solid var(--tlp-border);padding-top:9px;color:var(--tlp-muted);font-size:10.2px}

#rc-posts-2-col .tlp-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#rc-posts-2-col .tlp-all{flex:0 0 auto;color:var(--tlp-accent);font-weight:750;text-decoration:none}

#rc-posts-2-col .tlp-all:hover{text-decoration:underline}

/* Floating preview: placed in body, unaffected by sidebar clipping */

#trucblog-label-tooltip{

  --tlp-pop-bg:var(--surface,var(--post-bg,#fff));--tlp-pop-alt:var(--surface-alt,#f7f4fb);

  --tlp-pop-color:var(--text-main,#242133);--tlp-pop-muted:var(--text-muted,#777080);

  --tlp-pop-border:var(--accent,#7155be);

  --arrow-x:50%;position:fixed;z-index:2147483646;left:0;top:0;

  display:block;width:318px;max-width:calc(100vw - 20px);overflow:visible;

  border:1.5px solid var(--tlp-pop-border);border-radius:12px;

  color:var(--tlp-pop-color);background:var(--tlp-pop-bg);padding:11px;

  box-shadow:0 16px 38px rgba(0,0,0,.19);font:12px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif;

  pointer-events:none;opacity:0;visibility:hidden;transform:translateY(5px) scale(.99);

  transition:opacity .14s,transform .14s,visibility .14s;

}

#trucblog-label-tooltip.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

#trucblog-label-tooltip::after{content:"";position:absolute;left:var(--arrow-x);width:9px;height:9px;transform:translateX(-50%) rotate(45deg);background:var(--tlp-pop-bg)}

#trucblog-label-tooltip[data-placement="top"]::after{bottom:-5.5px;border-right:1.5px solid var(--tlp-pop-border);border-bottom:1.5px solid var(--tlp-pop-border)}

#trucblog-label-tooltip[data-placement="bottom"]::after{top:-5.5px;border-left:1.5px solid var(--tlp-pop-border);border-top:1.5px solid var(--tlp-pop-border)}

#trucblog-label-tooltip .tlp-pop-header{display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid color-mix(in srgb,var(--tlp-pop-color) 12%,transparent);padding-bottom:7px;margin-bottom:8px}

#trucblog-label-tooltip .tlp-pop-brand{font-weight:800;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#trucblog-label-tooltip .tlp-pop-badge{background:color-mix(in srgb,var(--tlp-pop-border) 14%,transparent);color:var(--tlp-pop-border);border-radius:99px;padding:2px 7px;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}

#trucblog-label-tooltip .tlp-pop-row{display:flex;align-items:flex-start;gap:10px}

#trucblog-label-tooltip .tlp-pop-picture{width:76px;aspect-ratio:4/3;object-fit:cover;flex-shrink:0;border-radius:8px;background:var(--tlp-pop-alt)}

#trucblog-label-tooltip .tlp-pop-content{min-width:0;flex:1}

#trucblog-label-tooltip .tlp-pop-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-weight:800;font-size:12.6px;line-height:1.35;overflow-wrap:anywhere}

#trucblog-label-tooltip .tlp-pop-excerpt{margin:6px 0 0;font-size:11.2px;color:var(--tlp-pop-muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}

#trucblog-label-tooltip .tlp-pop-footer{margin-top:9px;border-top:1px solid color-mix(in srgb,var(--tlp-pop-color) 12%,transparent);padding-top:7px;color:var(--tlp-pop-muted);font-size:10px;display:flex;justify-content:space-between;gap:8px}

#trucblog-label-tooltip .tlp-pop-footer strong{color:var(--tlp-pop-border)}

@container (max-width:285px){#rc-posts-2-col .tlp-grid{grid-template-columns:1fr}#rc-posts-2-col .tlp-media{aspect-ratio:2.2}}

@media(max-width:480px){#rc-posts-2-col .tlp-posttitle{font-size:11.5px}#rc-posts-2-col .tlp-body{padding:8px 7px}#rc-posts-2-col .tlp-controls{gap:5px}}

@media(prefers-reduced-motion:reduce){#rc-posts-2-col *,#trucblog-label-tooltip{transition:none!important;animation:none!important}}

/* =========================================================

   TRUCBLOG 2026: TWO-COLUMN MINI CARDS / FAST IMAGE DISPLAY

   Compact spacing, theme safe. No global CSS overrides.

   ========================================================= */

#rc-posts-2-col{font-size:12px;line-height:1.35}

#rc-posts-2-col .tlp-top{gap:6px;margin-bottom:7px;padding-bottom:7px}

#rc-posts-2-col .tlp-titleicon{width:25px;height:25px;flex-basis:25px;border-radius:7px;font-size:13px}

#rc-posts-2-col .tlp-headline{font-size:12.7px;line-height:1.3}

#rc-posts-2-col .tlp-subtitle{font-size:9.5px;margin-top:2px}

#rc-posts-2-col .tlp-count{font-size:9.5px;padding:2px 6px}

#rc-posts-2-col .tlp-refresh{width:25px;height:25px;flex-basis:25px;font-size:14px;border-radius:7px}

#rc-posts-2-col .tlp-controls{gap:6px;margin-bottom:7px}

#rc-posts-2-col .tlp-label-select,#rc-posts-2-col .tlp-sort,#rc-posts-2-col .tlp-search{height:29px;padding:0 7px;font-size:10.6px;border-radius:7px}

#rc-posts-2-col .tlp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}

#rc-posts-2-col .tlp-card{border-radius:9px;box-shadow:none;transition:border-color .16s ease,background .16s ease,transform .16s ease}

#rc-posts-2-col .tlp-card:hover,#rc-posts-2-col .tlp-card:focus-visible{transform:translateY(-2px)}

#rc-posts-2-col .tlp-media{aspect-ratio:2.08;max-height:70px;min-height:0}

#rc-posts-2-col .tlp-cover{width:100%;height:100%;object-fit:cover;transform:none}

#rc-posts-2-col .tlp-card:hover .tlp-cover{transform:scale(1.025)}

#rc-posts-2-col .tlp-media-flag{left:4px;bottom:4px;max-width:calc(100% - 8px);font-size:8px;padding:1px 4px;border-radius:4px;backdrop-filter:none}

#rc-posts-2-col .tlp-fallback{font-size:19px}

#rc-posts-2-col .tlp-body{gap:4px;padding:6px 6px 7px}

#rc-posts-2-col .tlp-posttitle{font-size:10.5px;line-height:1.36;min-height:2.72em;-webkit-line-clamp:2;font-weight:730}

#rc-posts-2-col .tlp-meta{font-size:8.9px;gap:3px}

#rc-posts-2-col .tlp-skeleton{height:127px;border-radius:9px}

#rc-posts-2-col .tlp-actions{margin-top:9px}

#rc-posts-2-col .tlp-more{font-size:10.6px;padding:7px 12px;border-radius:8px}

#rc-posts-2-col .tlp-bottom{margin-top:9px;padding-top:7px;font-size:9.6px}

#trucblog-label-tooltip .tlp-pop-picture{width:58px;aspect-ratio:4/3}

@container (max-width:285px){#rc-posts-2-col .tlp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#rc-posts-2-col .tlp-media{aspect-ratio:1.9;max-height:60px}#rc-posts-2-col .tlp-posttitle{font-size:10px}}

@container (max-width:245px){#rc-posts-2-col .tlp-grid{grid-template-columns:1fr}#rc-posts-2-col .tlp-media{max-height:95px;aspect-ratio:2.3}}

@media(max-width:480px){#rc-posts-2-col .tlp-posttitle{font-size:10.4px}#rc-posts-2-col .tlp-body{padding:6px}#rc-posts-2-col .tlp-controls{gap:5px}}

</style>

<!-- TRUCBLOG: Hai cột bài viết theo nhãn. Dán toàn bộ vào tiện ích HTML/JavaScript. -->

<div id="rc-posts-2-col" class="tlp-root" aria-label="Bài viết theo chuyên mục">

  <div class="tlp-top">

    <span class="tlp-titleicon" aria-hidden="true">▣</span>

    <div class="tlp-titlebox"><h3 class="tlp-headline">Thủ thuật Blogger</h3><p class="tlp-subtitle">Bài viết theo nhãn</p></div>

    <span class="tlp-count" aria-label="Số bài viết">0</span>

    <button type="button" class="tlp-refresh" aria-label="Làm mới bài viết" title="Làm mới">↻</button>

  </div>

  <div class="tlp-controls">

    <div class="tlp-filter"><select class="tlp-label-select" aria-label="Chọn chuyên mục"></select></div>

    <input class="tlp-search" type="search" placeholder="Tìm trong bài đã tải…" aria-label="Tìm bài viết" autocomplete="off"/>

    <select class="tlp-sort" aria-label="Sắp xếp bài viết"><option value="new">Mới nhất</option><option value="old">Cũ trước (đã tải)</option><option value="title">Tên A–Z</option></select>

  </div>

  <ul class="tlp-grid" aria-live="polite"><li class="tlp-empty">Đang tải bài viết…</li></ul>

  <div class="tlp-actions"><button class="tlp-more" type="button" hidden="hidden">Xem thêm bài viết</button></div>

  <div class="tlp-bottom"><span class="tlp-status" role="status">Đang kết nối Blogger…</span><a class="tlp-all" href="/" rel="nofollow">Xem nhãn ↗</a></div>

</div>

<script>

/* TRUCBLOG | Bài viết theo nhãn - 2 cột | no external dependencies */

(function(){

 'use strict';

 var root=document.getElementById('rc-posts-2-col');

 if(!root || root.dataset.tlpReady==='1')return;

 root.dataset.tlpReady='1';

 // CHỈNH CẤU HÌNH TẠI ĐÂY. Nhãn đầu được ưu tiên; nếu nhãn cũ không còn bài, tự thử nhãn tiếp theo.

 var CONFIG={

   blogUrl:location.protocol==='file:'?'https://trucblogs.blogspot.com':location.origin,

   labels:['Thủ Thuật Blogger','Blogspot','CSS','Javascript'],

   initialPosts:8,

   postsPerPage:6,

   summaryLength:170,

   autoFallback:true,

   refreshMinutes:5,

   cacheMinutes:5

 };

 var blogUrl=CONFIG.blogUrl.replace(/\/+$/,'');

 var ui={grid:root.querySelector('.tlp-grid'),select:root.querySelector('.tlp-label-select'),search:root.querySelector('.tlp-search'),sort:root.querySelector('.tlp-sort'),count:root.querySelector('.tlp-count'),status:root.querySelector('.tlp-status'),more:root.querySelector('.tlp-more'),refresh:root.querySelector('.tlp-refresh'),all:root.querySelector('.tlp-all'),label:root.querySelector('.tlp-subtitle')};

 var state={label:CONFIG.labels[0],all:[],seen:new Set(),next:1,total:null,finished:false,loading:false,epoch:0,requestId:0,lastLoad:0};

 var tip=document.getElementById('trucblog-label-tooltip');

 if(!tip){tip=document.createElement('div');tip.id='trucblog-label-tooltip';tip.setAttribute('role','tooltip');tip.setAttribute('data-placement','top');document.body.appendChild(tip)}

 var activeAnchor=null,activeItem=null,scrollFrame=null;

 function validUrl(v){try{var x=new URL(v,blogUrl+'/');return /^(https?:)$/.test(x.protocol)?x.href:''}catch(_){return ''}}

 function decodeEntities(v){var s=String(v==null?'':v),ta=document.createElement('textarea');for(var n=0;n<8;n++){var a=s;s=s.replace(/&(?:(?:amp);)*#(?:x([\da-f]{1,6})|(\d{1,7}));?/gi,function(m,h,d){var c=parseInt(h||d,h?16:10);return c>0&&c<=1114111&&!(c>=55296&&c<=57343)?String.fromCodePoint(c):m});ta.innerHTML=s;s=ta.value;if(s===a)break}return s}

 function strip(value,max){var source=decodeEntities(value).replace(/<\s*br\b[^>]*>/gi,' ').replace(/<\s*\/\s*(?:p|div|li|blockquote|h[1-6])\s*>/gi,' ');var html=new DOMParser().parseFromString(source,'text/html');html.querySelectorAll('script,style,noscript,iframe,svg,math,object,embed,template').forEach(function(n){n.remove()});var text=decodeEntities(html.body.textContent||'').replace(/\s+/g,' ').trim();if(max&&text.length>max)return text.slice(0,max-1).trimEnd()+'…';return text}

 function feedPath(label){return '/feeds/posts/summary'+(label?'/-/'+encodeURIComponent(label):'')}

 function labelPage(label){return blogUrl+(label?'/search/label/'+encodeURIComponent(label):'/')}

 function getLink(entry){var l=entry&&entry.link||[];for(var i=0;i<l.length;i++)if(l[i].rel==='alternate'&&l[i].href)return validUrl(l[i].href);return ''}

 function getImage(entry){

  var thumb=entry['media$thumbnail']&&entry['media$thumbnail'].url||'';

  if(!thumb){var snippet=entry.content&&entry.content.$t||entry.summary&&entry.summary.$t||'';

   var match=snippet.match(/<img\b[^>]*\bsrc=["']([^"']+)["']/i);

   if(match)thumb=decodeEntities(match[1]);}

  thumb=validUrl(thumb);if(!thumb)return '';

  try{

   var u=new URL(thumb),host=u.hostname.toLowerCase();

   // Ask Blogger's image CDN for a 240x135 thumbnail, rather than large originals.

   if(/(?:^|\.)(?:googleusercontent\.com|blogspot\.com)$/.test(host)){

    u.pathname=u.pathname.replace(/\/(?:s\d+(?:-[a-z0-9-]+)?|w\d+(?:-h\d+)?(?:-[a-z0-9-]+)?)\//i,'/w240-h135-c/');

    u.pathname=u.pathname.replace(/=(?:s\d+(?:-[a-z0-9-]+)?|w\d+(?:-h\d+)?(?:-[a-z0-9-]+)?)$/i,'=w240-h135-c');

    return u.href;

   }

  }catch(e){}

  return thumb;

 }

 function parse(feed){return (feed&&feed.entry||[]).map(function(e){var url=getLink(e);if(!url)return null;var a=e.category||[],posted=e.published&&e.published.$t||e.updated&&e.updated.$t||'',time=new Date(posted).getTime()||0;var count=e['thr$total']&&e['thr$total'].$t;return {id:e.id&&e.id.$t||url,url:url,title:strip(e.title&&e.title.$t||'Bài viết',170),excerpt:strip(e.summary&&e.summary.$t||e.content&&e.content.$t||'',CONFIG.summaryLength),image:getImage(e),time:time,comments:count!=null&&/^\d+$/.test(String(count))?parseInt(count,10):null,labels:a.map(function(v){return strip(v.term||'',55)}).filter(Boolean)}}).filter(Boolean)}

 function jsonp(url,timeout){return new Promise(function(resolve,reject){var id='__truc_recent_'+Date.now()+'_'+(++state.requestId),node=document.createElement('script'),done=false;var timer=setTimeout(function(){settle(new Error('timeout'))},timeout||11000);function settle(err,data){if(done)return;done=true;clearTimeout(timer);node.remove();try{delete window[id]}catch(_){window[id]=undefined}if(err)reject(err);else resolve(data)}window[id]=function(data){settle(null,data)};node.onerror=function(){settle(new Error('network'))};node.async=true;node.src=url+(url.includes('?')?'&':'?')+'alt=json-in-script&callback='+encodeURIComponent(id);document.head.appendChild(node)})}

 function cacheKey(label,start,size){return 'tlp-mini-v3:'+blogUrl+':'+encodeURIComponent(label)+':'+start+':'+size}

 function getCached(label,start,size){

  if(start!==1)return null;

  try{var raw=sessionStorage.getItem(cacheKey(label,start,size));if(!raw)return null;

   var stored=JSON.parse(raw);if(Date.now()-stored.time>CONFIG.cacheMinutes*60000){sessionStorage.removeItem(cacheKey(label,start,size));return null}

   return stored.data&&stored.data.feed?stored.data:null;

  }catch(e){return null}

 }

 function putCached(label,start,size,data){

  if(start!==1||!data||!data.feed)return;

  try{sessionStorage.setItem(cacheKey(label,start,size),JSON.stringify({time:Date.now(),data:data}))}catch(e){}

 }

 function fetchPage(label,start,size,forceNetwork){

  var cached=!forceNetwork&&getCached(label,start,size);if(cached)return Promise.resolve(cached);

  var url=blogUrl+feedPath(label)+'?start-index='+Math.max(1,start)+'&max-results='+size;

  return jsonp(url,8000).then(function(d){if(!d||!d.feed)throw new Error('feed');return d})

   .catch(function(){var backup=blogUrl+feedPath(label).replace('/posts/summary','/posts/default')+'?start-index='+Math.max(1,start)+'&max-results='+size;return jsonp(backup,8500)})

   .then(function(data){putCached(label,start,size,data);return data});

 }

 function dateLabel(t){if(!t)return '—';return new Intl.DateTimeFormat('vi-VN',{day:'2-digit',month:'2-digit',year:'numeric'}).format(new Date(t))}

 function infoText(){return state.all.length+' bài đã tải'+(typeof state.total==='number'?' / '+state.total:'')}

 function setBusy(b){state.loading=b;ui.refresh.disabled=b;ui.more.disabled=b;ui.refresh.classList.toggle('is-loading',b);ui.refresh.setAttribute('aria-busy',String(b));ui.more.textContent=b?'Đang tải…':'Xem thêm bài viết'}

 function clearTooltip(){activeAnchor=null;activeItem=null;tip.classList.remove('is-visible')}

 function placeTooltip(anchor){if(!anchor||!anchor.isConnected)return;var rect=anchor.getBoundingClientRect(),w=tip.offsetWidth||318,h=tip.offsetHeight||155;var x=Math.max(10,Math.min(window.innerWidth-w-10,rect.left+rect.width/2-w/2));var y=rect.top-h-12,pos='top';if(y<10){y=rect.bottom+12;pos='bottom'}if(y+h>window.innerHeight-9)y=Math.max(9,window.innerHeight-h-9);tip.style.left=x+'px';tip.style.top=y+'px';tip.dataset.placement=pos;tip.style.setProperty('--arrow-x',Math.max(16,Math.min(w-16,rect.left+rect.width/2-x))+'px')}

 function element(tag,cls,text){var e=document.createElement(tag);if(cls)e.className=cls;if(text!=null)e.textContent=text;return e}

 function popup(anchor,item){activeAnchor=anchor;activeItem=item;tip.replaceChildren();var comp=getComputedStyle(root);[['--tlp-pop-bg','--tlp-surface'],['--tlp-pop-alt','--tlp-alt'],['--tlp-pop-color','--tlp-text'],['--tlp-pop-muted','--tlp-muted'],['--tlp-pop-border','--tlp-accent']].forEach(function(p){var v=comp.getPropertyValue(p[1]).trim();if(v)tip.style.setProperty(p[0],v)});var head=element('div','tlp-pop-header');head.append(element('strong','tlp-pop-brand','TrucBlog'),element('span','tlp-pop-badge',item.labels[0]||state.label||'Bài viết'));var row=element('div','tlp-pop-row');if(item.image){var pic=element('img','tlp-pop-picture');pic.alt='';pic.loading='lazy';pic.decoding='async';pic.fetchPriority='low';pic.width=58;pic.height=44;pic.src=item.image;row.append(pic)}var text=element('div','tlp-pop-content');text.append(element('strong','tlp-pop-title',item.title));if(item.excerpt)text.append(element('p','tlp-pop-excerpt',item.excerpt));row.append(text);var foot=element('div','tlp-pop-footer');foot.append(element('span','',dateLabel(item.time)),element('strong','','Xem bài ↗'));tip.append(head,row,foot);tip.classList.add('is-visible');placeTooltip(anchor)}

 function makeCard(item){var li=element('li','tlp-item'),a=element('a','tlp-card');a.href=item.url;a.setAttribute('aria-label',item.title+' — '+dateLabel(item.time));var media=element('span','tlp-media');if(item.image){var img=element('img','tlp-cover');img.alt='';img.loading='lazy';img.decoding='async';img.fetchPriority='low';img.width=240;img.height=135;img.src=item.image;img.addEventListener('error',function(){img.replaceWith(element('span','tlp-fallback','▣'))},{once:true});media.append(img)}else media.append(element('span','tlp-fallback','▣'));if(item.labels.length)media.append(element('span','tlp-media-flag',item.labels[0]));var body=element('span','tlp-body');body.append(element('strong','tlp-posttitle',item.title));var meta=element('span','tlp-meta');meta.append(element('span','',dateLabel(item.time)));if(item.comments!=null)meta.append(element('span','',item.comments+' bình luận'));body.append(meta);a.append(media,body);a.addEventListener('mouseenter',function(){popup(a,item)});a.addEventListener('mouseleave',clearTooltip);a.addEventListener('focus',function(){popup(a,item)});a.addEventListener('blur',clearTooltip);li.append(a);return li}

 function render(){clearTooltip();var q=(ui.search.value||'').trim().toLocaleLowerCase('vi'),mode=ui.sort.value;var arr=state.all.filter(function(p){return !q||[p.title,p.excerpt,p.labels.join(' ')].join(' ').toLocaleLowerCase('vi').includes(q)});arr.sort(function(a,b){return mode==='old'?a.time-b.time:mode==='title'?a.title.localeCompare(b.title,'vi'):b.time-a.time});ui.grid.replaceChildren();if(!arr.length){ui.grid.append(element('li','tlp-empty',state.all.length?'Không tìm thấy bài phù hợp trong các bài đã tải.':'Chưa có bài viết công khai thuộc nhãn này.'));}else{var f=document.createDocumentFragment();arr.forEach(function(p){f.append(makeCard(p))});ui.grid.append(f)}ui.count.textContent=state.total!=null?String(state.total):String(state.all.length);ui.status.textContent=infoText();ui.more.hidden=state.finished;ui.all.href=labelPage(state.label);ui.label.textContent=state.label||'Tất cả bài viết'}

 function skeleton(){ui.grid.replaceChildren();for(var i=0;i<4;i++)ui.grid.append(element('li','tlp-skeleton'));ui.status.textContent='Đang kết nối Blogger…'}

 function fail(err){ui.grid.replaceChildren();var li=element('li','tlp-error');li.append(document.createTextNode('Không tải được bài viết. Kiểm tra feed và nhãn Blogger.'));var b=element('button','','Thử lại');b.type='button';b.addEventListener('click',function(){load(true)});li.append(b);ui.grid.append(li);ui.status.textContent='Feed Blogger không khả dụng';ui.more.hidden=true}

 function applyResponse(data){var entries=parse(data.feed),totalRaw=data.feed['openSearch$totalResults']&&data.feed['openSearch$totalResults'].$t,total=/^\d+$/.test(String(totalRaw))?parseInt(totalRaw,10):null;if(total!=null)state.total=total;var added=0;entries.forEach(function(p){if(!state.seen.has(p.id)){state.seen.add(p.id);state.all.push(p);added++}});state.next+=data.feed.entry&&data.feed.entry.length||0;state.finished=entries.length===0||(total!=null?state.next>total:entries.length<state.lastAsk);return added}

 function load(reset,forceNetwork){if(state.loading&&!reset)return;var epoch=++state.epoch;if(reset){state.all=[];state.seen.clear();state.next=1;state.total=null;state.finished=false;skeleton()}if(state.finished){render();return}setBusy(true);var want=state.next===1?CONFIG.initialPosts:CONFIG.postsPerPage;state.lastAsk=want;fetchPage(state.label,state.next,want,!!forceNetwork).then(function(data){if(epoch!==state.epoch)return;var count=applyResponse(data);if(reset && count===0 && CONFIG.autoFallback && state.label===CONFIG.labels[0] && CONFIG.labels.length>1){var index=1;return (function fallback(){if(index>=CONFIG.labels.length){render();return}var target=CONFIG.labels[index++];return fetchPage(target,1,CONFIG.initialPosts).then(function(d){if(epoch!==state.epoch)return;if((d.feed.entry||[]).length){state.label=target;ui.select.value=target;state.next=1;state.total=null;state.seen.clear();state.all=[];applyResponse(d);render()}else return fallback()}).catch(function(){return fallback()})})()}render()}).catch(function(err){if(epoch===state.epoch){if(state.all.length){ui.status.textContent='Không thể tải thêm. Hãy thử lại.';ui.more.hidden=false}else fail(err)}}).finally(function(){if(epoch===state.epoch){setBusy(false);state.lastLoad=Date.now()}})}

 CONFIG.labels.forEach(function(v){var o=element('option','',v);o.value=v;ui.select.append(o)});ui.select.value=state.label;

 ui.select.addEventListener('change',function(){state.label=ui.select.value;ui.search.value='';load(true)});

 ui.search.addEventListener('input',render);ui.sort.addEventListener('change',render);

 ui.refresh.addEventListener('click',function(){load(true,true)});ui.more.addEventListener('click',function(){load(false)});

 document.addEventListener('keydown',function(e){if(e.key==='Escape')clearTooltip()});window.addEventListener('scroll',clearTooltip,true);window.addEventListener('resize',clearTooltip);

 window.setInterval(function(){if(!document.hidden&&state.lastLoad&&Date.now()-state.lastLoad>CONFIG.refreshMinutes*60000)load(true,true)},60000);

 if('IntersectionObserver' in window){

  var bootObserver=new IntersectionObserver(function(entries){

   if(entries.some(function(entry){return entry.isIntersecting})){bootObserver.disconnect();load(true)}

  },{rootMargin:'550px 0px'});

  bootObserver.observe(root);

 }else load(true);

})();

</script>

blogUrl:location.protocol==='file:'?'https://trucblogs.blogspot.com':location.origin, labels:['Thủ Thuật Blogger','Blogspot','CSS','Javascript'], initialPosts:12,
postsPerPage:8, summaryLength:400, autoFallback:true, refreshMinutes:5