Template Blogger Klasik jadi Responsive - 2

Inspeksi elemen HTML

Sebelumnya

Langkah selanjutnya,

Mengatur Header / Judul blog

Cara mengatur letak header atau judul blog dari posisi aslinya adalah dengan mengubah letak kode HTML dalam tema.

Sebelum diatur, letak header akan menjadi satu elemen dengan postingan, lihat gambar diatas.

Fungsi memisahkan header dengan postingan adalah supaya mempermudah respon halaman pada saat ditampilkan pada berbagai ukuran layar.

Caranya :

Di halaman Edit HTML, klik tombol Format Tema terlebih dahulu agar rangkaian kodenya mudah untuk dibentangkan dan diringkas dan jika sudah,  cari kode <header>.

Jika kode HTML dalam posisi terbentang, klik nomor urut kolom yang berada tepat disamping kode <header> untuk meringkas kode sehingga hanya akan nampak kode tag buka dan tag penutup saja seperti gambar dibawah ini.

Jika sudah, sorot tag pembuka dibawah tag <div class='content'> sampai tepat diatas tag pembuka <header>, lalu cut / potong dan pastekan tepat dibawah tag </header> (penutup header) seperti pada gambar selanjutnya dibawah ini.

Lalu klik tombol simpan, lihat hasilnya.

Mengatur Footer Blog

Lanjutkan dengan mencari kode <footer> lalu temukan kode widget atribusi (attribution). Ubah perintah locked='true' menjadi locked='false' dan simpan.
Kemudian buka halaman Tata Letak, jika sudah terbuka, sebelum mengedit widget, refresh halaman terlebih dahulu untuk memuat perubahan pada tema (atau tekan F5 pada keyboard). Jika sudah geser halaman dan klik edit pada widget Atribusi, yang paling bawah klik tombol hapus dan simpan.
Sampai disini dulu untuk tahap footer, lanjut ke pengaturan gambar postingan.

Membuat Footer Blogger

Mengatur lebar image / gambar

Sebelum mengatur gambar postingan, silahkan lihat dahulu hasil dari tahap-tahap diatas. Coba dengan menyempitkan / melebarkan jendela browser untuk melihat tampilan halaman.
Perhatikan scroll bar pada bagian bawah jendela browser, jika masih terdapat ruang geser, berarti masih ada elemen yang belum tersesuai...
Ya karena gambar postingan belum di atur. Apabila scroll bar bawa sudah tidak muncul, maka itu berarti halaman blog sudah menjadi responsive.

Lanjutkan untuk mengatur lebar gambar postingan.
Masih pada halaman edit HTML, temukan kode CSS .post-body lalu tambahkan diatas atau dibawah rangkaian CSS tersebut.

Kenapa harus didekatkan dengan .post-body ? Tentu saja selain gambar postingan adalah bagian dari post-body, agar CSS tidak acak dan tetap menjaga pengelompokannya agar lebih mudah menemukan / mengaturnya dikemudian hari jika diperlukan.
tambahkan kode berikut ini

.post-body img {
 padding: 0;
 max-width: 100%;
}

Simpan lalu lihat hasilnya. Pastikan scroll bar bagian bawah sudah tidak lagi muncul.

Catatan : Setelah mengatur dan memodifikasi HTML blogger, hindari menggunakan kembali Desainer Tema Blogger. Karena jika mengatur tampilan yang sudah dimodifikasi tersebut diatas dengan Desainer Tema Blogger beresiko, beberapa elemen akan kembali seperti semula / default yang mengakibatkan halaman kehilangan responsibilitasnya.  

Sebelumnya