Jumat, 15 Juni 2018
Cara Mudah Membuat Header Blog Menjadi Responsive 2018
Salah satu hal yang merusak tampilan website kita adalah meletakan image namun tidak responsive pada semua screen media. Biasanya pada bagian header diletakan image sebagai bagian header agar tampilan website menjadi lebih menarik.
Tampilan terlihat bagus ketika berada di screen dekstop version, namun pada layar yang lebih kecil ukuran dimensinya situs kalian akan terlihat berantakan pada tampilan versi mobile version. Header tampilan pada mobile tidak terlihat responsive pada bagian image header situs kalian. Lalu bagaimana cara membuat header blog menjadi responsive ?
Ikuti beberapa langkah di bawah ini :
1. Merubah ukuran pixel pada image header
Hal pertama yang harus dilakukan untuk membuat header blog menjadi responsive di setiap media screen adalah dengan membuat ulang image headernya menjadi ukuran pixel yang lebih besar dari sebelumnya.
Contohnya, di image 1 saya memakai ukuran width 759 x height 250, kemudian mari kita melakukan percobaan pada image 1 seperti contoh gambar diatas yang memiliki resolusi gambar kecil akan dibuat responsive di semua screen media. Maka hasilnya gambar header kalian akan terlihat seperti tertarik dan blur. Dikarenakan gambar header kalian memiliki resolusi kecil jadi gambar dipaksa untuk memenuhi media responsivenya. Perhatikan rekayasa gambar dibawah ini..
2. Terapkan Kedalam Blog
Langkah selanjutnya adalah dengan login kedalam halaman admin blogger kalian, kemudian terapkan gambar header yang sudah dibuat dengan ukuran resolusi besar ke dalam blog kalian. Caranya pilih Tata Letak - Klik Edit bagian widget header. Kemudian pada opsi gambar klik pilih file untuk mencari lokasi gambar header yang sudah kalian buat lalu pilih Open.
Jika sudah dimasukan lalu pilih Terapkan ke Blog di sebelah kanan pojok, tunggu hingga ada popup notifikasi bahwa sudah berhasil diterapkan kedalam blog, lalu pilih kembali ke blogger.
Selesai deh proses cara mudah membuat header blog menjadi responsive 2018, untuk membuktikannya silakan kalian refresh halaman blog kalian kemudian kalian kecilkan browser kalian maka gambar header akan menyesuaikan secara otomatis dengan ukuran screen kalian.
Untuk lebih jelasnya kalian buka melalui dekstop dan mobile, maka blog kalian akan terlihat sama dengan tampilan di dekstop.
Terimakasih sudah mengikuti tutorial ini mengenai cara terbaru merubah header blog menjadi responsive 2018. Jangan lupa comment yah jika kalian berhasil membuat header kalian menjadi responsive, jangan lupa juga comment jika kalian gagal.
Jadi pada rekayasa gambar diatas cara untuk membuat header blog responsive 2018 dengan membuat ukuran gambar header menjadi besar. Dengan minimum ukuran lebarnya 1000, untuk height atau tingginya terserah kebutuhan kalian.
2. Terapkan Kedalam Blog
Langkah selanjutnya adalah dengan login kedalam halaman admin blogger kalian, kemudian terapkan gambar header yang sudah dibuat dengan ukuran resolusi besar ke dalam blog kalian. Caranya pilih Tata Letak - Klik Edit bagian widget header. Kemudian pada opsi gambar klik pilih file untuk mencari lokasi gambar header yang sudah kalian buat lalu pilih Open.
Tunggu hingga proses upload gambar selesai dan akan muncul pada halaman popup widget header kalian. Jika sudah selesai proses uploadnya lalu pilih Simpan. Lihat blog kalian apakah gambar sudah benar terpasang pada blog kalian dengan gambar yang kalian inginkan. Jika sudah benar maka lanjutkan ke proses selanjutnya.
3. Mengedit Bagian Header Css
Pada artikel sebelumnya saya sudah menjelaskan bagaimana cara mengganti header blog dengan gambar. Di artikel tersebut kita menambahkan file css untuk bagian widget header agar posisi header berada di posisi yang kita inginkan. File css itu juga nantinya yang akan kita edit agar header kita menjadi responsive pada semua ukuran screen media.
Kembali ke halaman admin blog kalian masuk ke Tema kemudian pilih Sesuaikan. Karena kita akan menyesuaikan bentuk gambar header kita. Pada menu di sebelah kiri pojok pilih Lanjutan kemudian di sebelah kanan kita scroll paling bawah pilih Tambahkan CSS. Akan terlihat script css yang kita inputkan kedalam blog untuk bagian header.
Rubah file css tersebut seperti contoh dibawah ini.
Jika sudah dimasukan lalu pilih Terapkan ke Blog di sebelah kanan pojok, tunggu hingga ada popup notifikasi bahwa sudah berhasil diterapkan kedalam blog, lalu pilih kembali ke blogger.
Untuk lebih jelasnya kalian buka melalui dekstop dan mobile, maka blog kalian akan terlihat sama dengan tampilan di dekstop.
Terimakasih sudah mengikuti tutorial ini mengenai cara terbaru merubah header blog menjadi responsive 2018. Jangan lupa comment yah jika kalian berhasil membuat header kalian menjadi responsive, jangan lupa juga comment jika kalian gagal.
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar