Salam Ngerapik Blog dan selamat malam sobat blogger semuanya. 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 merupakan kata-kata Ai biar kalian tau teman teman saat saya memintanya untuk menampilkan kode ini agar dapat digunakan oleh teman-teman blogger semuanya sebagai Prompt bahasa Ai (bahasamu le..le seperti bahasa planet..wwkk😂). Langsung saja ulasannya, 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:
- Masuk ke Dashboard Blogger kamu.
- Pilih menu Tata Letak (Layout).
- Pada kolom samping (sidebar) atau bagian mana pun yang kamu inginkan, klik Tambahkan Gadget (Add a Gadget).
- Pilih opsi widget HTML/JavaScript.
- Beri judul sesuai selera kamu (misal: Artikel Terbaru atau Recent Posts).
- Salin seluruh kode sakti di bawah ini dan tempelkan (paste) ke dalam kotak konten widget tersebut.
<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!
Demikianlah artikel singkat saya kali ini tentang "Widget Black Keren Ala AI dan Saya Untuk Postingan Artikel Terbaru Populer Blogger Tanpa Ribet 100% Oke Binggit!" semoga dapat bermanfaat serta dapat diaplikasikan pada blog toko online sobat blogger juga semuanya. Selamat mencoba untuk mempercantik dan memperganteng blog teman teman semua. Salam Ngerapik Blog.
