Cara Membuat Navigasi Menu Template Evo Menyatu Kesamping

Kali Saya kembali lagi mencoba Iseng – Iseng Modifikasi Template Evo Magz dimana salah satu hal yang akan sedikit Saya rubah/modifikasi adalah bagian navigasi menunya. Saya kurang tahu bahasa yang benar atau tepat untuk menggambarkan apa yang akan Saya sampaikan ini, tapi yang jelas disini Saya ingin membuat Menu Template Evo Magz menjadi menyatu kesamping, full kesamping layar pengguna, seperti layaknya pada tampilan navigasi menu facebook atau twitter.

Saya ingin membuat menu tersebut menjadi full kesamping tanpa ada pembatas karena Saya pikir bentuk menu navigasi seperti itu lagi ngetrend atau populer, kebanyakan situs – situs besar juga menunya dilebarkan kesamping, menempel mengikuti layar pengguna.

Bila diperhatikan memang menu navigasi template Evo Magz itu ada jarakanya, antara layar pengguna dengan bilah menu seperti yang terlihat pada gambar dibawah ini

posisi menu default template evo magz

Oleh karena itu disini Saya ingin merubahnya, sehingga tidak ada jarak antara menu dengan sisi pinggir layar pengguna, atau nantinya menu jadi lebar menyatu kesamping.

Bagi orang seperti Saya yang sebenarnya tidak paham betul dengan CSS maka ini akan sedikit menyulitkan, tapi setelah beberapa kali mencoba akhirnnya Saya sedikit memahami bagimana cara untuk melakukannya.

Berikut ini adalah Cara Membuat Navigasi Menu Template Evo Menyatu Kesamping
  1. Seperti biasa masuk ke mode edit HTML 
  2. Tekan CTRL+F lalau masukan baris #wrapper pada kolom pencarian 
  3. Cari terus dan temukan sususnan kode ini
    #wrapper {
    margin: 0 auto;
    }
     
  4. Rubah kode tersebut jadi
    #wrapper {
    margin: 0;
    padding: 0;
    }
     
  5. Bila berhasil maka nanti kurang lebih tampilannya akan terlihat seperti pada halaman berikut : LIHAT HALAMAN


Sekarangan selanjutnya supaya bagian postingannya tidak terlalu mepet ke kiri, Anda bisa mengatur bagian post-caontainer. Cari baris berikut

.post-container {
    padding: 15px 15px 0 0;
}
Rubah/tambah baris diatas menjadi seperti berikut
.post-container {
    padding: 15px 15px 0 10px;
}

Sebenarnya tidak dirubah juga tidak apa – apa, hanya kalau Anda “merasa” jaraknya terlalu mepet kesamping maka Anda bisa mengatur kode diatas.

9 Responses to "Cara Membuat Navigasi Menu Template Evo Menyatu Kesamping"

  1. Kalau menurut saya jadinya malah tambah keren ya kang. Nanti kalau pakai template ini mau ikutan nyoba deh. Oh ya, kalau di template selain evo magz apa bisa juga kang?

    ReplyDelete
    Replies
    1. bisa dong,, tinggal atur marginnya,,

      Delete
    2. Kalau bisa nanti mau nyoba deh kang

      Delete
  2. masih belum paham yang mananya yang berubah kang

    ReplyDelete
  3. Sempat lama aku memahami maksud yang disampikan oleh admin.
    Setahuku menu itu halaman laman, umumnya dibawah header.
    Ternyata maksudnya lebar body.
    Wrapper yang aku tahu lebar body.
    Tapi kalau aku lihat dengan komputerku disini tidak ngaruh tetap ada jaraknya.

    ReplyDelete
    Replies
    1. Saya juga udah liat dan coba pake laptop,, ternyata emang kagak ngaruh,, kalau pake layar lcd biasamah,, emang lebarnya jadi full

      Delete
  4. oh kesamping, supaya kayak navigasi di hanphone ya kang

    ReplyDelete
  5. ini pengaturan jarak antara menu navigasi ke navigasi disampingnya nya mas??

    ReplyDelete
  6. Hallo mas, kenapa tinggi evomagz ngga ngepas di layar ya kalo dibuka via PC?

    Kaya di blog ini juga, di bawah footer ada space kosong, begitu juga di atas header, intinya ngga ngepas di layar.

    Saya udah otak atik ga nemu solusi mas, mohon bantuannya, soalnya kalo minta bantuan ke yg jual template jelas ngga dikasih wkwk

    Thank you mas, salam.

    ReplyDelete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin