Cara Mengatur Posisi Gambar Header Rata Tengah, Kiri, dan Kanan

Cara Mengatur Posisi Gambar Header Rata Tengah, Kiri, dan Kanan

sds

5/07/2013

15 Komentar

Cara Mengatur Posisi Gambar Header Rata Tengah, Kiri, dan Kanan - Alhamdulillah kali ini saya bisa posting lagi yang dimana sebelumnya saya posting tentang Cara Mengubah Nama Menu/Navigasi Blog. Dan untuk kali ini Micvoster akan berbagi trik tentang Cara Mengatur Posisi Gambar Header Rata Tengah, Kiri, dan Kanan.

Header blog bisa diartikan sebagai kepala blog yang dimana Header blog ini sangat penting untuk kebaikan blog kita sendiri. Beberapa blogger membuat header blog dengan sebuah gambar namun ada juga hanya dengan tulisan. Untuk Header blog dengan gambar biasanya mengalami penempatan yang kurang sesuai dengan keinginan kita, biasanya setelah mengganti header blog dengan sebuah gambar maka header blog berada di bagian tengah padahal keinginan kita header blog berada di bagian kiri dan begitu pun lainnya.

Dengan pernyataan diatas saya punya solusinya yang semoga dapat bermanfaat. Nah, mengatasi itu perhatikan di bawah ini :

1. Anda harus login di blogger.com
2. Kemudian pilih Template --> Edit HTML
3. Cari kata #header-wrapper atau #header-inner atau #header img. Gunakan Ctrl + F untuk mempermudah mencarinya.
4. Jika sudah ketemu biasanya akan tampak seperti ini (gambar header berada di tengah) :

#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;

Perlu anda ketahui kode diatas berbeda-beda untuk setiap blog cari cari yang hampir sama diatas.
5. Untuk mengatur posisi gambar header berada di tengah, anda tinggal ubah kode :

#header img{margin-left:auto; margin-right:auto}

menjadi 

#header img{margin-left:auto; margin-right:auto} 

maka hasilnya seperti ini :

Posisi Tengah/Center

6. Untuk mengatur posisi gambar header berada di sebelah kiri, anda tinggal ubah kode :

#header img{margin-left:auto; margin-right:auto}

menjadi

#header img{text-align:left}

maka hasilnya seperti ini :

Posisi Kiri/Left

7. Untuk mengatur posisi gambar header berada di sebalah kanan, anda tinggal ubah kode :

#header img{margin-left:auto; margin-right:auto}

menjadi

#header img{margin-left:auto}

maka hasilnya seperti ini :

Posisi Kanan/Right

8. Setelah itu anda tinggal save dan lihat hasilnya. Mudah kan ?

Demikian artikel saya tentang Cara Mengatur Posisi Gambar Header Rata Tengah, Kiri, dan Kanan semoga dapat bermanfaat dengan baik. Namun jika ada masalah, anda bisa berkomentar di bawah ini.