Widget Black Keren Ala AI dan Saya Untuk Postingan Artikel Terbaru Populer Blogger Tanpa Ribet 100% Oke Binggit!

Salam Malam sobat blogger! Ini awalnya kejadian saat saya mau menempatkan widget bawaan tema blog untuk memuat Artikel Postingan terbaru muncul di kanan berjejer kebawah. Namun Dicoba edit manual, edit dari kode HTML tetap gak muncul, akhirnya minta bantuan MODE AI..wkkk.. nah terciptalah Widget ini. Ini Kata-kata Ai biar kalian tau teman teman saat saya memintanya unutk menampilkan juga kode ini agar dapat digunakan oleh teman-teman. CEKIDOT WAE!

Apakah kamu bosan dengan tampilan widget artikel terbaru (recent posts) bawaan Blogger yang itu-itu saja? Atau kamu pernah memasang widget bawaan tapi mendadak mogok dan tidak mau muncul di halaman blog?

Jangan khawatir! Pada tutorial kali ini, kita akan membuat Widget Artikel Terbaru Kustom dengan Efek Animasi Putar dan Angka Index Dinamis. Widget ini didesain dengan tema gelap premium (dark mode), 100% responsif di layar HP, dan gambarnya otomatis bulat serta bisa berputar 360 derajat saat kursor diarahkan!

Kelebihan widget ini adalah menggunakan jalur data Feed resmi Blogger, sehingga dijamin 100% pasti muncul di template blog jenis apa pun tanpa takut bentrok dengan kode inti tema.

Langkah Pemasangan Widget

Caranya sangat mudah dan tidak perlu mengotak-atik kode Edit HTML tema kamu. Cukup ikuti langkah-langkah praktis berikut ini:

1. Masuk ke Dashboard Blogger kamu.
2. Pilih menu Tata Letak (Layout).
3. Pada kolom samping (sidebar) atau bagian mana pun yang kamu inginkan, klik Tambahkan Gadget (Add a Gadget).
4. Pilih opsi widget HTML/JavaScript.
5. Beri judul sesuai selera kamu (misal: Artikel Terbaru atau Recent Posts).
6. Salin seluruh kode sakti di bawah ini dan tempelkan (paste) ke dalam kotak konten widget tersebut.

</> Script Widget Kustom

<div id="aoi-recent-posts">Cari artikel...</div> <style> #aoi-recent-posts { display: flex; flex-direction: column; gap: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-sizing: border-box; counter-reset: aoi-counter; } .aoi-post-item { display: flex; align-items: center; gap: 14px; background: #000000; padding: 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 4px 15px rgba(0,0,0,0.3); text-decoration: none; transition: background 0.3s ease; position: relative; } .aoi-post-item:hover { background: #111111; } .aoi-thumb-wrapper { width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.1); position: relative; margin-left: 12px; } .aoi-thumb-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .aoi-post-item:hover .aoi-thumb-wrapper img { transform: rotate(360deg); } .aoi-post-item::before { counter-increment: aoi-counter; content: counter(aoi-counter); position: absolute; left: 8px; top: 50%; transform: translateY(-50%); z-index: 10; width: 22px; height: 22px; background-color: #0056b3; color: #ffffff; font-size: 11px; font-weight: bold; display: flex; align-items: center; justify-content: center; border-radius: 2px; box-shadow: 0 2px 5px rgba(0,0,0,0.5); } .aoi-title-wrapper { flex: 1; } .aoi-post-title { font-size: 13px; font-weight: 600; line-height: 1.4; color: #f0f0f0; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media screen and (max-width: 768px) { .aoi-post-title { font-size: 13px; } } </style> <script> function aoiRecentPosts(json) { var container = document.getElementById('aoi-recent-posts'); var html = ''; var maxPosts = 5; if (json.feed.entry) { for (var i = 0; i < maxPosts; i++) { if (i == json.feed.entry.length) break; var entry = json.feed.entry[i]; var title = entry.title.$t; var url = ''; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { url = entry.link[k].href; break; } } var imgUrl = 'https://googleusercontent.com'; if (entry.media$thumbnail) { imgUrl = entry.media$thumbnail.url.replace('/s72-c/', '/s150-c/'); } html += '<a class="aoi-post-item" href="' + url + '">'; html += '<div class="aoi-thumb-wrapper"><img src="' + imgUrl + '" alt="' + title + '"/></div>'; html += '<div class="aoi-title-wrapper"><h4 class="aoi-post-title">' + title + '</h4></div>'; html += '</a>'; } container.innerHTML = html; } } </script> <script src="/feeds/posts/default?alt=json-in-script&callback=aoiRecentPosts"></script>

Tips Kustomisasi Tambahan

Kamu juga bisa memodifikasi setelan widget ini dengan sangat mudah langsung dari dalam kode di atas:

• Mengubah Jumlah Artikel: Cari kode var maxPosts = 5; di bagian bawah script, lalu ganti angka 5 dengan jumlah artikel yang ingin kamu tampilkan (misalnya 6, 7, atau 10).
• Mengubah Warna Kotak Angka: Cari kode background-color: #0056b3; pada bagian CSS, lalu ganti kode warna hex tersebut sesuai dengan warna tema blog kamu.

Setelah semuanya selesai dikonfigurasi, jangan lupa klik tombol Simpan dan lihat hasilnya di blog kamu. Sekarang widget artikel terbaru kamu sudah tampil beda, dinamis, dan terlihat sangat profesional!

Sekian tutorial kali ini, semoga bermanfaat bagi perkembangan blog sobat semua. Jika ada langkah yang kurang dipahami, jangan ragu untuk bertanya di kolom komentar di bawah ya. Salam sukses dan selamat mencoba!

MANTAP dan KEREN Bukan teman-teman.. selamat berkreasi mempercantik dan memperganteng Blogger teman teman semua. SAlam Ngerapik Blog!