Widget Artikel Blogger Futuristik dengan Feed Label Otomatis

---

Widget artikel berdasarkan label menjadi salah satu cara yang cukup praktis untuk menampilkan kembali konten lama maupun terbaru di Blogger. Dibandingkan daftar artikel biasa, widget dapat dibuat jauh lebih dinamis dengan memanfaatkan feed Blogger kemudian mengolah datanya menjadi sebuah panel artikel interaktif.

Pada pengembangan kali ini saya mencoba membuat widget dengan konsep futuristic space dashboard. Artikel pertama ditempatkan sebagai data utama dengan gambar berukuran besar, sedangkan artikel berikutnya tampil lebih ringkas. Seluruh konten kemudian bergerak secara otomatis sehingga widget terasa seperti sebuah panel yang terus menerima transmisi data.

Yang menarik, pengguna tidak harus menuliskan alamat blog secara manual. Script akan mencoba mengenali blog tempat widget dipasang, mencari label yang sudah ditentukan, kemudian memilih sumber lain secara otomatis apabila label tersebut tidak ditemukan.

Informasi Singkat

---

Auto FeedMembaca artikel dari feed Blogger.

Auto LabelMencari label utama dan alternatif.

Random ContentMengacak artikel agar widget terasa dinamis.

ResponsiveTypography mengikuti lebar container.

GeneratorPengaturan dasar dapat dibuat tanpa mengedit script utama.

FallbackCodeFlare menjadi sumber cadangan jika feed lokal gagal.

---

Sumber data : Feed Blogger

Widget Artikel Label Blogger

Konsep dasarnya sederhana. Blogger menyediakan feed artikel yang dapat dibaca kembali melalui JavaScript. Data tersebut kemudian dapat digunakan untuk memperoleh judul artikel, URL, thumbnail, author, waktu publikasi, ringkasan dan jumlah komentar apabila tersedia.

Karena data feed dapat diolah sendiri, tampilannya tidak harus berbentuk daftar teks sederhana. Feed yang sama dapat diubah menjadi slider, featured post, carousel, recent post maupun dashboard artikel seperti widget pada tutorial ini.

ARTICLE DATA STREAM

Blog

Label

Feed

Widget

Cara Widget Menentukan Sumber Artikel

Supaya kode yang sama dapat digunakan pada blog berbeda, sumber feed ditentukan secara bertahap. Pengguna tidak perlu mengganti alamat domain setiap kali widget dipasang pada website lain.

01

Deteksi Blog Pengguna

Script membaca domain halaman tempat widget sedang dijalankan.

02

Mencari Label Widget

Label Widget menjadi sumber prioritas secara default.

03

Random Label

Jika Widget tidak tersedia, salah satu label yang dimiliki blog dipilih secara acak.

04

Fallback CodeFlare

Jika feed lokal gagal, widget menggunakan CodeFlare dengan label Widget.

Sistem fallback dibuat supaya widget tetap dapat menampilkan konten ketika dipasang pada blog baru yang belum memiliki label sesuai konfigurasi.

Kenapa Mengambil 6 Artikel?

Walaupun hanya lima artikel yang terlihat, widget mengambil enam artikel sekaligus. Artikel keenam disimpan sebagai buffer tersembunyi untuk membantu menjaga tinggi widget tetap stabil selama pergantian data.

01FeaturedArtikel utama

02ProbeArtikel ringkas

03ProbeArtikel ringkas

04ProbeArtikel ringkas

05ProbeArtikel ringkas

06BufferHidden data

Dengan cara ini slot artikel tidak perlu dihapus seluruhnya ketika data berubah. Isi card dapat diganti sementara tinggi bagian list tetap terjaga.

Animasi Transmisi Artikel

Animasi tidak dijalankan secara bersamaan. Artikel ringkas menyelesaikan transisinya terlebih dahulu, kemudian teks featured menghilang ke bawah, metadata berubah, gambar lama menghilang dan gambar baru muncul dengan efek membesar serta sedikit bounce.

LIST

TEXT OUT

IMAGE OUT

NEW DATA

Live Preview Widget

Preview berikut mengambil feed dari CodeFlare dengan label Widget. Area preview sengaja dibatasi sekitar 350px supaya mendekati ukuran sidebar Blogger yang umum digunakan.

LIVE DATA PREVIEW

CODEFLARE

TRANSMISION

WIDGET

LOADING DATA...

Powered By CodeFlare

INFO

---

Live preview menggunakan sumber CodeFlare agar tampil konsisten di artikel. Widget yang dipasang pada blog pengguna akan mencoba menggunakan feed blog tersebut terlebih dahulu.

Generator Widget Artikel Blogger

Untuk mempermudah modifikasi dasar saya menambahkan generator konfigurasi. Pengguna dapat mengganti label prioritas, sumber fallback, waktu rotasi, kecepatan scanner dan autoplay tanpa mencari variabel tersebut di JavaScript utama.

CODEFLARE LABARTICLE STREAM GENERATOR

Label Prioritas Label yang dicari terlebih dahulu.

Label Fallback Digunakan pada sumber cadangan.

Fallback Blog Default menggunakan CodeFlare.

Interval Artikel 6 Detik 7 Detik 8.2 Detik 10 Detik 12 Detik

Scanner Cepat Normal Lambat

Autoplay

Rotasi otomatis

GENERATED CONFIG

Letakkan konfigurasi hasil generator sebelum source widget. Pengaturan yang tidak diberikan akan menggunakan nilai default.

Contoh Konfigurasi

<script> window.CFSpaceWidgetConfig={ preferredLabel:'Widget', fallbackBlog:'https://www.codeflare.net', fallbackLabel:'Widget', interval:8200, scanSpeed:3800, autoplay:true }; </script>

Cara Memasang Widget

01

Buka Blogger

Masuk ke dashboard blog yang ingin digunakan.

02

Pilih Tata Letak

Tentukan sidebar atau section tempat widget ditampilkan.

03

Tambah HTML/JavaScript

Tambahkan gadget HTML/JavaScript.

04

Masukkan Config

Jika menggunakan generator, paste kode konfigurasi terlebih dahulu.

05

Masukkan Source Widget

Paste kode widget di bawah konfigurasi lalu simpan.

Source Widget Lengkap

Kode berikut adalah versi produksi widget. Script sudah membaca konfigurasi dari generator, mendeteksi alamat blog, mencoba label prioritas, mencari random label apabila diperlukan dan menggunakan CodeFlare sebagai fallback terakhir.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet"/> <div class="cfSpaceWidget" id="cfSpaceWidget"> <div class="cfSWHead"> <div class="cfSWIdentity"> <span class="cfSWLogo"><img alt="Blog favicon" class="cfSWFavicon" src=""/></span> <div class="cfSWHeadText"><div class="cfSWTitle">LOADING...</div></div> </div> <div class="cfSWControls"> <button class="cfSWBtn cfSWPrev" type="button"><i class="fa fa-angle-up"></i></button> <button class="cfSWBtn cfSWNext" type="button"><i class="fa fa-angle-down"></i></button> </div> </div> <div class="cfSWSystem"> <span class="cfSWStream"><i class="fa fa-folder-open-o"></i><b class="cfSWLabelName">WIDGET</b></span> <span class="cfSWOnline cfSWTransmissionSlow"><i></i><span>TRANSMISION</span></span> </div> <div class="cfSWViewport"> <div class="cfSWScannerLayer"><span class="cfSWScanner"></span></div> <div class="cfSWContent"> <div class="cfSWLoading"><i class="fa fa-circle-o-notch fa-spin"></i><span>LOADING ARTICLE DATA...</span></div> </div> </div> <div class="cfSWFooter"> <div class="cfSWPowered">Powered By <a href="https://www.codeflare.net/" target="_blank" rel="noopener"><span class="cfSWCode">Code</span><span class="cfSWFlare">Flare</span></a></div> </div> </div> <script> //<![CDATA[ (function(){ 'use strict'; var root=document.getElementById('cfSpaceWidget'); if(!root)return; var U=window.CFSpaceWidgetConfig||{}; var CFG={ preferredLabel:U.preferredLabel||'Widget', fallbackBlog:U.fallbackBlog||'https://www.codeflare.net', fallbackLabel:U.fallbackLabel||'Widget', fetch:6, interval:Number(U.interval)||8200, scanSpeed:Number(U.scanSpeed)||3800, autoplay:typeof U.autoplay==='boolean'?U.autoplay:true, compactHeight:300, secondCollapseTime:480, listSwapTime:440, textOutTime:540, imageOutTime:480, imageInTime:820 }; root.style.setProperty('--cfSWScanSpeed',CFG.scanSpeed+'ms'); var content=root.querySelector('.cfSWContent'), prevBtn=root.querySelector('.cfSWPrev'), nextBtn=root.querySelector('.cfSWNext'), titleEl=root.querySelector('.cfSWTitle'), labelEl=root.querySelector('.cfSWLabelName'), faviconEl=root.querySelector('.cfSWFavicon'), transmissionEl=root.querySelector('.cfSWOnline'), posts=[],timer=null,busy=false,jp=0; function norm(v){return v?String(v).replace(/\/+$/,''):''} function blog(){try{var h=location.hostname;if(h&&h!=='localhost'&&h!=='127.0.0.1')return location.protocol+'//'+h}catch(e){}return CFG.fallbackBlog} function esc(s){var d=document.createElement('div');d.textContent=s||'';return d.innerHTML} function shuffle(a){a=a.slice();for(var i=a.length-1;i>0;i--){var j=Math.floor(Math.random()*(i+1)),t=a[i];a[i]=a[j];a[j]=t}return a} function random(a){return a&&a.length?a[Math.floor(Math.random()*a.length)]:null} function jsonp(url,ok,fail){ jp++; var cb='cfSWJP_'+Date.now()+'_'+jp,s=document.createElement('script'),done=false,to; function clear(){ clearTimeout(to); if(s.parentNode)s.parentNode.removeChild(s); try{delete window[cb]}catch(e){window[cb]=undefined} } window[cb]=function(data){if(done)return;done=true;clear();ok&&ok(data)}; s.onerror=function(){if(done)return;done=true;clear();fail&&fail()}; to=setTimeout(function(){if(done)return;done=true;clear();fail&&fail()},7000); s.src=url+(url.indexOf('?')===-1?'?':'&')+'callback='+cb; document.body.appendChild(s); } function link(e){ var l=e.link||[]; for(var i=0;i<l.length;i++)if(l[i].rel==='alternate')return l[i].href; return '#'; } function image(e){ if(e.media$thumbnail&&e.media$thumbnail.url)return e.media$thumbnail.url.replace(/\/s72-c\//,'/s800/').replace(/=s72-c/,'=s800'); var h=e.content&&e.content.$t?e.content.$t:(e.summary&&e.summary.$t?e.summary.$t:''); var m=h.match(/<img[^>]+src=["']([^"']+)["']/i); return m&&m[1]?m[1]:''; } function author(e){try{return e.author[0].name.$t}catch(x){return 'Blogger'}} function comments(e){try{return parseInt(e.thr$total.$t,10)||0}catch(x){return 0}} function time(e){ if(!e.published||!e.published.$t)return '-- : --'; var d=new Date(e.published.$t); return String(d.getHours()).padStart(2,'0')+' : '+String(d.getMinutes()).padStart(2,'0'); } function summary(e,max){ var h=e.summary&&e.summary.$t?e.summary.$t:(e.content&&e.content.$t?e.content.$t:''); var d=document.createElement('div');d.innerHTML=h; var t=(d.textContent||'').replace(/\s+/g,' ').trim(); if(t.length>max)t=t.substring(0,max).replace(/\s+\S*$/,'')+'...'; return t; } function featured(e){ var t=e.title?e.title.$t:'Untitled',u=link(e),im=image(e),a=author(e),tm=time(e),c=comments(e),s=summary(e,165); return '<article class="cfSWFeatured"><div class="cfSWFeaturedVisual"><a class="cfSWFeaturedImage" href="'+u+'"><img src="'+im+'" alt="'+esc(t)+'" loading="lazy"/><span class="cfSWImageMask"></span><span class="cfSWImageShade"></span><span class="cfSWImageTitle">'+esc(t)+'</span></a></div><div class="cfSWFeaturedBody"><div class="cfSWMeta"><span class="cfSWMetaItem"><i class="fa fa-clock-o"></i><b class="cfSWMetaText">'+esc(tm)+'</b></span><span class="cfSWMetaItem"><i class="fa fa-user-circle-o"></i><b class="cfSWMetaText">'+esc(a)+'</b></span><span class="cfSWMetaItem"><i class="fa fa-comments-o"></i><b class="cfSWMetaText">'+c+'</b></span></div>'+(s?'<p class="cfSWFeaturedSummary">'+esc(s)+'</p>':'')+'<a class="cfSWRead" href="'+u+'"><span>READ DATA</span><i class="fa fa-long-arrow-right"></i></a></div></article>'; } function inner(e){ var t=e.title?e.title.$t:'Untitled',u=link(e),im=image(e),c=comments(e); return '<div class="cfSWItemInner"><a class="cfSWThumb" href="'+u+'"><img src="'+im+'" alt="'+esc(t)+'" loading="lazy"/></a><div class="cfSWItemBody"><h4 class="cfSWItemTitle"><a href="'+u+'">'+esc(t)+'</a></h4><div class="cfSWItemBottom"><a class="cfSWItemProbe" href="'+u+'"><i class="fa fa-crosshairs"></i><span>PROBE</span></a><span class="cfSWItemComments"><i class="fa fa-comments-o"></i><b>'+c+'</b></span></div></div></div>'; } function item(e,i){return '<article class="cfSWItem cfSWItem'+(i+1)+'">'+inner(e)+'</article>'} function compact(){ var r=root.getBoundingClientRect(); root.classList.toggle('cfSWCompact',r.height>0&&r.height<=CFG.compactHeight); } function slow(){transmissionEl.classList.remove('cfSWTransmissionFast');transmissionEl.classList.add('cfSWTransmissionSlow')} function fast(){transmissionEl.classList.remove('cfSWTransmissionSlow');transmissionEl.classList.add('cfSWTransmissionFast')} function render(mode){ if(!posts.length)return; var h=featured(posts[0]); for(var i=1;i<Math.min(5,posts.length);i++)h+=item(posts[i],i); content.innerHTML='<div class="cfSWStage '+(mode==='next'?'cfSWNewStage':'cfSWFirstStage')+'">'+h+'</div>'; requestAnimationFrame(compact); } function swap(stage){ var a=stage.querySelector('.cfSWItem2'),b=stage.querySelector('.cfSWItem3'),c=stage.querySelector('.cfSWItem4'),d=stage.querySelector('.cfSWItem5'); if(!a||!b||!c||!d)return; a.innerHTML=inner(posts[2]);b.innerHTML=inner(posts[3]);c.innerHTML=inner(posts[4]);d.innerHTML=inner(posts[5]||posts[0]); a.classList.remove('cfSWSecondCollapse');a.classList.add('cfSWSecondReveal');d.classList.add('cfSWLastReveal'); setTimeout(function(){a.classList.remove('cfSWSecondReveal');d.classList.remove('cfSWLastReveal')},CFG.listSwapTime+80); } function next(){ if(busy||posts.length<2)return; busy=true; var stage=content.querySelector('.cfSWStage'); if(!stage){busy=false;return} var second=stage.querySelector('.cfSWItem2'); if(second)second.classList.add('cfSWSecondCollapse'); setTimeout(function(){ swap(stage); setTimeout(function(){ fast();stage.classList.add('cfSWTextLeaving'); setTimeout(function(){ stage.classList.add('cfSWImageLeaving'); setTimeout(function(){ slow();posts.push(posts.shift());render('next'); setTimeout(function(){busy=false},CFG.imageInTime+600); },CFG.imageOutTime); },CFG.textOutTime); },CFG.listSwapTime); },CFG.secondCollapseTime); } function prev(){ if(busy||posts.length<2)return; busy=true;fast(); var stage=content.querySelector('.cfSWStage'); if(stage)stage.classList.add('cfSWTextLeaving'); setTimeout(function(){ if(stage)stage.classList.add('cfSWImageLeaving'); setTimeout(function(){ slow();posts.unshift(posts.pop());render('next'); setTimeout(function(){busy=false},1200); },CFG.imageOutTime); },CFG.textOutTime); } function stop(){if(timer){clearTimeout(timer);timer=null}} function start(){ stop(); if(!CFG.autoplay||posts.length<2)return; timer=setTimeout(function(){ next(); setTimeout(start,CFG.secondCollapseTime+CFG.listSwapTime+CFG.textOutTime+CFG.imageOutTime+CFG.imageInTime+900); },CFG.interval); } function ui(feed,b,l){ titleEl.textContent=feed&&feed.title&&feed.title.$t?feed.title.$t:'BLOG'; labelEl.textContent=String(l||CFG.preferredLabel).toUpperCase(); faviconEl.src=norm(b)+'/favicon.ico'; } function use(json,b,l,fb){ var f=json&&json.feed?json.feed:{},e=f.entry||[]; if(!e.length){fb?error():fallback();return} posts=shuffle(e.slice(0,CFG.fetch));ui(f,b,l);render('first');slow();start(); } function labelFeed(b,l,ok,fail){ b=norm(b); jsonp(b+'/feeds/posts/default/-/'+encodeURIComponent(l)+'?alt=json-in-script&max-results='+CFG.fetch,function(j){ var e=j&&j.feed&&j.feed.entry?j.feed.entry:[]; e.length?ok(j):fail(); },fail); } function labels(b,ok,fail){ jsonp(norm(b)+'/feeds/posts/default?alt=json-in-script&max-results=1',function(j){ var c=j&&j.feed&&j.feed.category?j.feed.category:[],a=[]; for(var i=0;i<c.length;i++)if(c[i]&&c[i].term)a.push(c[i].term); a=a.filter(function(v,i,x){return x.indexOf(v)===i}); a.length?ok(a):fail(); },fail); } function tryOthers(b,a,failed){ var r=shuffle(a.filter(function(x){return x!==failed})); (function run(){ if(!r.length){fallback();return} var l=r.shift(); labelFeed(b,l,function(j){use(j,b,l,false)},run); })(); } function randomLabel(b){ labels(b,function(a){ a=a.filter(function(l){return String(l).toLowerCase()!==String(CFG.preferredLabel).toLowerCase()}); if(!a.length){fallback();return} var l=random(a); labelFeed(b,l,function(j){use(j,b,l,false)},function(){tryOthers(b,a,l)}); },fallback); } function fallback(){ labelFeed(CFG.fallbackBlog,CFG.fallbackLabel,function(j){use(j,CFG.fallbackBlog,CFG.fallbackLabel,true)},error); } function error(){ slow(); content.innerHTML='<div class="cfSWEmpty"><i class="fa fa-exclamation-triangle"></i><span>FEED CONNECTION FAILED</span></div>'; } function discover(){ var b=norm(blog()); labelFeed(b,CFG.preferredLabel,function(j){use(j,b,CFG.preferredLabel,false)},function(){randomLabel(b)}); } nextBtn.addEventListener('click',function(){stop();next();setTimeout(start,2000)}); prevBtn.addEventListener('click',function(){stop();prev();setTimeout(start,2000)}); root.addEventListener('mouseenter',stop); root.addEventListener('mouseleave',start); document.addEventListener('visibilitychange',function(){document.hidden?stop():start()}); if(typeof ResizeObserver!=='undefined')new ResizeObserver(compact).observe(root); else window.addEventListener('resize',compact); discover(); })(); //]]> </script> <style> .cfSpaceWidget{--cfSWScanSpeed:3800ms;width:100%;max-width:100%;position:relative;overflow:hidden;box-sizing:border-box;padding:14px;background:#101820;color:#dce8ef;border:1px solid #243845;border-radius:14px;font-family:'Rajdhani',Arial,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.16);isolation:isolate;container-type:inline-size} .cfSpaceWidget *,.cfSpaceWidget *:before,.cfSpaceWidget *:after{box-sizing:border-box} .cfSWHead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:11px} .cfSWIdentity{min-width:0;display:flex;align-items:center;gap:10px} .cfSWLogo{width:38px;height:38px;flex:0 0 38px;padding:7px;display:flex;align-items:center;justify-content:center;background:#132a38;border:1px solid rgba(56,189,248,.38);border-radius:9px} .cfSWFavicon{width:100%;height:100%;object-fit:contain} .cfSWTitle{max-width:230px;overflow:hidden;color:#f3f9fc;font-family:'Orbitron',sans-serif;font-size:clamp(10px,2.35cqw,15px);font-weight:700;letter-spacing:.08em;text-overflow:ellipsis;white-space:nowrap} .cfSWControls{display:flex;gap:5px} .cfSWBtn{width:32px;height:32px;padding:0;background:#14232d;color:#38bdf8;border:1px solid #29404e;border-radius:7px;cursor:pointer} .cfSWSystem{min-height:29px;margin-bottom:10px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;color:#76909f;border-top:1px solid #263b48;border-bottom:1px solid #263b48;font-family:'Orbitron',sans-serif;font-size:clamp(7px,1.65cqw,10px);letter-spacing:.1em} .cfSWStream,.cfSWOnline{display:flex;align-items:center;gap:6px} .cfSWOnline{margin-left:auto}.cfSWOnline>i{width:6px;height:6px;background:#2bd68f;border-radius:50%} .cfSWTransmissionSlow{animation:cfSWTransmissionSlow 2.1s ease-in-out infinite} .cfSWTransmissionFast{animation:cfSWTransmissionFast .16s steps(1,end) infinite} .cfSWViewport{position:relative;overflow:hidden} .cfSWScannerLayer{position:absolute;z-index:50;top:0;left:0;width:100%;aspect-ratio:16/8.6;overflow:hidden;pointer-events:none} .cfSWScanner{position:absolute;left:0;top:-20%;width:100%;height:20%;background:linear-gradient(to bottom,transparent,rgba(56,189,248,.025),rgba(172,237,255,.88));animation:cfSWScanContinuous var(--cfSWScanSpeed) linear infinite} .cfSWFeatured{overflow:hidden;margin-bottom:9px;background:#13212a;border:1px solid #263b48;border-radius:11px} .cfSWFeaturedVisual{position:relative;overflow:hidden} .cfSWFeaturedImage{position:relative;display:block;aspect-ratio:16/8.6;overflow:hidden;background:#08131a} .cfSWFeaturedImage img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.72) contrast(1.1) brightness(.8);transition:.6s ease} .cfSWFeatured:hover img{filter:saturate(1) contrast(1.03) brightness(1);transform:scale(1.045)} .cfSWImageMask{position:absolute;inset:0;opacity:.3;background:repeating-linear-gradient(0deg,rgba(80,210,255,.018) 0 1px,transparent 1px 10px)} .cfSWImageShade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 25%,rgba(5,17,25,.9))} .cfSWImageTitle{position:absolute;z-index:10;left:clamp(12px,3cqw,20px);right:clamp(12px,3cqw,20px);bottom:clamp(12px,3cqw,18px);display:-webkit-box;overflow:hidden;color:#fff;font-size:clamp(16px,4.25cqw,25px);font-weight:700;line-height:1.24;-webkit-line-clamp:2;-webkit-box-orient:vertical} .cfSWFeaturedBody{padding:clamp(11px,3cqw,18px)} .cfSWMeta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px;color:#86a0af;font-size:clamp(11px,2.55cqw,15px)} .cfSWMetaItem{display:inline-flex;align-items:center;gap:5px}.cfSWMetaItem i{color:#38bdf8}.cfSWMetaText{color:#86a0af} .cfSWFeaturedSummary{margin:0 0 11px;color:#a9bec9;font-size:clamp(12px,2.85cqw,16px);line-height:1.5} .cfSWRead{display:inline-flex;align-items:center;gap:8px;color:#45c5fa;text-decoration:none;font-family:'Orbitron',sans-serif;font-size:clamp(7px,1.75cqw,10px)} .cfSWItem{height:clamp(92px,23cqw,110px);margin-bottom:7px;overflow:hidden;background:#111f28;border:1px solid #243844;border-radius:9px} .cfSWItemInner{width:100%;height:100%;display:grid;grid-template-columns:clamp(104px,29cqw,150px) minmax(0,1fr);gap:clamp(8px,2.4cqw,13px);padding:clamp(6px,1.7cqw,9px);transform-origin:top} .cfSWThumb{overflow:hidden;border-radius:6px}.cfSWThumb img{width:100%;height:100%;display:block;object-fit:cover} .cfSWItemBody{min-width:0;display:flex;flex-direction:column;justify-content:space-between} .cfSWItemTitle{margin:0;font-size:clamp(13px,3.1cqw,18px);line-height:1.25}.cfSWItemTitle a{display:-webkit-box;color:#edf6fa;text-decoration:none;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical} .cfSWItemBottom{display:flex;align-items:center;justify-content:space-between} .cfSWItemProbe{color:#38bdf8;text-decoration:none;font-family:'Orbitron',sans-serif;font-size:clamp(7px,1.65cqw,10px)} .cfSWItemComments{display:inline-flex;align-items:center;gap:5px;color:#8fa8b5;font-size:clamp(10px,2.35cqw,14px)} .cfSWFooter{display:flex;justify-content:flex-end;margin-top:9px;padding-top:8px;border-top:1px solid #263b48}.cfSWPowered{color:#607884;font-size:clamp(8px,1.8cqw,11px)}.cfSWPowered a{text-decoration:none}.cfSWCode{color:#8da6b3}.cfSWFlare{color:#38bdf8} .cfSWLoading,.cfSWEmpty{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#8097a5;font-family:'Orbitron',sans-serif;font-size:8px} .cfSWSecondCollapse .cfSWItemInner{animation:cfSWCollapse .48s forwards}.cfSWSecondReveal .cfSWItemInner,.cfSWLastReveal .cfSWItemInner{animation:cfSWReveal .44s forwards} .cfSWTextLeaving .cfSWImageTitle{animation:cfSWTitleOut .46s forwards}.cfSWTextLeaving .cfSWFeaturedSummary{animation:cfSWSummaryOut .5s forwards}.cfSWTextLeaving .cfSWMetaText{animation:cfSWMetaOut .34s forwards} .cfSWImageLeaving .cfSWFeaturedVisual{animation:cfSWImageOut .48s forwards} .cfSWNewStage .cfSWFeaturedVisual,.cfSWFirstStage .cfSWFeaturedVisual{animation:cfSWImageIn .82s both} .cfSWNewStage .cfSWImageTitle,.cfSWFirstStage .cfSWImageTitle{opacity:0;animation:cfSWTextIn .48s .78s forwards} .cfSWNewStage .cfSWMetaText,.cfSWFirstStage .cfSWMetaText{opacity:0;animation:cfSWMetaIn .4s .74s forwards} .cfSWNewStage .cfSWFeaturedSummary,.cfSWFirstStage .cfSWFeaturedSummary{opacity:0;animation:cfSWTextIn .48s .98s forwards} .cfSpaceWidget.cfSWCompact .cfSWItem{display:none!important} @keyframes cfSWScanContinuous{0%{top:-20%;opacity:0}6%{opacity:1}92%{opacity:1}100%{top:103%;opacity:0}} @keyframes cfSWCollapse{to{opacity:0;transform:scaleY(.02)}} @keyframes cfSWReveal{from{opacity:0;transform:scaleY(.02)}to{opacity:1;transform:scaleY(1)}} @keyframes cfSWTitleOut{to{opacity:0;transform:translateY(28px)}} @keyframes cfSWSummaryOut{to{opacity:0;transform:translateY(26px)}} @keyframes cfSWMetaOut{to{opacity:0}} @keyframes cfSWMetaIn{from{opacity:0}to{opacity:1}} @keyframes cfSWImageOut{to{opacity:0;transform:scale(.95);filter:blur(2px)}} @keyframes cfSWImageIn{0%{opacity:0;transform:scale(.62)}60%{opacity:1;transform:scale(1.05)}74%{transform:scale(.982)}87%{transform:scale(1.018)}100%{opacity:1;transform:scale(1)}} @keyframes cfSWTextIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes cfSWTransmissionSlow{0%,100%{opacity:.6}50%{opacity:1}} @keyframes cfSWTransmissionFast{0%,45%{opacity:1}46%,100%{opacity:.18}} </style>

WARNING

Jika source widget dipasang langsung melalui editor HTML template Blogger, sebaiknya backup template terlebih dahulu agar proses pemulihan lebih mudah apabila terjadi kesalahan penempatan kode.

Beberapa Pengaturan yang Bisa Diubah

WidgetLabel utama

82008.2 detik

3800Scanner normal

trueAutoplay aktif

Jika label utama tidak ditemukan, script tidak langsung berhenti. Daftar label dari blog pengguna diperiksa terlebih dahulu kemudian salah satu label yang memiliki artikel akan digunakan sebagai source.

Pendekatan seperti ini membuat satu source widget dapat dibagikan ke blog lain tanpa harus meminta pengguna mengganti domain secara manual. Pengaturan yang memang perlu disesuaikan tetap tersedia melalui generator.

CODEFLARE DEVELOPMENT

Butuh Widget Blogger dengan Fungsi Khusus?

Widget ini masih dapat dikembangkan menjadi trending post, multi-label slider, recommendation widget, dashboard produk atau sistem artikel yang disesuaikan dengan desain template yang digunakan.

Hubungi CodeFlare

Keyword

Widget Artikel Blogger, Widget Label Blogger, Feed Blogger, Random Post Blogger, Featured Post Blogger, Slider Artikel Blogger, Generator Widget Blogger, Responsive Blogger Widget, Widget Blogger Futuristik

Incoming Search Terms

cara membuat widget artikel blogger
widget artikel blogger berdasarkan label
widget feed blogger otomatis
widget random post blogger
widget artikel blogger responsive
widget slider artikel blogger
generator widget blogger
widget featured post blogger
widget label blogger otomatis