Merubah Posisi Header Gambar Template Evo Magz ke Tengah

Sebelumnya juga Saya pernah mencoba merubah posisi header template milik Arlina Design, yaitu untuk template Nubie Banget dimana template tersebut ketika headernya tidak tambahkan gambar maka textnya akan berada ditengah, sementara ketika dimasukan gambar posisi header gambarnya malah kesamping (left).

Kalau template ‘Nubie Banget’ Saya hanya cukup menambahkan parameter align=’center’ secara langsung ke salah satu bagian script header/widget sedangkan untuk template Evo Magz Saya perlu melakukan perubahan/penambahan pada susunan css berikut :

#header-wrapper {
margin:0 auto;
overflow:hidden;
}
.header {
float: left;
width: 50%;
max-width: 500px; /* Ukuran besar kecilnya header */
margin: 15px 0;
margin-left: 227px; /* Nilai margin left ini yang saya tambahkan */
}

[ LIHAT DEMO ]

Kalau kita dalam susunan css .header diatas terlihat bahwa selain kita bisa mendefinisikan posisi header (left) juga disana kita bisa menentukan ukuran/besar kecilnya header gambar dengan cara merubah nilai parameter width: 50%; max-width: 500px; (nilai sudah dirubah)

Sebanarnya Saya kurang mengerti mengapa ketika Saya menambahkan nilai ‘center’ pada ‘float’ selalu saja tidak bisa sedangkan bila saya tambahkan nilai ‘right’ hasilnya posisi header tersebut jadi berubah ke sebelah kanan, maka dari itu saya coba tambahkan “margin-left:227px; “

Kalau ditanya apa fungsi “margin-left:227px; “ Saya tidak tahu, tapi intinya itu untuk menggeser posisi header gambar atau sebagai batas dari sebalah kiri header dengan nilai 227px. Silahkan Anda coba rubah – rubah sendiri nilainya.

Perlu diketahui juga bahwa di bagian header template Evo Magz terdapat 2 widget yaitu widget untuk header gambar atau judul blog serta header yang kedua disebelah kanannya adalah biasadigunakan untuk iklan. 

Widget sebelum dihapus

 

Jadi sebelum merubah posisi headernya ke tengah, Saya melakukan penghapusan terhadap widget ‘header-right’, untuk css yang berhubungan dengan ‘header-right’ tidak pelu dihapus, ingat jangan sampai salah hapus. Yang dihapus adalah script berikut :

<b:section class='header-right' id='header-right' maxwidgets='1' showaddelement='yes'/>

Bila dihapus nanti widget yang ada disebelah kanan header akan menghilang, Anda bisa mengeceknya di "Tata Letak"

Widget Sesudah Dihapus

Kenapa dihapus ? Logikanya seperti ini, kalau nanti kita geser header ke tengah tentunya juga akan ikut menggeser header-right, lagi pula widget tersebut tidak perlu digunakan bila Anda ingin merubah posisi header pertama ke bagian tengah.

Tapi yang jadi masalah disini adalah ketika layar browser diperkecil ke ukurannya sekitar 400px, posisi header malah tidak terlihat dan bergeser ke sebalah kanan. Sementara ketika dilakukan inspek elemen oleh firefox, nilai css-nya masih mengikuti nilai berikut :

.header {
float: left;
width: 50%;
max-width: 500px; /* Ukuran besar kecilnya header */
margin: 15px 0;
margin-left: 227px; /* Nilai margin left ini yang saya tambahkan */
}

Jadi intinya mungkin penggunaan “margin-left” ini tidak cocok digunakan ketika ukuran layar browsernya kecil. Lalu supaya posisinya sesuai harus bagaimana ? Nah itu juga lagi Saya pikirkan atau silahkan Anda mikir sendiri,  karena Saya kurang expert dalam bidang ini, karena ini memang hanya Iseng - iseng Modifikasi Template Evo Magz

Selamat mencoba dan semoga berhasil

#update 
Cara diatas sebenarnya kurang begitu memuaskan, karena tampilan headernya kurang responsive karena terpengaruh dengan batas margin yang ditentukan sebelumnya. Untuk mengatasi Hal tersebut Anda bisa menggunakan Cara Merubah Header Evo Jadi Ke Tengah Responsive Bag II 

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple