Salam html, Hallo sobat blogger yang sedang pusing ria dengan kode - kode yang sistematis. Kali ini saya akan membagikan sebuah tip untuk membangun template blogger yang user friendly dan responsive. Langsung saja pada pokok permasalahan, setelah kita mengcopikan kode pada bagian satu maka langkang selanjutnya adalah menghapus kode css yang ada template bawaan blogger coba kalian buka tema lalu sesuaikan tema pilih edit html maka kalian akan menemukan kode html lalu carilah kode
<style type='text/css'>
</style>
Kalian hapus kode di atas beserta kodenya, setelah itu kita masuk ke kode
<body>Pada pilihan ini kita akan membangun sebuah template yang berbasis bootstrap dan kita harus jeli dan teliti agar template kita tidak belepotan ( rusak ). langkang selanjutnya kita ganti "class=container" atau tempat untuk tampilan penuh blogger kita. kode ini tepat di bawah
<body>
<div class="container">Maka kita bisa mengganti dengan bootstrap
<body>
<div class="container-fluid">
atau pilih salah satu di bawah ini
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
Kita tinggal memilih dengan selera kita. Ada 4 pilihan layout yang tersedia dengan ukuran small, medium, large dan extra large. Untuk ukuran small memiliki layout width 100% dengan maksimal ukuran layar 540px. Sedangkan ukuran medium juga memiliki layout witdh 100 % dengan maksimal 720px. Lalu large juga sama memiliki layout width 100% dengan maksimal 1024 px.
Dari uraian di atas dapat saya simpulkan bahwa layout untuk tampilan dengan maksimal witdh itu adalah tampilan dengan ukuran yang bisa menyesuaikan dengan layar. Jika kita membuka sebuah web yang menggunkan layar HD 1024 px maka untuk yang ukuran large akan menampilkan tampilan penuh. Namun jika kita menggunakan ukuran tampilan small jika kita menggunakan layar ukuran HD maka tampilan makasimal hanya 540px. Untuk lebih jelasnya bisa dilihat pada gambar dibawah ini
Contoh tampilan container-lg large |
Contoh tampilan container-md atau medium |
Social Media