Widget Artikel Blogger Futuristik dengan Feed Label Otomatis

---

Widget artikel berdasarkan label cukup menarik digunakan untuk menampilkan kembali artikel lama maupun konten terbaru di Blogger. Feed yang biasanya terlihat seperti kumpulan data sebenarnya dapat diolah menjadi panel artikel interaktif yang dilengkapi thumbnail, judul, author, komentar, navigasi dan animasi.

Pada widget ini saya mencoba menggunakan konsep futuristic space dashboard. Artikel pertama dibuat lebih dominan sebagai featured article, sedangkan artikel berikutnya tampil lebih ringkas. Data bergerak secara otomatis dengan urutan animasi yang dibuat bergantian agar transisinya tetap halus dan tidak terasa berkedip.

Widget tidak mengharuskan pengguna menulis URL blog secara manual. Script mencoba mengenali blog tempat widget dipasang, mencari label prioritas, kemudian memilih sumber lain secara otomatis ketika label tersebut tidak tersedia.

Kalau ingin memahami struktur feed Blogger lebih jauh, saya sebelumnya juga pernah membahas kode URL RSS Feed di Blogger. Konsepnya masih berhubungan karena widget ini memanfaatkan data posting Blogger sebagai sumber informasi.

Informasi Singkat

---

Widget mengambil maksimal 6 artikel, menampilkan 5 artikel, mendukung deteksi label otomatis, random label fallback, responsive typography, continuous scanner dan rotasi artikel otomatis.

---

Platform : Blogger / Blogspot

Cara Kerja Widget Artikel Blogger

Ketika dijalankan, script terlebih dahulu mencoba mengenali domain blog tempat widget dipasang. Setelah itu label Widget dicari sebagai sumber utama. Jika label tersebut tidak ditemukan, script membaca label yang tersedia pada blog kemudian memilih salah satunya secara acak.

Apabila feed lokal benar-benar tidak dapat digunakan, sumber terakhir diarahkan ke CodeFlare dengan label Widget. Sistem ini membuat satu source widget dapat dipasang pada beberapa blog tanpa meminta pengguna mengganti alamat domain secara manual.

01

Deteksi BlogMembaca domain tempat widget sedang dijalankan.

02

Cari Label WidgetDigunakan sebagai label prioritas.

03

Random LabelDipilih ketika label prioritas tidak tersedia.

04

Fallback CodeFlareDigunakan ketika feed lokal gagal dimuat.

WARNING

Sistem fallback dibuat agar widget tetap mempunyai sumber artikel ketika dipasang pada blog baru yang belum memiliki label sesuai konfigurasi.

Kenapa Widget Mengambil 6 Artikel?

Pada layar hanya terlihat lima artikel, tetapi script sebenarnya mengambil enam artikel. Artikel keenam digunakan sebagai buffer sehingga proses rotasi tidak membuat tinggi widget berubah secara tiba-tiba ketika salah satu artikel keluar dan data berikutnya masuk.

01FEATURED

02PROBE

03PROBE

04PROBE

05PROBE

06BUFFER

Konsep slider sebenarnya juga pernah digunakan pada artikel Widget Popular Post Blogger dengan Efek Animasi Slider. Pada versi kali ini sumber datanya dibuat lebih fleksibel karena artikel dapat mengikuti label yang tersedia pada blog.

Urutan Animasi Widget

Saya sengaja tidak menjalankan semua animasi pada waktu yang sama. Artikel ringkas menyelesaikan transisinya terlebih dahulu, kemudian teks featured menghilang, setelah itu gambar lama keluar dan gambar baru masuk dengan efek membesar serta sedikit bounce.

LIST

TEXT OUT

IMAGE OUT

NEW DATA

Live Preview Widget

CODEFLARE

WIDGET DATA LINK

LOADING ARTICLE DATA...

Powered By CodeFlare

INFO

---

Live preview menggunakan feed CodeFlare sebagai contoh. Pengaturan warna, interval, scanner, autoplay dan label pada generator di bawah akan langsung diterapkan ke live preview sehingga perubahan dapat diperiksa sebelum kode digunakan.

Generator Widget Blogger

CODEFLARE GENERATOR ARTICLE STREAM CONFIG

Label Prioritas Label yang dicari terlebih dahulu.

Interval 6 Detik 7 Detik 8.2 Detik 10 Detik 12 Detik

Scanner Cepat Normal Lambat

Autoplay

Rotasi otomatis

Accent Color

#38bdf8

Icon dan elemen interaktif.

Background

#101820

Background utama widget.

Card Color

#13212a

Warna panel artikel.

Text Color

#dce8ef

Warna teks utama.

GENERATED CONFIG

WARNING

Fallback bekerja otomatis dari script utama sehingga tidak perlu diatur melalui generator. Generator difokuskan pada label, interval, kecepatan scanner, autoplay dan warna widget.

Kode Konfigurasi Widget

Kode konfigurasi bersifat opsional. Jika ingin menggunakan setting default, bagian ini boleh dilewati.

<script> window.CFSpaceWidgetConfig={ preferredLabel:'Widget', interval:8200, scanSpeed:3800, autoplay:true, accentColor:'#38bdf8', backgroundColor:'#101820', cardColor:'#13212a', textColor:'#dce8ef' }; </script>

Kode HTML Widget

HTML menjadi kerangka utama tempat favicon, nama blog, informasi label, featured article, artikel Probe, tombol navigasi dan footer ditampilkan.

<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>DATA LINK</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>

WARNING

Widget menggunakan icon Font Awesome. Jika template sudah memuat Font Awesome, jangan memasangnya dua kali. Template CodeFlare sendiri sudah menggunakan Font Awesome 4.7.5.

Font Awesome Jika Belum Tersedia

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Cara Memasang Widget di Blogger

01

Buka Tata Letak Blogger

Masuk ke dashboard Blogger kemudian buka menu Tata Letak dan pilih posisi widget.

02

Tambahkan HTML/JavaScript

Klik Tambahkan Gadget lalu pilih HTML/JavaScript.

03

Pasang Konfigurasi

Jika menggunakan generator, letakkan konfigurasi pada bagian pertama.

URUTAN PERTAMAwindow.CFSpaceWidgetConfig = {...}

04

Pasang HTML Widget

Paste struktur HTML setelah konfigurasi.

URUTAN KEDUA<div class="cfSpaceWidget" id="cfSpaceWidget"> ... </div>

05

Pasang JavaScript

JavaScript ditempatkan setelah HTML agar elemen widget sudah tersedia ketika script dijalankan.

URUTAN KETIGA<script> ... JavaScript Widget ... </script>

06

Pasang CSS

CSS dapat ditempatkan setelah JavaScript dalam gadget yang sama.

URUTAN KEEMPAT<style> ... CSS Widget ... </style>

07

Simpan dan Uji Widget

Periksa favicon, label, featured article, Probe, komentar, scanner dan rotasi artikel.

INFO

---

Urutan pemasangan yang direkomendasikan adalah Konfigurasi → HTML → JavaScript → CSS. Jika tidak memakai konfigurasi custom, pemasangan dapat langsung dimulai dari HTML.

STRUKTUR PEMASANGAN DALAM SATU GADGET

01

CONFIG<script>window.CFSpaceWidgetConfig={...};</script>

02

HTML<div id="cfSpaceWidget">...</div>

03

JAVASCRIPT<script>...</script>

04

CSS<style>...</style>

WARNING

Jangan mengganti ID atau class utama widget tanpa menyesuaikan selector JavaScript dan CSS. Konfigurasi juga sebaiknya ditempatkan sebelum script utama.

Pengaturan Widget

preferredLabelMenentukan label prioritas.

intervalMengatur waktu pergantian artikel.

scanSpeedMengatur kecepatan scanner.

autoplayMengaktifkan rotasi otomatis.

accentColorWarna icon dan elemen aktif.

backgroundColorWarna background widget.

cardColorWarna card artikel.

textColorWarna teks utama.

Generator dibuat agar pengaturan tersebut tidak harus diubah langsung di dalam JavaScript. Setelah opsi dipilih, live preview akan mengikuti perubahan sehingga tampilan dapat diperiksa terlebih dahulu sebelum kode konfigurasi disalin.

Referensi Pengembangan Widget

Basis widget masih dapat dikembangkan menjadi trending post, recommendation widget, multi-label slider maupun dashboard artikel berdasarkan kategori tertentu.

CODEFLARE DEVELOPMENT

Butuh Widget Blogger dengan Fungsi Khusus?

CodeFlare juga menyediakan pengembangan custom widget, perbaikan template, optimasi dan script Blogger.

Hubungi CodeFlare