Cara Merubah (About Us) Template Starter Menjadi bulat dan Berputar

Salam Ngerpik Blog teman teman blogger, artikel singkat kali ini saya akan coba mengulas dan membagikan tutorial cara mengganti gambar profile yang dijadikan Thumbnail About Us atau Tentang saya pada Template Starter yang saya gunakan ini menjadi bulat dan ada animasi berputar saat diarahkan. 

Otak atik kode html pada dashboard Edit Html Template blogspot dibantu mode pintar google Mode Ai akhirnya bisa juga penerapan dan pengaplikasiannya. Langsung saja caranya, cekidot wae,,

PENERAPAN KODE

Silahkan bagi teman teman blogger yang juga memakai template Starter dari "copybloggerthemes.com" untuk mengaplikasikan animasi ini pada icon About Us teman teman semua dengan cara masuk ke mode Edit HTML Template blogger lalu cari kode ]]></b:skin> CNTR F di kotaknya. Tempelkan kode dibawah ini tepat diatas kode ]]></b:skin>

Kode Tempel CSS:

</> Kode CSS

/* --- PERBAIKAN TOTAL: GAMBAR BULAT SEMPURNA TIDAK LONJONG --- */ img[src*="AVvXsEhkBL_sZDKCRdiDDzJhX3CpvlvYB5RQVOg0aL9BSNtcBC8cklt3rTEvyxuymMYQPycZCvC2dHTXG8M-ZEQfK2kkh24uJz6c0TjXtPHdFoUTvBd1NAPtRDYdF_ZWjoGCZzH-9HEhQmC3W1tA7rJkL06UYJ9c6aUtCTe4_nAVYQ3waaRJaWMFzs4w2qLhR1Hb"] { width: 80px !important; /* Tentukan lebar gambar */ height: 80px !important; /* Paksa tinggi gambar sama dengan lebarnya */ max-width: 80px !important; max-height: 80px !important; aspect-ratio: 1 / 1 !important; /* Kunci rasio kotak 1:1 agar tidak lonjong kapsul */ border-radius: 50% !important; /* Potong kotak menjadi lingkaran sempurna */ object-fit: cover !important; /* Jaga agar gambar di dalam tidak gepeng */ display: inline-block !important; vertical-align: middle !important; border: 2px solid #ccc !important; box-sizing: border-box !important; /* Efek transisi putar halus */ -webkit-transition: -webkit-transform 0.6s ease-in-out !important; transition: transform 0.6s ease-in-out !important; } /* Efek Putar Saat Diarahkan Kursor */ img[src*="AVvXsEhkBL_sZDKCRdiDDzJhX3CpvlvYB5RQVOg0aL9BSNtcBC8cklt3rTEvyxuymMYQPycZCvC2dHTXG8M-ZEQfK2kkh24uJz6c0TjXtPHdFoUTvBd1NAPtRDYdF_ZWjoGCZzH-9HEhQmC3W1tA7rJkL06UYJ9c6aUtCTe4_nAVYQ3waaRJaWMFzs4w2qLhR1Hb"]:hover { -webkit-transform: rotate(360deg) !important; transform: rotate(360deg) !important; border-color: #1a73e8 !important; }

Catatan Tambahan:

Jika ukuran 80px dirasa terlalu besar atau terlalu kecil di samping tulisan profil sobat blogger, sobat blogger, bisa mengubah angka 80px pada 4 baris pertama di atas (misalnya diganti menjadi 60px atau 50px). Yang terpenting, nilai angka lebar (width) dan tinggi (height) harus selalu sama.

Mudah bukan teman teman blogger pengaplikasiannya, semoga teman teman blogger semua juga mudah dalam menerapka kode ini tanpa masalah. Sekian dulu artikel tentang "Cara Merubah Gambar Tentang Saya (About Us) Template Starter Menjadi bulat dan Berputar" dan semoga bermanfaat untuk kita semua para pengguna blogger. Salam Ngerapik Blog! 

Meta Hastags: #Blogger #TutorialBlog #TipsBlogger #TemplateStarterFree #AnimasiBlogger #AnimasiGambarTentangSaya #AnimasiBulatdanBerputar #NgerapikBlog