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 saat headernya tidak menambahkan gambar maka textnya akan berada ditengah, sementara saat dimasukan gambar posisi header gambarnya malah kesamping (left).

Kalau template ‘Nubie Banget’ Saya spesialuntuk cukup menambahkan parameter align=’center’ secara pribadi ke salah satu cuilan script header/widget sedangkan untuk template Evo Magz Saya perlu melaksanakan perubahan/penambahan pada susunan css diberikut :

#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 menambahkan */
}

[ LIHAT DEMO ]

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

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

Kalau ditanya apa fungsi “margin-left:227px; “ Saya tidak tahu, tapi pada dasarnya 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 cuilan header template Evo Magz terdapat 2 widget yaitu widget untuk header gambar atau judul blog serta header yang kedua disebelah kanannya ialah biasadigunakan untuk iklan. 

Widget sebelum dihapus

 

Jadi sebelum merubah posisi headernya ke tengah, Saya melaksanakan abolisi terhadap widget ‘header-right’, untuk css yang bekerjasama dengan ‘header-right’ tidak pelu dihapus, ingat tidakboleh hingga salah hapus. Yang dihapus ialah script diberikut :

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

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

Widget Sesudah Dihapus

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

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

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

Jadi pada dasarnya mungkin penerapan “margin-left” ini tidak cocok dipakai saat ukuran layar browsernya kecil. Lalu supaya posisinya sesuai harus bagaimana ? Nah itu juga lagi Saya pikirkan atau silahkan Anda mikir sendiri,  sebab Saya kurang expert dalam bidang ini, sebab ini memang spesialuntuk Iseng - iseng Modifikasi Template Evo Magz

Selamat mencoba dan biar berhasil

#update 
Teknik diatas bekerjsama kurang begitu memuaskan, sebab tampilan headernya kurang responsive sebab terpengaruh dengan batas margin yang ditentukan sebelumnya. Untuk mengatasi Hal tersebut Anda sanggup memakai Teknik Merubah Header Evo Kaprikornus Ke Tengah Responsive Bag II 

Share :