Yang membuat website anda berbeda dengan yang lain yaitu pada headernya, itu merupakan identitas atau sidik jari digital. Setiap kali pengunjung mengakses blog anda untuk pertama kalinya, header adalah salah satu aspek utama yang digunakan untuk menentukan siapa anda dan jenis konten yang sesuai harapan. Oleh karena itu, penting untuk mengembangkan sebuah header yang bagus dan pada tempat yang mencolok dan menggambarkan nama merek.
Apa yang nampak akan berlawanan dengan gagasan bahwa pengaturan default Blogger sebagai penentuan posisi header. Setiap kali anda memasang header ke situs, maka secara otomatis akan rata di sebelah kiri page. Beberapa pengguna Blogger mungkin tak masalah dengan pengaturan ini, terutama jika mereka menggunakan desain header yang tidak mengandung latar belakang. Orang lain mungkin berpikir bahwa header latar belakang mereka tampak terpotong, tidak lengkap, atau tidak bisa dibedakan dari konten mereka.
 |
| Gambar Header rata tengah |
Jika anda merupakan bagian dari kategori yang kedua, ada cara untuk menyesuaikan posisi header anda sehingga ditampilkan di tengah blogger. Dengan header situs anda tepat ditengah, Anda memiliki fleksibilitas yang lebih besar dari desain keseluruhan. Sulit untuk melewatkan sebuah header yang ditempatkan di tengah layar pada setiap halaman seseorang menavigasinya.
Tutorial Membuat Gambar Header di tengah dengan Template designer blogger
Membuat perubahan itu relatif mudah. Anda dapat melakukan penyesuaian ini pada setiap halaman blog Blogger anda tanpa harus mengubah mereka secara satu-per-satu. Yang perlu anda lakukan adalah memodifikasi CSS dari blog anda yang dapat ditemukan secara langsung melalui dashboard Blogger Anda. Bahkan jika anda memiliki sedikit atau bahkan tidak ada pengalaman dalam desain web atau coding, Anda dapat membuat gambar header tepat ditengah dengan mengikuti beberapa langkah berikut ini.
Langkah 1. Masuk akun blogger anda dan pilih blog yang ingin di modifikasi, kemudian pergi ke tab "Template" dan klik tombol "Customize" di sisi kanan.
 |
| Membuka template designer blogger |
#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}
Jika anda memiliki gambar kecil dan anda ingin menjadi lebar penuh, tambahkan CSS dibawah ini sebagai gantinya:
#header-inner {
background-size: cover;
width: 100% !important;
text-align: center;
}
#header-inner img {
width: 100%;
height: 100%;
}
Langkah 3. Tekan ENTER setelah anda paste code css, kemudian klik tombol "Terapkan ke Blog" di sudut sebelah kanan-atas dari taksbar template designer.
 |
| Memodifikasi CSS |
Berikut adalah beberapa pilihan selaras lainnya untuk header Anda:
Gambar di sebelah kanan dan judul di sebelah kiri
#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}
Gambar di sebelah kiri dan judul di sebelah kanan
#header-inner {
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
Catatan: untuk gambar yang lebih besar, Anda mungkin harus mengubah ukurannya untuk membuat mereka tampil berdampingan dengan teks.
Akhir Kata!!!
Setelah melakukan perubahan ke CSS dan menyimpan modifikasi anda, anda mungkin ingin melihat kembali situs anda. Refresh halaman dan anda akan melihat header sekarang tepat ditengah, bukan di sebelah kiri. Klik pada beberapa halaman link anda dan pastikan bahwa modifikasi ini telah dibuat untuk setiap halaman atau posting di blog.
Jika kebetulan anda tidak melihat perubahan pada header, kembali ke kode yang anda ubah dan pastikan bahwa anda telah menyalin dan menyisipkan kodenya ke dalam kotak persis seperti yang diperintahkan. Bahkan perubahan kecil dalam kode, atau titik koma hilang akan gagal membuat perubahan yang anda inginkan, atau hasil yang berbeda dari apa yang diharapkan.
Pemikiran yang bagus tentang CSS adalah bahwa itu merupakan pusat kemenarikan dari situs anda untuk semua hal desain. Dari file CSS, anda dapat memodifikasi apapun dan bagaimanapun penampilan situs anda. Setelah anda merasa nyaman melakukan penyesuaian dengan tampilan situs anda, buatlah blog akan menjadi sesuatu yang berbeda dan menarik.
0 komentar