Cara Merubah Header Evo Jadi Ke Tengah Responsive Bag II

Pada kesempatan sebelumnya Saya pernah menjelaskan tentang Cara Merubah Posisi Header Gambar Template Evo Magz ke Tengah , dengan mengatur batas margin kiri atau jarak header dari samping kemudian juga melakukan penghapusan terhadap widget header-right. 

Ternyata setelah Saya pelajari kembali,  cara sebelumnya cukup menggelikan dan terkesan buang - buang waktu, dan hasilnya kurang memuaskan karena pada saat layar diperkecil tampillan headernya justru kurang responsive. Akhirnya sekarang Saya coba kembali Iseng - Iseng Modifikasi Template Evo Magz lagi

Anda juga sebenarnya tidak perlu menghapus bagian widget header right, tapi bila dihapus pun juga tidak mengapa, tapi bila nanti posisi header ingin dikembalikan ke semula, tentunya Anda harus melakukan penambahan widget lagi, maka dari disini Saya tidak akan menghapus widget header right, namun justru disini Saya akan memanfaatkan class header-right  dan ditambahkan ke class header

Merubah posisi header template evo magz jadi ke tengah caranya cukup gampang, berikut adalah langkah - langkahnya

1. Masuk ke blog masing - masing dan lakukan edit HTML
2. Tekan CTRL+F masukan kata header dan tekan enter
3. Hentikan pencarian bila sudah ditemukan baris berikut <header id="header-wrapper"><b:section class="header section" id="header">
   
4. Ganti script <b:section class="header section" menjadi <b:section class="header-right" seperti yang terlihat pada gambar diatas
5. Bila berhasil nanti kurang lebih tampilannya seperti yang terlihat pada gambar dibawah ini
   

 [ LIHAT DEMO ]

Karena sekarang sudah menggunakan class header-right, maka bila Anda ingin mengatur posisinya supaya terlihat ditengah Anda perlu mencari baris atau selektor  header-right seperti dibawah ini

.header-right {
    float: right;
    padding: 0;
    overflow: hidden;
    margin: 15px 0;
    width: 72.8%;
    max-width: 728px;
}

Disini Saya hanya merubah bagian marginnya saja menjadi  seperti ini 

.header-right {
    float: right;
    padding: 0;
    overflow: hidden;
    margin: 15px 25px 1px;
    width: 72.8%;
    max-width: 728px;
}

Silahkan Anda coba otak - atik sendiri sesuai dengan keinginan, selamat mencoba

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