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..wkkkk!! gelep mata oo.. Nah langsung saja lah cara membuat dan menerapkannya buat blog teman teman semua.. Cekidot Wae!!

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

Cara Menambahkan Kode ke Blogger

1. Masuk ke dasbor Blogger Anda.
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> (Anda 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> :

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 Anda.

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 Anda 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 terapkan terlebih dahulu dijamin 100% muter muter dek keruan,,ckkkk.. Salam,salam Ngerapik Blog..!