Cara Membuat Widget Label Blogger Retro dengan Slideshow Artikel Lama
Widget label Blogger tidak harus tampil seperti daftar kategori biasa. Dengan sedikit sentuhan desain, daftar label bisa diubah menjadi panel retro yang tetap ringan, responsif, dan berguna untuk membantu pengunjung menjelajahi arsip blog. Pada tutorial ini kita akan membuat widget label bergaya retro toolbox yang dilengkapi slideshow artikel lama, label berwarna dengan efek distressed, jumlah artikel, scrollbar bernuansa kayu, serta animasi perpindahan slide yang lebih hidup.
Versi widget ini dibuat menggunakan JavaScript native tanpa jQuery. Kodenya juga sudah disiapkan agar aman dipasang lebih dari satu kali pada halaman yang sama karena setiap instance memiliki scope, timer, event, dan callback JSONP sendiri.
Widget Label Blogger ModernLihat versi label dengan thumbnail artikel otomatis dan desain yang lebih modern.
Widget Feed Label FuturistikAlternatif lain dengan feed label otomatis dan gaya futuristik.
Informasi Singkat
Platform: Blogger
JavaScript: Native JS
Ikon: Font Awesome 7
Thumbnail slideshow: s256
Slideshow: 10 artikel random dari kelompok artikel lama
Multi-instance: Ya
Responsive: Ya
Platform: Blogger
JavaScript: Native JS
Ikon: Font Awesome 7
Thumbnail slideshow: s256
Slideshow: 10 artikel random dari kelompok artikel lama
Multi-instance: Ya
Responsive: Ya
Seperti Apa Widget Retro Toolbox Ini?
Bagian atas widget dibuat menyerupai kotak perkakas tua dengan dua dekorasi ikon di sudut atas. Di dalamnya terdapat slideshow artikel lama yang menampilkan gambar, judul, dan tanggal. Tombol navigasi Prev dan Next berada langsung di sisi kiri dan kanan gambar sehingga tampilannya tetap ringkas.
Bagian bawah berisi label Blogger dalam dua kolom. Setiap label memiliki warna berbeda, efek aus ringan, ikon yang menyesuaikan nama label, dan angka jumlah artikel di sisi kanan. Nama label panjang tidak dipotong dengan ellipsis, tetapi turun ke baris berikutnya agar tetap terbaca.
OLDER ARTICLES
RANDOM 10
RANDOM 10
Loading old archive…
Cara Kerja Slideshow Artikel Lama
Widget tidak mengambil sepuluh artikel terbaru. Script terlebih dahulu membaca jumlah post melalui feed Blogger, kemudian mengambil kelompok artikel dari bagian paling lama arsip. Dari kelompok tersebut dipilih sepuluh artikel secara acak untuk dimasukkan ke slideshow.
Pendekatan ini berguna untuk menghidupkan kembali konten lama yang mungkin sudah jarang terlihat dari halaman depan. Setiap gambar slideshow dinormalisasi ke ukuran s256 sehingga tidak perlu memuat gambar beresolusi terlalu besar pada widget sidebar atau area artikel.
Font Awesome 7 Wajib Digunakan
Widget ini menggunakan ikon Font Awesome 7. Jika template Anda belum memuat Font Awesome 7, beberapa ikon perkakas dan ikon label tidak akan tampil.
Font Awesome saat ini merekomendasikan penggunaan Kit untuk memasang Font Awesome 7 pada website. Font Awesome 7 tidak tersedia melalui Font Awesome CDN lama, sehingga pengguna dapat menggunakan Kit resmi atau melakukan self-host file Font Awesome 7.
Dokumentasi resminya dapat dibuka melalui Font Awesome 7 Quick Start. Untuk pengguna yang ingin menyimpan file sendiri, tersedia juga panduan Host Yourself dengan Web Fonts.
Contoh Memasang Font Awesome 7 dengan Kit
Setelah membuat Kit di Font Awesome dan mengaturnya ke versi 7, kode Kit dapat dipasang di bagian <head> template Blogger. Format dasarnya seperti berikut.
<script src="https://kit.fontawesome.com/YOUR_KIT_CODE.js" crossorigin="anonymous"></script>
Ganti YOUR_KIT_CODE dengan kode Kit milik Anda. Jangan menambahkan Kit kedua jika template sudah memuat Font Awesome 7 karena pemuatan ganda hanya menambah request dan berpotensi menimbulkan konflik versi.
Kode Widget Retro Toolbox Blogger
Kode berikut sudah menggunakan versi multi-instance safe. Artinya widget dapat dipasang pada dua atau lebih lokasi di halaman yang sama tanpa menggunakan ID global yang sama. Tombol slideshow, timer, label, dan callback feed bekerja di dalam instance masing-masing.
<style>
.cfrtlwRoot,.cfrtlwRoot *{box-sizing:border-box}
.cfrtlwRoot{width:100%;max-width:350px;margin:auto}
.cfrtlwBox{position:relative;margin:18px 4px 16px;padding:14px 9px 10px;border:1px solid #5b3b26;border-radius:10px;background:radial-gradient(circle at 10% 20%,rgba(255,255,255,.05),transparent 16%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 8px),linear-gradient(155deg,#8b492d,#633823 46%,#40281c);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -4px 0 rgba(0,0,0,.25),0 10px 20px rgba(0,0,0,.32)}
.cfrtlwBox:before,.cfrtlwBox:after{content:"";position:absolute;top:8px;width:27px;height:16px;border:2px solid #2e241e;border-radius:4px;background:linear-gradient(#9b7650,#5e472f);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.cfrtlwBox:before{left:18px}
.cfrtlwBox:after{right:18px}
.cfrtlwHandle{position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:92px;height:29px;border:7px solid #57331f;border-bottom:0;border-radius:20px 20px 0 0;box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
.cfrtlwArchiveTag{position:absolute;z-index:7;left:12px;top:10px;padding:4px 7px;transform:rotate(-3deg);background:#ddc79f;color:#3a2b1d;border:1px solid #6c5136;font:700 8px/1.1 Georgia,serif;letter-spacing:.6px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.cfrtlwToolIcon{position:absolute;z-index:8;color:#c7a57a;text-shadow:0 2px 3px rgba(0,0,0,.5);opacity:.86;pointer-events:none}
.cfrtlwToolIcon.i1{left:-12px;top:72px;font-size:32px;transform:rotate(-22deg)}
.cfrtlwToolIcon.i2{right:-13px;top:61px;font-size:34px;transform:rotate(18deg)}
.cfrtlwToolIcon.i3{left:-9px;bottom:36px;font-size:25px;transform:rotate(13deg)}
.cfrtlwToolIcon.i4{right:-9px;bottom:34px;font-size:24px;transform:rotate(-14deg)}
.cfrtlwToolIcon.i5{left:26px;bottom:-11px;font-size:21px;transform:rotate(-9deg)}
.cfrtlwToolIcon.i6{right:27px;bottom:-10px;font-size:20px;transform:rotate(13deg)}
.cfrtlwScreen{position:relative;height:164px;overflow:hidden;border:4px solid #221b16;border-radius:5px;background:#101010;box-shadow:inset 0 0 0 1px #775a3a,inset 0 0 18px rgba(0,0,0,.45),0 4px 8px rgba(0,0,0,.28)}
.cfrtlwScreen:before{content:"";position:absolute;z-index:12;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.027) 0 1px,transparent 1px 3px),radial-gradient(circle at 50% 42%,transparent 48%,rgba(0,0,0,.32) 100%);mix-blend-mode:screen}
.cfrtlwScreen:after{content:"";position:absolute;z-index:13;left:0;right:0;top:-30%;height:20%;background:linear-gradient(transparent,rgba(255,255,255,.13),transparent);animation:cfrtlwScan 5.8s linear infinite;pointer-events:none}
.cfrtlwSlide{position:absolute;inset:0;opacity:0;transform:scale(1.025);transition:opacity .55s ease,transform 1.1s ease;pointer-events:none}
.cfrtlwSlide.cfrtlw-active{opacity:1;transform:scale(1);pointer-events:auto}
.cfrtlwSlide img{width:100%;height:100%;display:block;object-fit:cover;filter:sepia(.17) saturate(.78) contrast(1.06) brightness(.72)}
.cfrtlwSlideShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 0,rgba(0,0,0,.08) 44%,rgba(0,0,0,.9) 100%)}
.cfrtlwSlideInfo{position:absolute;z-index:4;left:12px;right:12px;bottom:9px;text-shadow:0 2px 4px rgba(0,0,0,.8)}
.cfrtlwSlideTitle{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#f5ead5;font:700 13px/1.24 Georgia,serif}
.cfrtlwSlideDate{display:flex;align-items:center;gap:5px;margin-top:5px;color:#d4bf99;font-size:9px}
.cfrtlwNav{position:absolute;z-index:20;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid rgba(244,226,192,.72);background:rgba(24,20,17,.76);color:#f0dfbe;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.3),inset 0 0 0 2px rgba(255,255,255,.03);transition:.2s ease}
.cfrtlwNav:hover{background:rgba(40,31,23,.9);transform:translateY(-50%) scale(1.06)}
.cfrtlwNavPrev{left:8px}
.cfrtlwNavNext{right:8px}
.cfrtlwArchiveLoading{position:absolute;inset:0;display:grid;place-content:center;gap:7px;text-align:center;color:#c9b48d;font-size:10px}
.cfrtlwArchiveLoading i{font-size:24px;animation:cfrtlwSpin 2s linear infinite}
.cfrtlwLabelGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px;max-height:400px;overflow-y:auto;overflow-x:hidden;padding:7px 5px 10px;scrollbar-width:thin;scrollbar-color:var(--keycolor) transparent}
.cfrtlwLabelGrid::-webkit-scrollbar{width:4px}
.cfrtlwLabelGrid::-webkit-scrollbar-thumb{background:var(--keycolor);border-radius:999px}
.cfrtlwLabel{--c:#2e7287;--txt:#fff;--r:0deg;--x:0;--y:0;position:relative;display:flex;align-items:center;gap:7px;min-width:0;min-height:54px;padding:8px 9px;border:1px solid rgba(30,24,18,.66);border-radius:7px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 94%,#fff 6%),var(--c));color:var(--txt);text-decoration:none;overflow:hidden;transform:rotate(var(--r)) translate(var(--x),var(--y));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.16),0 4px 8px rgba(0,0,0,.19);transition:.2s ease}
.cfrtlwLabel:nth-child(10n+1){--c:#eadfc7;--txt:#1e2a25;--r:-2.4deg;--x:-2px;--y:2px}
.cfrtlwLabel:nth-child(10n+2){--c:#b63b32;--r:1.8deg;--x:2px;--y:-2px}
.cfrtlwLabel:nth-child(10n+3){--c:#1f6d78;--r:1.1deg;--x:1px;--y:3px}
.cfrtlwLabel:nth-child(10n+4){--c:#d5ab2f;--txt:#1e2418;--r:-1.7deg;--x:-1px;--y:-3px}
.cfrtlwLabel:nth-child(10n+5){--c:#c65d33;--r:2.7deg;--x:2px;--y:1px}
.cfrtlwLabel:nth-child(10n+6){--c:#2f744a;--r:-1.2deg;--x:-2px;--y:3px}
.cfrtlwLabel:nth-child(10n+7){--c:#315f92;--r:-2deg;--x:1px;--y:-1px}
.cfrtlwLabel:nth-child(10n+8){--c:#5d4c8f;--r:1.4deg;--x:-1px;--y:2px}
.cfrtlwLabel:nth-child(10n+9){--c:#a94d72;--r:-1.6deg;--x:1px;--y:2px}
.cfrtlwLabel:nth-child(10n){--c:#5f625f;--r:2deg;--x:-1px;--y:-2px}
.cfrtlwLabel:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;opacity:.68;background:radial-gradient(circle at 13% 18%,rgba(26,20,14,.22) 0 1px,transparent 1.8px),radial-gradient(circle at 77% 72%,rgba(255,246,220,.18) 0 1.2px,transparent 2px),radial-gradient(ellipse at 35% 86%,rgba(35,25,17,.18) 0 2px,transparent 4px),radial-gradient(ellipse at 92% 28%,rgba(255,255,255,.13) 0 1px,transparent 3px),repeating-linear-gradient(112deg,transparent 0 13px,rgba(30,20,12,.055) 14px 15px,transparent 16px 25px);background-size:31px 27px,37px 33px,63px 41px,51px 39px,auto;mix-blend-mode:multiply}
.cfrtlwLabel:before{content:"";position:absolute;z-index:4;top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:rgba(30,25,20,.75);box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.cfrtlwLabelIcon,.cfrtlwLabelText,.cfrtlwLabelArrow{position:relative;z-index:3}
.cfrtlwLabelIcon{flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:rgba(255,255,255,.11);font-size:13px}
.cfrtlwLabelText{min-width:0;flex:1}
.cfrtlwLabelName{display:block;font-size:13px;font-weight:800;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfrtlwLabelCount{display:block;margin-top:3px;font-size:9px;opacity:.8}
.cfrtlwLabelArrow{flex:none;display:grid;place-items:center;width:24px;height:24px;border:1px solid currentColor;border-radius:50%;font-size:10px;opacity:.88}
.cfrtlwLabel:hover{transform:rotate(0deg) translateY(-3px) scale(1.015);z-index:8;filter:brightness(1.05)}
.cfrtlwError{grid-column:1/-1;padding:15px;text-align:center;border:1px dashed rgba(255,255,255,.14);border-radius:7px;color:#bdb3a3;font-size:11px}
.cfrtlwSkeleton{height:54px;border-radius:7px;background:linear-gradient(90deg,#292622,#37332d,#292622);background-size:200% 100%;animation:cfrtlwLoad 1.2s linear infinite}
@keyframes cfrtlwScan{to{top:125%}
}
@keyframes cfrtlwSpin{to{transform:rotate(360deg)}
}
@keyframes cfrtlwLoad{to{background-position:-200% 0}
}
@media(max-width:280px){.cfrtlwLabelGrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.cfrtlwScreen:after,.cfrtlwArchiveLoading i,.cfrtlwSkeleton{animation:none}
.cfrtlwSlide,.cfrtlwLabel{transition:none}
}
.cfrtlwLabel{min-height:58px;padding:9px 10px;gap:8px}
.cfrtlwLabelIcon{width:30px;height:30px;font-size:14px}
.cfrtlwLabelName{font-size:15px;line-height:1.08;font-weight:900;letter-spacing:.15px}
.cfrtlwLabelNumber{position:relative;z-index:3;flex:none;display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border:1px solid currentColor;border-radius:6px;background:rgba(0,0,0,.12);font-size:11px;font-weight:900;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.cfrtlwRoot{width:100%;max-width:none;margin:0;padding:10px;background:none;border:0;box-shadow:none}
.cfrtlwBox{margin:18px 0 16px}
.cfrtlwLabelGrid{padding:7px 0 10px}
.cfrtlwSlide{opacity:0;transform:translateX(16%) scale(.88) rotate(2.2deg);filter:blur(2px) brightness(.72);transition:opacity .42s ease,transform .7s cubic-bezier(.18,.89,.32,1.28),filter .48s ease;transform-origin:center center}
.cfrtlwSlide.cfrtlw-active{opacity:1;transform:translateX(0) scale(1) rotate(0);filter:blur(0) brightness(1);animation:cfrtlwSlideBounce .78s cubic-bezier(.17,.89,.32,1.35)}
.cfrtlwSlide.cfrtlw-leaving-left{opacity:0;transform:translateX(-22%) scale(1.08) rotate(-2deg);filter:blur(2px) brightness(.7)}
.cfrtlwSlide.cfrtlw-leaving-right{opacity:0;transform:translateX(22%) scale(1.08) rotate(2deg);filter:blur(2px) brightness(.7)}
.cfrtlwScreen{perspective:700px}
.cfrtlwScreen.cfrtlw-kick{animation:cfrtlwScreenKick .62s cubic-bezier(.2,.85,.25,1.18)}
@keyframes cfrtlwSlideBounce{0%{transform:translateX(14%) scale(.9) rotate(1.7deg)}
58%{transform:translateX(-2.2%) scale(1.035) rotate(-.45deg)}
78%{transform:translateX(1%) scale(.992) rotate(.18deg)}
100%{transform:translateX(0) scale(1) rotate(0)}
}
@keyframes cfrtlwScreenKick{0%,100%{transform:scale(1)}
38%{transform:scale(1.018)}
68%{transform:scale(.994)}
}
@media(prefers-reduced-motion:reduce){.cfrtlwSlide,.cfrtlwSlide.cfrtlw-active,.cfrtlwScreen.cfrtlw-kick{animation:none;transition:none}
}
.cfrtlwLabel{min-height:60px;height:auto;align-items:center}
.cfrtlwLabelText{min-width:0;flex:1;display:flex;align-items:center}
.cfrtlwLabelName{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:normal;font-size:15px;line-height:1.18;max-width:100%}
.cfrtlwLabelNumber{align-self:center}
.cfrtlwToolIcon.i1,.cfrtlwToolIcon.i2,.cfrtlwToolIcon.i3,.cfrtlwToolIcon.i4,.cfrtlwToolIcon.i5,.cfrtlwToolIcon.i6{display:none}
.cfrtlwCornerTool{display:block!important;top:8px;bottom:auto;font-size:22px;color:#c9a274;opacity:.9;z-index:10;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.cfrtlwCornerToolL{left:8px;right:auto;transform:rotate(-28deg)}
.cfrtlwCornerToolR{right:8px;left:auto;transform:rotate(25deg)}
.cfrtlwRoot{position:relative;padding-bottom:20px}
.cfrtlwRoot:after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:7px;border-top:1px solid #7b5a38;border-bottom:2px solid #35281d;background:repeating-linear-gradient( 90deg,#b78b55 0 9px,#5f4630 9px 12px,#d0a76d 12px 19px,#3e3024 19px 22px );box-shadow:0 2px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);opacity:.9;transform:skewX(-7deg);pointer-events:none}
.cfrtlwLabelGrid{scrollbar-color:#8a623f #30241b;scrollbar-width:thin}
.cfrtlwLabelGrid::-webkit-scrollbar{width:8px}
.cfrtlwLabelGrid::-webkit-scrollbar-track{background:#30241b;border-radius:8px;box-shadow:inset 0 0 3px rgba(0,0,0,.5)}
.cfrtlwLabelGrid::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#6f4b30,#a7784d,#765136);border:1px solid #4b3424;border-radius:8px;box-shadow:inset 1px 0 rgba(255,255,255,.12)}
.cfrtlwLabelGrid::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#795337,#b18459,#80583a)}
.cfrtlwRoot:after{left:10px;right:10px;bottom:5px;height:7px;border:0;border-radius:2px;background:#795436;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(53,36,24,.45),0 2px 2px rgba(0,0,0,.25);opacity:1;transform:none}
.cfrtlwRoot{background:transparent;position:relative;isolation:isolate}
</style>
<div class="cfrtlwRoot">
<div class="cfrtlwBox">
<span class="cfrtlwHandle"></span>
<span class="cfrtlwArchiveTag">OLDER ARTICLES<br>RANDOM 10</span>
<i class="fa-solid fa-wrench cfrtlwToolIcon cfrtlwCornerTool cfrtlwCornerToolL"></i>
<i class="fa-solid fa-hammer cfrtlwToolIcon cfrtlwCornerTool cfrtlwCornerToolR"></i>
<div class="cfrtlwScreen">
<div class="cfrtlwArchiveLoading">
<i class="fa-solid fa-compact-disc"></i>
<span>Loading old archive…</span>
</div>
<button class="cfrtlwNav cfrtlwNavPrev" type="button" aria-label="Previous article">
<i class="fa-solid fa-chevron-left"></i>
</button>
<button class="cfrtlwNav cfrtlwNavNext" type="button" aria-label="Next article">
<i class="fa-solid fa-chevron-right"></i>
</button>
</div>
</div>
<div class="cfrtlwLabelGrid">
<div class="cfrtlwSkeleton"></div><div class="cfrtlwSkeleton"></div>
<div class="cfrtlwSkeleton"></div><div class="cfrtlwSkeleton"></div>
</div>
</div>
<script>
(function(){
const script=document.currentScript;
const root=script&&script.previousElementSibling;
if(!root||!root.classList.contains(x27;cfrtlwRootx27;))return;
const BLOG=x27;https://www.codeflare.netx27;;
const screen=root.querySelector(x27;.cfrtlwScreenx27;);
const prev=root.querySelector(x27;.cfrtlwNavPrevx27;);
const next=root.querySelector(x27;.cfrtlwNavNextx27;);
const labelGrid=root.querySelector(x27;.cfrtlwLabelGridx27;);
function jsonp(url){
return new Promise((resolve,reject)=>{
const cb=x27;cfrtlwJsonp_x27;+Date.now()+x27;_x27;+Math.random().toString(36).slice(2,10);
const s=document.createElement(x27;scriptx27;);
const timer=setTimeout(()=>{clean();reject(new Error(x27;timeoutx27;))},12000);
function clean(){clearTimeout(timer);delete window[cb];s.remove()}
window[cb]=d=>{clean();resolve(d)};
s.onerror=()=>{clean();reject(new Error(x27;feedx27;))};
s.src=url+(url.includes(x27;?x27;)?x27;&x27;:x27;?x27;)+x27;alt=json-in-script&callback=x27;+cb;
(document.head||document.body||document.documentElement).appendChild(s);
});
}
function thumb(e){
let u=e.media$thumbnail?.url||x27;x27;;
if(u) return u.replace(/\/s72-c(?=\/|$)/,x27;/s256x27;).replace(/\/w72-h72-p-k-no-nu(?=\/|$)/,x27;/s256x27;);
const h=e.content?.$t||e.summary?.$t||x27;x27;;
const m=h.match(/<img[^>]+src=["x27;]([^"x27;]+)["x27;]/i);
if(!m)return x27;x27;;
return m[1]
.replace(/\/s\d+(?:-c)?(?=\/|$)/,x27;/s256x27;)
.replace(/\/w\d+-h\d+[^/]*(?=\/|$)/,x27;/s256x27;);
}
function href(e){return (e.link||[]).find(x=>x.rel===x27;alternatex27;)?.href||x27;#x27;}
function formatDate(e){
const raw=e.published?.$t||e.updated?.$t||x27;x27;;
if(!raw)return x27;x27;;
try{return new Intl.DateTimeFormat(x27;id-IDx27;,{day:x27;2-digitx27;,month:x27;shortx27;,year:x27;numericx27;}).format(new Date(raw))}
catch(_){return raw.slice(0,10)}
}
function shuffle(a){
for(let i=a.length-1;i>0;i--){
const j=Math.floor(Math.random()*(i+1));
[a[i],a[j]]=[a[j],a[i]];
}
return a;
}
async function loadArchive(){
try{
const meta=await jsonp(BLOG+x27;/feeds/posts/default?max-results=1x27;);
const total=Number(meta.feed?.openSearch$totalResults?.$t||0);
if(!total)throw new Error(x27;emptyx27;);
const poolSize=Math.min(80,total);
const start=Math.max(1,total-poolSize+1);
const data=await jsonp(BLOG+x27;/feeds/posts/default?start-index=x27;+start+x27;&max-results=x27;+poolSize);
const chosen=shuffle((data.feed?.entry||[]).slice()).slice(0,10);
if(!chosen.length)throw new Error(x27;emptyx27;);
screen.querySelector(x27;.cfrtlwArchiveLoadingx27;)?.remove();
let current=0,timer=null;
const slides=[];
chosen.forEach((e,i)=>{
const a=document.createElement(x27;ax27;);
a.className=x27;cfrtlwSlidex27;+(i===0?x27; cfrtlw-activex27;:x27;x27;);
a.href=href(e);
a.innerHTML=
x27;<img alt="">x27;+
x27;<span class="cfrtlwSlideShade"></span>x27;+
x27;<span class="cfrtlwSlideInfo">x27;+
x27;<strong class="cfrtlwSlideTitle"></strong>x27;+
x27;<span class="cfrtlwSlideDate"><i class="fa-solid fa-calendar-days"></i><span></span></span>x27;+
x27;</span>x27;;
const im=a.querySelector(x27;imgx27;),u=thumb(e);
if(u)im.src=u;
else{
im.remove();
a.style.background=x27;linear-gradient(135deg,#403426,#17130f)x27;;
}
a.querySelector(x27;.cfrtlwSlideTitlex27;).textContent=e.title?.$t||x27;Untitledx27;;
a.querySelector(x27;.cfrtlwSlideDate spanx27;).textContent=formatDate(e);
screen.insertBefore(a,prev);
slides.push(a);
});
function go(n,restart){
const old=current;
const nextIndex=(n+slides.length)%slides.length;
if(nextIndex===old)return;
const dir=(nextIndex>old || (old===slides.length-1 && nextIndex===0)) ? 1 : -1;
const leaving=slides[old];
leaving?.classList.remove(x27;cfrtlw-leaving-leftx27;,x27;cfrtlw-leaving-rightx27;);
leaving?.classList.add(dir>0?x27;cfrtlw-leaving-leftx27;:x27;cfrtlw-leaving-rightx27;);
leaving?.classList.remove(x27;cfrtlw-activex27;);
current=nextIndex;
const entering=slides[current];
entering?.classList.remove(x27;cfrtlw-leaving-leftx27;,x27;cfrtlw-leaving-rightx27;);
entering?.classList.add(x27;cfrtlw-activex27;);
screen.classList.remove(x27;cfrtlw-kickx27;);
void screen.offsetWidth;
screen.classList.add(x27;cfrtlw-kickx27;);
setTimeout(()=>{
leaving?.classList.remove(x27;cfrtlw-leaving-leftx27;,x27;cfrtlw-leaving-rightx27;);
},760);
if(restart)startTimer();
}
function startTimer(){
clearInterval(timer);
timer=setInterval(()=>go(current+1,false),4500);
}
prev.onclick=()=>go(current-1,true);
next.onclick=()=>go(current+1,true);
screen.addEventListener(x27;mouseenterx27;,()=>clearInterval(timer));
screen.addEventListener(x27;mouseleavex27;,startTimer);
startTimer();
}catch(err){
screen.querySelector(x27;.cfrtlwArchiveLoadingx27;).innerHTML=
x27;<i class="fa-solid fa-box-archive"></i><span>Old archive unavailable</span>x27;;
console.error(err);
}
}
const iconMap=[
[/tutorial|guide|how/i,x27;fa-book-openx27;],
[/blogger|blog/i,x27;fa-blogx27;],
[/template|theme/i,x27;fa-window-maximizex27;],
[/seo|search/i,x27;fa-magnifying-glassx27;],
[/tool/i,x27;fa-wrenchx27;],
[/adsense|ads/i,x27;fa-coinsx27;],
[/javascript|js/i,x27;fa-codex27;],
[/css/i,x27;fa-css3-altx27;],
[/html/i,x27;fa-html5x27;],
[/\bai\b|artificial/i,x27;fa-brainx27;],
[/design|ui|ux/i,x27;fa-palettex27;],
[/security|safe/i,x27;fa-lockx27;],
[/news|berita/i,x27;fa-newspaperx27;]
];
function iconFor(label){
for(const [rx,icon] of iconMap)if(rx.test(label))return icon;
return x27;fa-tagx27;;
}
async function loadLabels(){
try{
const data=await jsonp(BLOG+x27;/feeds/posts/default?max-results=100x27;);
const entries=data.feed?.entry||[];
const counts=new Map();
entries.forEach(e=>{
(e.category||[]).forEach(c=>{
if(c.term)counts.set(c.term,(counts.get(c.term)||0)+1);
});
});
const labels=[...counts.entries()].sort((a,b)=>b[1]-a[1]);
labelGrid.innerHTML=x27;x27;;
labels.forEach(([label,count])=>{
const a=document.createElement(x27;ax27;);
a.className=x27;cfrtlwLabelx27;;
a.href=BLOG+x27;/search/label/x27;+encodeURIComponent(label);
a.innerHTML=
x27;<span class="cfrtlwLabelIcon"><i class="fa-solid x27;+iconFor(label)+x27;"></i></span>x27;+
x27;<span class="cfrtlwLabelText"><strong class="cfrtlwLabelName"></strong></span>x27;+
x27;<span class="cfrtlwLabelNumber"></span>x27;;
a.querySelector(x27;.cfrtlwLabelNamex27;).textContent=label;
a.querySelector(x27;.cfrtlwLabelNumberx27;).textContent=count;
labelGrid.appendChild(a);
});
if(!labels.length)labelGrid.innerHTML=x27;<div class="cfrtlwError">Label tidak ditemukan.</div>x27;;
}catch(err){
labelGrid.innerHTML=x27;<div class="cfrtlwError">Feed label CodeFlare tidak dapat dimuat.</div>x27;;
console.error(err);
}
}
loadArchive();
loadLabels();
})();
</script>
.cfrtlwRoot,.cfrtlwRoot *{box-sizing:border-box}
.cfrtlwRoot{width:100%;max-width:350px;margin:auto}
.cfrtlwBox{position:relative;margin:18px 4px 16px;padding:14px 9px 10px;border:1px solid #5b3b26;border-radius:10px;background:radial-gradient(circle at 10% 20%,rgba(255,255,255,.05),transparent 16%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 8px),linear-gradient(155deg,#8b492d,#633823 46%,#40281c);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -4px 0 rgba(0,0,0,.25),0 10px 20px rgba(0,0,0,.32)}
.cfrtlwBox:before,.cfrtlwBox:after{content:"";position:absolute;top:8px;width:27px;height:16px;border:2px solid #2e241e;border-radius:4px;background:linear-gradient(#9b7650,#5e472f);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.cfrtlwBox:before{left:18px}
.cfrtlwBox:after{right:18px}
.cfrtlwHandle{position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:92px;height:29px;border:7px solid #57331f;border-bottom:0;border-radius:20px 20px 0 0;box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
.cfrtlwArchiveTag{position:absolute;z-index:7;left:12px;top:10px;padding:4px 7px;transform:rotate(-3deg);background:#ddc79f;color:#3a2b1d;border:1px solid #6c5136;font:700 8px/1.1 Georgia,serif;letter-spacing:.6px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.cfrtlwToolIcon{position:absolute;z-index:8;color:#c7a57a;text-shadow:0 2px 3px rgba(0,0,0,.5);opacity:.86;pointer-events:none}
.cfrtlwToolIcon.i1{left:-12px;top:72px;font-size:32px;transform:rotate(-22deg)}
.cfrtlwToolIcon.i2{right:-13px;top:61px;font-size:34px;transform:rotate(18deg)}
.cfrtlwToolIcon.i3{left:-9px;bottom:36px;font-size:25px;transform:rotate(13deg)}
.cfrtlwToolIcon.i4{right:-9px;bottom:34px;font-size:24px;transform:rotate(-14deg)}
.cfrtlwToolIcon.i5{left:26px;bottom:-11px;font-size:21px;transform:rotate(-9deg)}
.cfrtlwToolIcon.i6{right:27px;bottom:-10px;font-size:20px;transform:rotate(13deg)}
.cfrtlwScreen{position:relative;height:164px;overflow:hidden;border:4px solid #221b16;border-radius:5px;background:#101010;box-shadow:inset 0 0 0 1px #775a3a,inset 0 0 18px rgba(0,0,0,.45),0 4px 8px rgba(0,0,0,.28)}
.cfrtlwScreen:before{content:"";position:absolute;z-index:12;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.027) 0 1px,transparent 1px 3px),radial-gradient(circle at 50% 42%,transparent 48%,rgba(0,0,0,.32) 100%);mix-blend-mode:screen}
.cfrtlwScreen:after{content:"";position:absolute;z-index:13;left:0;right:0;top:-30%;height:20%;background:linear-gradient(transparent,rgba(255,255,255,.13),transparent);animation:cfrtlwScan 5.8s linear infinite;pointer-events:none}
.cfrtlwSlide{position:absolute;inset:0;opacity:0;transform:scale(1.025);transition:opacity .55s ease,transform 1.1s ease;pointer-events:none}
.cfrtlwSlide.cfrtlw-active{opacity:1;transform:scale(1);pointer-events:auto}
.cfrtlwSlide img{width:100%;height:100%;display:block;object-fit:cover;filter:sepia(.17) saturate(.78) contrast(1.06) brightness(.72)}
.cfrtlwSlideShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 0,rgba(0,0,0,.08) 44%,rgba(0,0,0,.9) 100%)}
.cfrtlwSlideInfo{position:absolute;z-index:4;left:12px;right:12px;bottom:9px;text-shadow:0 2px 4px rgba(0,0,0,.8)}
.cfrtlwSlideTitle{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#f5ead5;font:700 13px/1.24 Georgia,serif}
.cfrtlwSlideDate{display:flex;align-items:center;gap:5px;margin-top:5px;color:#d4bf99;font-size:9px}
.cfrtlwNav{position:absolute;z-index:20;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid rgba(244,226,192,.72);background:rgba(24,20,17,.76);color:#f0dfbe;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.3),inset 0 0 0 2px rgba(255,255,255,.03);transition:.2s ease}
.cfrtlwNav:hover{background:rgba(40,31,23,.9);transform:translateY(-50%) scale(1.06)}
.cfrtlwNavPrev{left:8px}
.cfrtlwNavNext{right:8px}
.cfrtlwArchiveLoading{position:absolute;inset:0;display:grid;place-content:center;gap:7px;text-align:center;color:#c9b48d;font-size:10px}
.cfrtlwArchiveLoading i{font-size:24px;animation:cfrtlwSpin 2s linear infinite}
.cfrtlwLabelGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px;max-height:400px;overflow-y:auto;overflow-x:hidden;padding:7px 5px 10px;scrollbar-width:thin;scrollbar-color:var(--keycolor) transparent}
.cfrtlwLabelGrid::-webkit-scrollbar{width:4px}
.cfrtlwLabelGrid::-webkit-scrollbar-thumb{background:var(--keycolor);border-radius:999px}
.cfrtlwLabel{--c:#2e7287;--txt:#fff;--r:0deg;--x:0;--y:0;position:relative;display:flex;align-items:center;gap:7px;min-width:0;min-height:54px;padding:8px 9px;border:1px solid rgba(30,24,18,.66);border-radius:7px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 94%,#fff 6%),var(--c));color:var(--txt);text-decoration:none;overflow:hidden;transform:rotate(var(--r)) translate(var(--x),var(--y));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.16),0 4px 8px rgba(0,0,0,.19);transition:.2s ease}
.cfrtlwLabel:nth-child(10n+1){--c:#eadfc7;--txt:#1e2a25;--r:-2.4deg;--x:-2px;--y:2px}
.cfrtlwLabel:nth-child(10n+2){--c:#b63b32;--r:1.8deg;--x:2px;--y:-2px}
.cfrtlwLabel:nth-child(10n+3){--c:#1f6d78;--r:1.1deg;--x:1px;--y:3px}
.cfrtlwLabel:nth-child(10n+4){--c:#d5ab2f;--txt:#1e2418;--r:-1.7deg;--x:-1px;--y:-3px}
.cfrtlwLabel:nth-child(10n+5){--c:#c65d33;--r:2.7deg;--x:2px;--y:1px}
.cfrtlwLabel:nth-child(10n+6){--c:#2f744a;--r:-1.2deg;--x:-2px;--y:3px}
.cfrtlwLabel:nth-child(10n+7){--c:#315f92;--r:-2deg;--x:1px;--y:-1px}
.cfrtlwLabel:nth-child(10n+8){--c:#5d4c8f;--r:1.4deg;--x:-1px;--y:2px}
.cfrtlwLabel:nth-child(10n+9){--c:#a94d72;--r:-1.6deg;--x:1px;--y:2px}
.cfrtlwLabel:nth-child(10n){--c:#5f625f;--r:2deg;--x:-1px;--y:-2px}
.cfrtlwLabel:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;opacity:.68;background:radial-gradient(circle at 13% 18%,rgba(26,20,14,.22) 0 1px,transparent 1.8px),radial-gradient(circle at 77% 72%,rgba(255,246,220,.18) 0 1.2px,transparent 2px),radial-gradient(ellipse at 35% 86%,rgba(35,25,17,.18) 0 2px,transparent 4px),radial-gradient(ellipse at 92% 28%,rgba(255,255,255,.13) 0 1px,transparent 3px),repeating-linear-gradient(112deg,transparent 0 13px,rgba(30,20,12,.055) 14px 15px,transparent 16px 25px);background-size:31px 27px,37px 33px,63px 41px,51px 39px,auto;mix-blend-mode:multiply}
.cfrtlwLabel:before{content:"";position:absolute;z-index:4;top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:rgba(30,25,20,.75);box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.cfrtlwLabelIcon,.cfrtlwLabelText,.cfrtlwLabelArrow{position:relative;z-index:3}
.cfrtlwLabelIcon{flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:rgba(255,255,255,.11);font-size:13px}
.cfrtlwLabelText{min-width:0;flex:1}
.cfrtlwLabelName{display:block;font-size:13px;font-weight:800;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfrtlwLabelCount{display:block;margin-top:3px;font-size:9px;opacity:.8}
.cfrtlwLabelArrow{flex:none;display:grid;place-items:center;width:24px;height:24px;border:1px solid currentColor;border-radius:50%;font-size:10px;opacity:.88}
.cfrtlwLabel:hover{transform:rotate(0deg) translateY(-3px) scale(1.015);z-index:8;filter:brightness(1.05)}
.cfrtlwError{grid-column:1/-1;padding:15px;text-align:center;border:1px dashed rgba(255,255,255,.14);border-radius:7px;color:#bdb3a3;font-size:11px}
.cfrtlwSkeleton{height:54px;border-radius:7px;background:linear-gradient(90deg,#292622,#37332d,#292622);background-size:200% 100%;animation:cfrtlwLoad 1.2s linear infinite}
@keyframes cfrtlwScan{to{top:125%}
}
@keyframes cfrtlwSpin{to{transform:rotate(360deg)}
}
@keyframes cfrtlwLoad{to{background-position:-200% 0}
}
@media(max-width:280px){.cfrtlwLabelGrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.cfrtlwScreen:after,.cfrtlwArchiveLoading i,.cfrtlwSkeleton{animation:none}
.cfrtlwSlide,.cfrtlwLabel{transition:none}
}
.cfrtlwLabel{min-height:58px;padding:9px 10px;gap:8px}
.cfrtlwLabelIcon{width:30px;height:30px;font-size:14px}
.cfrtlwLabelName{font-size:15px;line-height:1.08;font-weight:900;letter-spacing:.15px}
.cfrtlwLabelNumber{position:relative;z-index:3;flex:none;display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border:1px solid currentColor;border-radius:6px;background:rgba(0,0,0,.12);font-size:11px;font-weight:900;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.cfrtlwRoot{width:100%;max-width:none;margin:0;padding:10px;background:none;border:0;box-shadow:none}
.cfrtlwBox{margin:18px 0 16px}
.cfrtlwLabelGrid{padding:7px 0 10px}
.cfrtlwSlide{opacity:0;transform:translateX(16%) scale(.88) rotate(2.2deg);filter:blur(2px) brightness(.72);transition:opacity .42s ease,transform .7s cubic-bezier(.18,.89,.32,1.28),filter .48s ease;transform-origin:center center}
.cfrtlwSlide.cfrtlw-active{opacity:1;transform:translateX(0) scale(1) rotate(0);filter:blur(0) brightness(1);animation:cfrtlwSlideBounce .78s cubic-bezier(.17,.89,.32,1.35)}
.cfrtlwSlide.cfrtlw-leaving-left{opacity:0;transform:translateX(-22%) scale(1.08) rotate(-2deg);filter:blur(2px) brightness(.7)}
.cfrtlwSlide.cfrtlw-leaving-right{opacity:0;transform:translateX(22%) scale(1.08) rotate(2deg);filter:blur(2px) brightness(.7)}
.cfrtlwScreen{perspective:700px}
.cfrtlwScreen.cfrtlw-kick{animation:cfrtlwScreenKick .62s cubic-bezier(.2,.85,.25,1.18)}
@keyframes cfrtlwSlideBounce{0%{transform:translateX(14%) scale(.9) rotate(1.7deg)}
58%{transform:translateX(-2.2%) scale(1.035) rotate(-.45deg)}
78%{transform:translateX(1%) scale(.992) rotate(.18deg)}
100%{transform:translateX(0) scale(1) rotate(0)}
}
@keyframes cfrtlwScreenKick{0%,100%{transform:scale(1)}
38%{transform:scale(1.018)}
68%{transform:scale(.994)}
}
@media(prefers-reduced-motion:reduce){.cfrtlwSlide,.cfrtlwSlide.cfrtlw-active,.cfrtlwScreen.cfrtlw-kick{animation:none;transition:none}
}
.cfrtlwLabel{min-height:60px;height:auto;align-items:center}
.cfrtlwLabelText{min-width:0;flex:1;display:flex;align-items:center}
.cfrtlwLabelName{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:normal;font-size:15px;line-height:1.18;max-width:100%}
.cfrtlwLabelNumber{align-self:center}
.cfrtlwToolIcon.i1,.cfrtlwToolIcon.i2,.cfrtlwToolIcon.i3,.cfrtlwToolIcon.i4,.cfrtlwToolIcon.i5,.cfrtlwToolIcon.i6{display:none}
.cfrtlwCornerTool{display:block!important;top:8px;bottom:auto;font-size:22px;color:#c9a274;opacity:.9;z-index:10;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.cfrtlwCornerToolL{left:8px;right:auto;transform:rotate(-28deg)}
.cfrtlwCornerToolR{right:8px;left:auto;transform:rotate(25deg)}
.cfrtlwRoot{position:relative;padding-bottom:20px}
.cfrtlwRoot:after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:7px;border-top:1px solid #7b5a38;border-bottom:2px solid #35281d;background:repeating-linear-gradient( 90deg,#b78b55 0 9px,#5f4630 9px 12px,#d0a76d 12px 19px,#3e3024 19px 22px );box-shadow:0 2px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);opacity:.9;transform:skewX(-7deg);pointer-events:none}
.cfrtlwLabelGrid{scrollbar-color:#8a623f #30241b;scrollbar-width:thin}
.cfrtlwLabelGrid::-webkit-scrollbar{width:8px}
.cfrtlwLabelGrid::-webkit-scrollbar-track{background:#30241b;border-radius:8px;box-shadow:inset 0 0 3px rgba(0,0,0,.5)}
.cfrtlwLabelGrid::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#6f4b30,#a7784d,#765136);border:1px solid #4b3424;border-radius:8px;box-shadow:inset 1px 0 rgba(255,255,255,.12)}
.cfrtlwLabelGrid::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#795337,#b18459,#80583a)}
.cfrtlwRoot:after{left:10px;right:10px;bottom:5px;height:7px;border:0;border-radius:2px;background:#795436;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(53,36,24,.45),0 2px 2px rgba(0,0,0,.25);opacity:1;transform:none}
.cfrtlwRoot{background:transparent;position:relative;isolation:isolate}
</style>
<div class="cfrtlwRoot">
<div class="cfrtlwBox">
<span class="cfrtlwHandle"></span>
<span class="cfrtlwArchiveTag">OLDER ARTICLES<br>RANDOM 10</span>
<i class="fa-solid fa-wrench cfrtlwToolIcon cfrtlwCornerTool cfrtlwCornerToolL"></i>
<i class="fa-solid fa-hammer cfrtlwToolIcon cfrtlwCornerTool cfrtlwCornerToolR"></i>
<div class="cfrtlwScreen">
<div class="cfrtlwArchiveLoading">
<i class="fa-solid fa-compact-disc"></i>
<span>Loading old archive…</span>
</div>
<button class="cfrtlwNav cfrtlwNavPrev" type="button" aria-label="Previous article">
<i class="fa-solid fa-chevron-left"></i>
</button>
<button class="cfrtlwNav cfrtlwNavNext" type="button" aria-label="Next article">
<i class="fa-solid fa-chevron-right"></i>
</button>
</div>
</div>
<div class="cfrtlwLabelGrid">
<div class="cfrtlwSkeleton"></div><div class="cfrtlwSkeleton"></div>
<div class="cfrtlwSkeleton"></div><div class="cfrtlwSkeleton"></div>
</div>
</div>
<script>
(function(){
const script=document.currentScript;
const root=script&&script.previousElementSibling;
if(!root||!root.classList.contains(x27;cfrtlwRootx27;))return;
const BLOG=x27;https://www.codeflare.netx27;;
const screen=root.querySelector(x27;.cfrtlwScreenx27;);
const prev=root.querySelector(x27;.cfrtlwNavPrevx27;);
const next=root.querySelector(x27;.cfrtlwNavNextx27;);
const labelGrid=root.querySelector(x27;.cfrtlwLabelGridx27;);
function jsonp(url){
return new Promise((resolve,reject)=>{
const cb=x27;cfrtlwJsonp_x27;+Date.now()+x27;_x27;+Math.random().toString(36).slice(2,10);
const s=document.createElement(x27;scriptx27;);
const timer=setTimeout(()=>{clean();reject(new Error(x27;timeoutx27;))},12000);
function clean(){clearTimeout(timer);delete window[cb];s.remove()}
window[cb]=d=>{clean();resolve(d)};
s.onerror=()=>{clean();reject(new Error(x27;feedx27;))};
s.src=url+(url.includes(x27;?x27;)?x27;&x27;:x27;?x27;)+x27;alt=json-in-script&callback=x27;+cb;
(document.head||document.body||document.documentElement).appendChild(s);
});
}
function thumb(e){
let u=e.media$thumbnail?.url||x27;x27;;
if(u) return u.replace(/\/s72-c(?=\/|$)/,x27;/s256x27;).replace(/\/w72-h72-p-k-no-nu(?=\/|$)/,x27;/s256x27;);
const h=e.content?.$t||e.summary?.$t||x27;x27;;
const m=h.match(/<img[^>]+src=["x27;]([^"x27;]+)["x27;]/i);
if(!m)return x27;x27;;
return m[1]
.replace(/\/s\d+(?:-c)?(?=\/|$)/,x27;/s256x27;)
.replace(/\/w\d+-h\d+[^/]*(?=\/|$)/,x27;/s256x27;);
}
function href(e){return (e.link||[]).find(x=>x.rel===x27;alternatex27;)?.href||x27;#x27;}
function formatDate(e){
const raw=e.published?.$t||e.updated?.$t||x27;x27;;
if(!raw)return x27;x27;;
try{return new Intl.DateTimeFormat(x27;id-IDx27;,{day:x27;2-digitx27;,month:x27;shortx27;,year:x27;numericx27;}).format(new Date(raw))}
catch(_){return raw.slice(0,10)}
}
function shuffle(a){
for(let i=a.length-1;i>0;i--){
const j=Math.floor(Math.random()*(i+1));
[a[i],a[j]]=[a[j],a[i]];
}
return a;
}
async function loadArchive(){
try{
const meta=await jsonp(BLOG+x27;/feeds/posts/default?max-results=1x27;);
const total=Number(meta.feed?.openSearch$totalResults?.$t||0);
if(!total)throw new Error(x27;emptyx27;);
const poolSize=Math.min(80,total);
const start=Math.max(1,total-poolSize+1);
const data=await jsonp(BLOG+x27;/feeds/posts/default?start-index=x27;+start+x27;&max-results=x27;+poolSize);
const chosen=shuffle((data.feed?.entry||[]).slice()).slice(0,10);
if(!chosen.length)throw new Error(x27;emptyx27;);
screen.querySelector(x27;.cfrtlwArchiveLoadingx27;)?.remove();
let current=0,timer=null;
const slides=[];
chosen.forEach((e,i)=>{
const a=document.createElement(x27;ax27;);
a.className=x27;cfrtlwSlidex27;+(i===0?x27; cfrtlw-activex27;:x27;x27;);
a.href=href(e);
a.innerHTML=
x27;<img alt="">x27;+
x27;<span class="cfrtlwSlideShade"></span>x27;+
x27;<span class="cfrtlwSlideInfo">x27;+
x27;<strong class="cfrtlwSlideTitle"></strong>x27;+
x27;<span class="cfrtlwSlideDate"><i class="fa-solid fa-calendar-days"></i><span></span></span>x27;+
x27;</span>x27;;
const im=a.querySelector(x27;imgx27;),u=thumb(e);
if(u)im.src=u;
else{
im.remove();
a.style.background=x27;linear-gradient(135deg,#403426,#17130f)x27;;
}
a.querySelector(x27;.cfrtlwSlideTitlex27;).textContent=e.title?.$t||x27;Untitledx27;;
a.querySelector(x27;.cfrtlwSlideDate spanx27;).textContent=formatDate(e);
screen.insertBefore(a,prev);
slides.push(a);
});
function go(n,restart){
const old=current;
const nextIndex=(n+slides.length)%slides.length;
if(nextIndex===old)return;
const dir=(nextIndex>old || (old===slides.length-1 && nextIndex===0)) ? 1 : -1;
const leaving=slides[old];
leaving?.classList.remove(x27;cfrtlw-leaving-leftx27;,x27;cfrtlw-leaving-rightx27;);
leaving?.classList.add(dir>0?x27;cfrtlw-leaving-leftx27;:x27;cfrtlw-leaving-rightx27;);
leaving?.classList.remove(x27;cfrtlw-activex27;);
current=nextIndex;
const entering=slides[current];
entering?.classList.remove(x27;cfrtlw-leaving-leftx27;,x27;cfrtlw-leaving-rightx27;);
entering?.classList.add(x27;cfrtlw-activex27;);
screen.classList.remove(x27;cfrtlw-kickx27;);
void screen.offsetWidth;
screen.classList.add(x27;cfrtlw-kickx27;);
setTimeout(()=>{
leaving?.classList.remove(x27;cfrtlw-leaving-leftx27;,x27;cfrtlw-leaving-rightx27;);
},760);
if(restart)startTimer();
}
function startTimer(){
clearInterval(timer);
timer=setInterval(()=>go(current+1,false),4500);
}
prev.onclick=()=>go(current-1,true);
next.onclick=()=>go(current+1,true);
screen.addEventListener(x27;mouseenterx27;,()=>clearInterval(timer));
screen.addEventListener(x27;mouseleavex27;,startTimer);
startTimer();
}catch(err){
screen.querySelector(x27;.cfrtlwArchiveLoadingx27;).innerHTML=
x27;<i class="fa-solid fa-box-archive"></i><span>Old archive unavailable</span>x27;;
console.error(err);
}
}
const iconMap=[
[/tutorial|guide|how/i,x27;fa-book-openx27;],
[/blogger|blog/i,x27;fa-blogx27;],
[/template|theme/i,x27;fa-window-maximizex27;],
[/seo|search/i,x27;fa-magnifying-glassx27;],
[/tool/i,x27;fa-wrenchx27;],
[/adsense|ads/i,x27;fa-coinsx27;],
[/javascript|js/i,x27;fa-codex27;],
[/css/i,x27;fa-css3-altx27;],
[/html/i,x27;fa-html5x27;],
[/\bai\b|artificial/i,x27;fa-brainx27;],
[/design|ui|ux/i,x27;fa-palettex27;],
[/security|safe/i,x27;fa-lockx27;],
[/news|berita/i,x27;fa-newspaperx27;]
];
function iconFor(label){
for(const [rx,icon] of iconMap)if(rx.test(label))return icon;
return x27;fa-tagx27;;
}
async function loadLabels(){
try{
const data=await jsonp(BLOG+x27;/feeds/posts/default?max-results=100x27;);
const entries=data.feed?.entry||[];
const counts=new Map();
entries.forEach(e=>{
(e.category||[]).forEach(c=>{
if(c.term)counts.set(c.term,(counts.get(c.term)||0)+1);
});
});
const labels=[...counts.entries()].sort((a,b)=>b[1]-a[1]);
labelGrid.innerHTML=x27;x27;;
labels.forEach(([label,count])=>{
const a=document.createElement(x27;ax27;);
a.className=x27;cfrtlwLabelx27;;
a.href=BLOG+x27;/search/label/x27;+encodeURIComponent(label);
a.innerHTML=
x27;<span class="cfrtlwLabelIcon"><i class="fa-solid x27;+iconFor(label)+x27;"></i></span>x27;+
x27;<span class="cfrtlwLabelText"><strong class="cfrtlwLabelName"></strong></span>x27;+
x27;<span class="cfrtlwLabelNumber"></span>x27;;
a.querySelector(x27;.cfrtlwLabelNamex27;).textContent=label;
a.querySelector(x27;.cfrtlwLabelNumberx27;).textContent=count;
labelGrid.appendChild(a);
});
if(!labels.length)labelGrid.innerHTML=x27;<div class="cfrtlwError">Label tidak ditemukan.</div>x27;;
}catch(err){
labelGrid.innerHTML=x27;<div class="cfrtlwError">Feed label CodeFlare tidak dapat dimuat.</div>x27;;
console.error(err);
}
}
loadArchive();
loadLabels();
})();
</script>
Cara Memasang di Blogger
- 1Buka Tata Letak BloggerMasuk ke Dashboard Blogger kemudian pilih menu Tata Letak.
- 2Tambahkan GadgetPilih area widget lalu tambahkan gadget HTML/JavaScript.
- 3Tempel Kode WidgetSalin seluruh source widget dari kotak kode dan tempel tanpa memotong CSS atau JavaScript.
- 4Periksa Font Awesome 7Pastikan FA7 aktif agar ikon perkakas, label, kalender, dan navigasi dapat tampil.
- 5Simpan dan UjiBuka halaman blog lalu cek slideshow, label, scrollbar, serta tombol Prev dan Next.
Kenapa Kodenya Aman Dipasang Lebih dari Satu Kali?
Versi ini tidak menggunakan document.getElementById() untuk mengambil elemen utama widget. Script mengambil root widget berdasarkan script instance yang sedang berjalan, lalu seluruh tombol dan elemen dicari hanya di dalam root tersebut.
Callback JSONP juga dibuat unik untuk setiap request. Karena itu dua widget yang dimuat bersamaan tidak memakai nama callback, timer, atau event yang sama.
Kalau ingin memahami struktur URL feed dan parameter yang digunakan Blogger, baca juga Cara Mendapatkan URL RSS Feed Blogger dan Menggunakan Parameternya.
Kenapa Gambar Slideshow Menggunakan s256?
Untuk widget dengan lebar relatif kecil, thumbnail s256 sudah cukup untuk menampilkan preview artikel dengan baik. Mengambil gambar s640 atau ukuran lebih besar pada komponen sekecil ini hanya menambah data yang harus diunduh tanpa memberikan peningkatan visual yang sebanding.
Jika widget dipasang pada area yang jauh lebih lebar, ukuran gambar dapat ditingkatkan. Namun untuk sidebar, widget artikel, atau panel dengan lebar sekitar 350 piksel, s256 menjadi pilihan yang lebih efisien.
Widget Mengikuti Dark Mode dan Light Mode Template
Background utama widget dibuat transparan sehingga tidak memaksakan warna terang atau gelap sendiri. Dengan cara ini warna dasar mengikuti template Blogger. Widget hanya memberikan masking horizontal tipis agar nuansa retro tetap terlihat tanpa mengganggu sistem dark, light, atau auto mode pada template.
Jika Ikon Tidak Muncul
Periksa terlebih dahulu apakah Font Awesome 7 benar-benar dimuat oleh template. Jika template masih menggunakan Font Awesome versi lama, nama ikon tertentu dapat berbeda atau belum tersedia.
Hindari memasang beberapa versi Font Awesome sekaligus. Lebih baik gunakan satu sumber Font Awesome 7 untuk seluruh template, lalu gunakan class ikon yang konsisten pada semua widget.
Jika Slideshow atau Label Tidak Muncul
Widget mengambil data melalui feed publik Blogger. Karena itu pastikan feed blog tidak dinonaktifkan. Pada blog dengan konfigurasi feed yang sangat dibatasi, data artikel atau label dapat gagal dimuat.
Jumlah pada label dihitung dari data post yang dibaca oleh widget. Jika Anda mengubah jumlah post yang diambil oleh script, angka label akan mengikuti kumpulan data tersebut dan tidak selalu mewakili seluruh arsip blog.
Kapan Widget Ini Cocok Digunakan?
Widget ini cocok untuk blog tutorial, teknologi, coding, arsip software, desain, atau blog lama yang memiliki banyak kategori dan konten evergreen. Slideshow artikel lama membantu memberikan jalur navigasi tambahan menuju konten yang tidak lagi muncul di halaman utama.
Desain retro juga dapat menjadi pembeda visual dibanding widget label standar Blogger, tetapi fungsi navigasi tetap menjadi prioritas: label harus terbaca, jumlah artikel terlihat, dan semua elemen tetap nyaman digunakan pada layar kecil.
Untuk gaya retro lain yang juga memakai feed Blogger, lihat Widget Retro Digital Feed Blogger dengan Model Scanline Futuristik. Koleksi widget lainnya juga tersedia di Kumpulan Widget Blogger Keren, Responsive dan Native JavaScript.
Catatan: sebelum memasang kode pada template produksi, lakukan backup template Blogger terlebih dahulu. Jika widget digunakan pada template selain CodeFlare, periksa kembali apakah ada selector lokal yang ingin disesuaikan dengan lebar sidebar atau tipografi situs.
Dengan kombinasi arsip lama, thumbnail ringan, label yang mudah dibaca, dan struktur multi-instance, widget ini tidak hanya berfungsi sebagai dekorasi. Ia dapat menjadi navigasi alternatif untuk membantu pengunjung menemukan kembali artikel lama sekaligus mempertahankan karakter visual blog.
About CodeFlare
No comments
💬 Share Your Thoughts & Join the Hall of Fame!
Punya pendapat atau tips tentang artikel ini? Tuliskan komentar kamu sekarang! 🚀
💎 Komentar yang bermanfaat, relevan, dan positif berkesempatan tampil di CodeFlare Hall of Fame dan masuk ke Top Commentators Widget.
👉 Comment now. Share your ideas. Get noticed on codeflare.net