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">
    merubah header evo ke tengah bag I
  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
    merubah header evo ke tengah

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

12 Responses to "Cara Merubah Header Evo Jadi Ke Tengah Responsive Bag II"

  1. bisa nih saya oprek buat blog saya yang baru. :D

    ReplyDelete
  2. Makasih, bisa menambah wawasan dalam hal html

    ReplyDelete
  3. kang mau nanya kalau cara mngatur posisi header agar bisa sejajar sama leader blog gimana yah? saya kesulitan mengaturnya, kalau dihomepage sih sejajar tapi kalau buka salah satu postingan jadi agak naik keatas, binun sayah...

    ReplyDelete
  4. ternyata hanya marginnya yang di rubah, kirain perlu juga kode text-alig:center nya

    ReplyDelete
  5. membaca hal-hal yang seperti ini saya bingung mau komen apa, soalnya saya gak paham mengenai hal begituan mas, jadi juma bisa nyimak sambil ngopi, biar mantep

    ReplyDelete
  6. Tanya gan.cara merubah urutan angka di bagian terpopuler menjadi bulet" gmn? Klo aslinya kotak.
    Saya lihat d laptop-butut.d tunggu jawabanya

    ReplyDelete
    Replies
    1. ah tadinya juga bulet,, situ yang rubah sendiri,,, yah tinggal cari baris ini
      .PopularPosts ul li::before lalu tambahin border radius... XD

      Delete
  7. Klo headernya supaya posisinya di tengah hanya pada versi mobile saja, gimana mas.. Tapi versi dekstop tampilannya tetap seperti aslinya.

    ReplyDelete
    Replies
    1. tinggal atur di media querynya, disana kan nanti pasti ada padding atau margin yang bisa diatur...

      Delete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin