Dalam postingan sebelumnya kita pernah sharing mengenai
Cara Membuat Judul Header Rata Tengah. Untuk kali ini saya akan coba berbagi mengenai
Cara Membuat Gambar Header Rata Tengah. Hal ini juga untuk menanggapi komentar yang menanyakan bagaimana kalau Gambar, Judul dan Deskripsi juga rata tengah.
Berikut langkah-langkah yang bisa Anda coba :
- Pertama Login Blogger
- Pilih Rancangan
- Pilih Edit HTML
- Beri tanda Centang pada Expand Widget Template
Apabila langkah-langkah diatas sudah dilakukan, langkah selanjutnya adalah menuju ke bagian Header, perhatikan kode dibawah ini :
#header-inner { background-position: center; margin-left: auto; margin-right: auto;}
#header h1 {font-weight:100;color: #D7DF01;text-decoration: none;font-size: 36px;
line-height:28px;padding:0;text-align:center;}
#header .description {margin: 0;padding: 0px 0 5px 0px;font-weight:800;
font-family:arial,verdana,sans-serif;color:#FFFFFF;font-size: 100%;letter-spacing: 1px;text-align:center;}
Untuk tulisan yang berwarna
Merah menunjukan posisi gambar,
Biru untuk Judul dan yang
Hijau untuk Deskripsi blog.
Hasilnya akan tampak seperti ini :
Untuk setting gambar berada disisi Kiri atau Kanan tinggal merubah #header-inner nya saja
Contoh Gambar Header Kiri
#header-inner { background-position: left; margin-right: auto;}
#header h1 {font-weight:100;color: #D7DF01;text-decoration: none;font-size: 36px; line-height:28px;padding:0;text-align:center;}
#header .description {margin: 0;padding: 0px 0 5px 0px;font-weight:800; font-family:arial,verdana,sans-serif;color:#FFFFFF;font-size: 100%;letter-spacing: 1px;text-align:center;}
Hasilnya akan tampak seperti ini :
Contoh Gambar Header Kanan
#header-inner { background-position: rigt; margin-left: auto;}
#header h1 {font-weight:100;color: #D7DF01;text-decoration: none;font-size: 36px; line-height:28px;padding:0;text-align:center;}
#header .description {margin: 0;padding: 0px 0 5px 0px;font-weight:800; font-family:arial,verdana,sans-serif;color:#FFFFFF;font-size: 100%;letter-spacing: 1px;text-align:center;}
Hasilnya akan tampak seperti ini :
Demikian sedikit penjelasan mengenai
Cara Membuat Gambar Header Rata Tengah.
Semoga Bermanfaat.
