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 */
}
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
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
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
dengan penjelasan kang ahmad saya jd faham sdikit tentang merubah" template.. boleh juga tips kang ahmad dipke nih..hehe ^.^ soalnya mah saya belum bisa ngerubah" beginian :(
ReplyDeleteMembaca artikel ini membuat saya sedikit paham tentang tata cara merubah template tetapi saya belum pahm betul karena saya baru pemula jadi blogger pun belum genap 1bln :(
ReplyDelete