Cara Membuat semua gambar Thumbnail pada widget blog menjadi berbentuk bulat lingkaran dan berputar saat disentuh kursor (hover)

Pernahkah sobat blogger melihat blog yang saat di arahkan gambar dan Thumbnail tersebut berputar dan berebeantuk bulatan?  Yups.. seperti gambar pada blog Ngerapik ini..😅 gelep mata oo😎 Nah langsung saja lah cara membuat dan menerapkannya buat blog teman teman semua.. Cekidot waelah.

Cara nya sangat mudah, teman teman hanya perlu menambahkan sedikit kode CSS ke dalam edit HTML template Bloggernya.

Cara Menambahkan Kode ke Blogger

1. Masuk ke dasbor Blogger teman teman semua.
2. Pilih menu Tema (Theme) di panel sebelah kiri.
3. Klik tombol Tanda Panah Bawah di sebelah tulisan "Sesuaikan (Customize)", lalu pilih Edit HTML.
4. Cari kode </style> atau ]]></b:skin> (teman teman bisa menekan tombol Ctrl + F di keyboard untuk mencari dengan cepat).
5. Salin dan tempelkan (copy-paste) kode CSS di bawah ini tepat di atas kode </style> atau ]]></b:skin> :

Gambar kucing ini merupakan demo pengaplikasiannya, arahkan Gambar Kucing Lucu Ini.. Muter teross!!

Kode CSS:

</> code css tempel

/* Membuat Gambar Thumbnail Widget Bulat dan Berputar */ .widget .sidebar-common .item-thumbnail img, .widget .popular-posts img, .widget .related-posts img, .widget-content img { width: 72px !important; /* Sesuaikan lebar gambar */ height: 72px !important; /* Sesuaikan tinggi gambar (wajib sama dengan lebar agar bulat sempurna) */ object-fit: cover; /* Menjaga gambar tidak gepeng */ border-radius: 50% !important; /* Membuat gambar menjadi lingkaran penuh */ transition: transform 0.6s ease-in-out !important; /* Mengatur kehalusan durasi putaran */ } /* Efek Berputar Saat Kursor Diarahkan (Hover) */ .widget .sidebar-common .item-thumbnail img:hover, .widget .popular-posts img:hover, .widget .related-posts img:hover, .widget-content img:hover { transform: rotate(360deg) !important; /* Memutar gambar 360 derajat */ }

6. Klik ikon Simpan (Save) di pojok kanan atas editor HTML Blogger teman teman semua.

NB. (Penjelasan Penting):

• border-radius: 50%: Fungsi inilah yang memotong sudut gambar kotak menjadi bulat total. Nilai tinggi (height) dan lebar (width) gambar pada widget kustom blog harus berukuran sama (misalnya sama-sama 72px atau 100px) agar bentuknya bulat simetris, bukan lonjong oval.
• transform: rotate(360deg): Kode ini memaksa gambar berputar satu putaran penuh (360 derajat) secara halus ketika pengunjung mengarahkan pointer mouse ke atas gambar tersebut.

Apakah efek putarannya sudah berjalan lancar di blog teman teman semua, atau ada bagian widget tertentu yang bentuk gambarnya belum berubah menjadi bulat? Silahkan coba aplikasikan terlebih dahulu dijamin 100% muter muter dek keruan,,😂. Apabila ada pertanyaan yang mau disampaikan, silahkan berkomentar dibawah ya..salam Ngerapik Blog.

👉 Baca Artikel Lengkap lainnya tentang: 100 Masalah Error Blogger Lengkap Beserta Penyebab dan Cara Mengatasinya (Update 2026).