Hello sobat icloudZer kali ini admin akan membahas bagaimana caranya membuat Icon bulat seperti pada Table of content dari kode CSS yang mana nantinya icon tersebut hanya sebagai contoh dalam pembelajaran dasar kode CSS
Info: Oke jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersam sama
Disclaimer
Sebelum saya benar benar membahas mengenai bagaimana caranya memasang translate atau penerjemah diblog, saya akan memberikan disclaimer dulu bahwa setiap artikel yang kami tuliskan disini adalah murni tulisan admin, jadi jika kamu ingin mengcopy paste harap sertakan link sumber oke
Ketika kamu sedang membaca artikel disini kemudian ada penjelasan yang tidak kamu pahami kamu bisa menyampaikannya dikolom komentar oke agar admin bisa memperbaiki penulisan didalam artikel ini
Peringatan: Artikel ini khusus untuk orang yang paham aja, atau orang yang sedang memerlukan artikel seperti ini untuk pengetahuannya, bagi kamu yang tidak paham sama sekali menjauh aja karena mungkin disini mungkin bukan tempat kamu untuk mendapatkan informasi
Icon Bulat
Nah biasanya yang dinamakan icon dibuat dan ditampilkan menggunakan kode HTML yakni SVG namun kali ini icon tersebut akan kita buat menggunakan kode CSS, dan bagaimanakah cara membuat icon bulat menggunakan kode CSS diblogger, atau seperti icon bulat pada tampilan Table of content yang digunakan oleh blog icloudice, kamu bisa pelajari lebih lanjut melalui artikel ini hingga selesa oke
Kolaborasi Animasi
Icon ataupun yang lainnya pada kode CSS bisa sekali kita gabungkan dengan animasi CSS agar membuat tampilan dari icon ataupun yang lainnya tersebut bisa tampak menarik, nah sebagai contoh kamu bisa melihat animasi CSS dibagian Table of content didalam blog Icloudice, icon tersebut berbentuk bulat kemudian admin menggunakan kolabori animasi CSS untuk membuatnya, kamu bisa mempelajari bagaimana cara menambahkan animasi css tersebut pada icon bulat seperti Table of content milik Icloudice.com
Cara membuat
Baiklah sekarang kita akan mulai membahas bagaimana sih caranya membuat icon bulat menggunakan kode CSS diblogger
Tentukan Class
Untuk membuat tampilan CSS kamu harus menentukan class dari tampilan yang akan kamu buat, sebagai informasi class CSS dimulai dengan . (Titik) kemudian dilanjutkan dengan judul Class seperti contoh dibawah ini
.rahBulatInfo: Contoh kode diatas adalah kode class dan judul class dari tampilan icon bulatnya
Kode Lengkap
Baiklah langsung aja admin bakalan memberikan contoh kode lengkapnya, jika admin membahas satu persatu cara menggunakan kode CSS dalam membuat icon bulat tersebut, pasti kamu akan kebingungan dalam mempelajari penjelasan tersebut
Nah untuk itu Admin akan menjabarkan seluruh unsur kode CSS dalam membuat icon bulat tersebut, kamu bisa mempelajarinya seperti contoh kode CSS dibawah ini
.rahBulat{
width:45px;
height:45px;
z-index:52px;
border-radius:50%;
background-color:red;
color:red;
padding:0;
margin:0;
}Info: Kode diatas adalah kode CSS untuk membuat icon bulat tersebut, dan kamu bisa menambahkan animasi CSS didalam tampilan icon bulat tersebut
Kode HTML
Selanjutnya apabila kamu telah membuat CSS, sekarang kamu bisa menggunakan class HTML untuk menampilkan icon bulat tersebut didalam blog kamu
<div class="rahBulat"/>Info: Sedangkan fungsi dari kode HTML diatas adalah untuk menampilkan icon bulatnya tersebut
Contoh Tampilan
Baiklah Bagaimanakah tampilan icon bulatnya jika diterapkan, kamu bisa mengklik tombol dibawah ini jika ingin melihatnya
Info: Bagaimana sobat kerenkan, admin juga menggunakan animasi CSS agar tampilanmya semakin menarik