Agar Gambar Header Di Tengah Dan Terlihat Simetris
Agar gambar header di tengah. Header dari sebuah situs web menggambarkan topik blog, sebagai identitas dari blog Anda dengan beda dengan yang lain. Setiap kali pengunjung mengakses blog untuk pertama kalinya header terlihat, header merupakan salah satu aspek utama yang digunakan untuk menentukan apa blog anda dan jenis konten dari isi artikel nice blog.
Oleh karena itu, penting untuk mengembangkan sebuah header yang baik ditempatkan rata di tengah dan pengunjung dengan cepat tertuju didepan mata nama blog milik Anda.
 |
| Contoh Header Gambar diatas masih di samping kiri dengan Blogger |
Agar gambar header rata di tengah. Bloger secara template default gambar headernya ada di sisi kiri dan kita sah-sah saja merubah posisi ditengah-tengah agar nampak jelas nama blog dan deskripsi blog kita, bila kita menguplouad gambar untuk header pastinya gambar terpotong otomatis bila menggunakan template bawaan, tapi anda bisa merubah agar gambar tetap utuh seperti pixel awal aploud.
Baca juga : Judul Artikel di urutan 5 besar google
Nah untuk lebih jelasnya agar gambar header rata ditengah sebagai berikut ini :
Membuat gambar header rata di tengah
Pertama-tama backup dulu template blog Anda bila kode untuk tutorial ini membuat error pada template.
Langsung saja langkahnya :
1). Masuk akun blogger anda.
2). Pilih menu template langsung ke Edit HTML
3). Telusuri kode di bawah ini salah satunya dengan pencarian Ctrl + F :
#header-wrapper
#header-inner
#header img
4). Nah bila sudah ditemukan kode-kode diatas penampakan kode pada template akan seperti kode di bawah dan perhatikan kode yang di tandai warna hijau :
#header-wrapper{background:#fff; margin:0 auto; width:970px; overflow:hidden}
#header-inner{background-position:center; margin-left:auto; margin-right:auto}
#header{padding-left:20px; font-family:arial; width:900px; text-align:left; float:left; height:70px; color:#000}
#header h1{font:25px "Segoe UI",Arial; font-weight:bold; color:#000; text-align:left; margin-top:5px; padding:6px 0 8px}
#header a{text-decoration:none; color:#000; border:0}
#header .description{font-size:1em}
#header img{margin-left:auto; margin-right:auto}
#outer-wrapper{background:#fff; box-shadow:0 0 20px #6d5d96;
4). Selanjutnya anda harus mengubah kode berwana hijau ini :
#header img{margin-left:auto; margin-right:auto}
Ganti dengan :
#header img{margin-left:auto; margin-right:auto}
5). Simpan dan lihat hasilnya.
Itulah tips sederhana tentang gambar header bisa berada ditengah-tengah semoga berhasil.