Tentunya anda pernah mengisi atau mengomentari artikel di suatu website dan setelah anda menginput komen maka komen anda akan di tampilkan di bawah artikelnya atau di suatu box yang menampung komen anda. Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Box Komen Menggunakan Bulma CSS Framework.
Tampilan website sangat berpengaruh pada kenyamanan pengguna website itu sendiri, maka dari itu kita harus membuat suatu website semenarik mungkin sampai hal-hal kecil seperti membuat box untuk komen para pengguna. Elemen .box pada bulma hanyalah wadah dengan bayangan, garis, radius, dan beberapa padding. Misalnya, Anda dapat menyertakan objek media. Nah dengan menggunakan elemen .box pada bulma, kali ini saya akan memberikan langkah-langkah Cara Membuat Box Komen Menggunakan Bulma CSS Framework:
– Pertama, anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.
– Kedua, anda ketikan kode html di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html> <head> <title>Grid Bulma Framework</title> <!--link ke css bulma--> <link rel="stylesheet" href="bulma-0.4.0/css/bulma.css"> <!--link ke font-awesome--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="columns"> <div class="column"></div> <div class="column" style="margin-top: 10px"> <div class="box"><!--.box disini berfungsi untuk membungkus elemen-elemen lainnya dan--> <article class="media"> <!--media left berfungsi sebagai pembungkus image--> <div class="media-left"> <figure class="image is-64x64"> <img src="http://bulma.io/images/placeholders/128x128.png" alt="Image"> </figure> </div> <!--media-content berfungsi sebagai penampung dari komen yang kita masukan--> <div class="media-content"> <div class="content"> <p> <strong>Gilang</strong> <small>@gilang</small> <small>21 menit yang lalu</small> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. </p> </div> <!--untuk menambahkan icon--> <nav class="level is-mobile"> <div class="level-left"> <a class="level-item"> <span class="icon is-small"><i class="fa fa-reply"></i></span> </a> <a class="level-item"> <span class="icon is-small"><i class="fa fa-heart"></i></span> </a> </div> </nav> </div> </article> </div> </div> <div class="column"></div> </div> </body> </html> |
Untuk Penjelasan kode html-nya saya sudah berikan commenting pada kode di atas. Setelah selesai coba anda buka di browser masing-masing maka tampilannya akan menjadi seperti berikut:
Dengan bulma kita dapat membuat suatu box komen yang simple dan menarik hanya dengan memberikan .box dan mengisikan beberapa elemen-elemen yang lain pada .box dengan hanya memanggil class yag sudah disediakan oleh bulma.
Sekian tutorial tentang Cara Membuat Box Komen Menggunakan Bulma CSS Framework. Semoga bermanfaat.