Tips Membuat Site Info Responsive dan Rapih

Pada tutorial kali ini saya ingin membahas tentang site info. Apa sih site info itu? Sesuai dengan namanya, site info adalah informasi tentang blog/web yang Anda miliki. Anda bisa menaruhnya pada widget dan tentunya akan terlihat lebih bagus bila rapih dipandang. Gimana caranya agar widget-widget dalam site info ini tertata rapih? Silahkan ikuti tutorialnya sampai selesai.

Cara yang diperlukan untuk membuat tampilan site info menjadi lebih rapih adalah dengan menambahkan kode <div style='float:left;margin:5px;'> sebelum widget dan letakkan element </div> sebagai penutup. Agar lebih memahami, silahkan lihat preview berikut.

<div style='float:left;margin:5px;'>
      widget 1
</div>
<div style='float:left;margin:5px;'>
      widget 2
</div>
<div style='float:left;margin:5px;'>
      widget 3
</div>
<div style='float:left;margin:5px;'>
      widget 4
</div>
<div style='float:left;margin:5px;'>
      widget 5
</div>

Seperti yang Anda lihat, ada 5 widget yang dimasukkan dalam satu HTML/JavaScript. Anda bisa menambahkan atau menguranginya sesuai dengan kebutuhan. Saran saya agar menyimpan widget dengan ukuran yang lebih besar pada widget pertama agar tampilannya lebih rapih. Silahkan lihat site info pada blog ini untuk previewnya. Tidak hanya itu, Anda juga bisa menggunakan kode di atas untuk membuat widget lainnya menjadi lebih rapih. Sekian tutorial kali ini, semoga bisa bermanfaat bagi Anda.

Bagikan Artikel ini