Hai sobat blogger, gimana kabar kalian? baik bukan? di era pandemi ini kita harus meningkatkan imunitas kita dan mematuhi prokes yang ada. Virus covid 19 adalah virus yang benar - benar ada dan mematikan. Banyak para tetangga yang terkena namun ada juga beberapa yang meninggal dengan kasus sesak nafas. Namun jangan khawatir kunci sukses untuk menghadapapi virus corona adalah meningkatkan kekebalan tubuh sehingga tubuh dapat melawan virus ini. hehehe malah ngelantur yuk kembali ke pokok tulisan.
Kali ini saya akan membagikan tentang bagaimana cara membuat layout web / blog yang flexible dan responsive. Pada bagian satu dan dua kita sudah mengetahui bagaimana cara menghubungkan web atau blog ke bootsrap. Pada kesempatan kali ini saya akan berbagi pengalaman pengetahuan saya agar blog memiliki tampilan seperti blog - blog profesioanal.
Langkah pertama kalian harus tahu tentang komponen - komponen bootstrap, mari kita pelajari terlebih dahulu mengenai komponen bootstrap untuk layout / tampilan web / blog
Layout / tampilan bootstrap
<div class="container"> ...isi halaman blog </div>
Kode di atas merupakan sebuah alat untuk menampung beberapa bagian - bagian atau lebih jelasnya jika kita mengibaratkan rumah kode di atas adalah rumahnya dan kamar - kamarnya merupakan bagian - bagiannya. Sudah paham bukan ? Tampilan yang responsive pada blog tergantung pada kode di atas.
Coba kalian praktekan kalian buka tema / template blog lalu kalian cari tepat di bawah kode
</head>atau bisa jadi jika template menggunakan template custom kalian bisa mencari kode
<div class="container">dibawah
<body>Jika kalian sudah menemukan jika di blog ada berbagai macam nama class disitu bisa
<container-wripper>Nah kalian bisa mengganti dengan kode
<div class="container">Dan simpan coba lihat hasilnya apakah ada perubahan atau tidak, jika tidak ada perubahan berarti kalian harus mencermati kembali kode yang kalian ubah benar atau salah.
<div class="header-inner">dan gantilah menggunakan class bootstrap agar tampilan header menjadi responsive dan gantilah class itu bisa menggunakan class bisa container atau img-fluid agar tampilan menjadi responsive dengan gambar. Untuk header ini kalian harus paham mengenai fungsi if pada aplikasi blogger, untuk blogger fungsi if menjadi
<b:if>dan ditutup dengan </b:if>kalian bisa mempelajari ya, atau jika kalian tidak tahu mengenai fungsi ini kalian bisa mengubah semua class header inner. Selamat mencoba
Social Media