Blog

Membuat Header Responsive

 Apa itu Header dan kegunaannya ? header adalah tempat informasi tentang file yang dibuat di halaman bagian atas (head).

Seperti gambar di bawah ini

Bagaimana cara membuat header ini responsive seperti di bawah ini ?

Baca Juga : Cara membuat footer responsive

Hanya perlu beberapa Langkah untuk membuanya menjadi responsive 
1.Masuk ke Template ( Edit HTML)

    2.Cari code #header-wrapper rubah widht-nya menjadi 100% atau auto . contohnya seperti ini ( pasang kode ini diatas </style>  )

              

      3.Kalau tidak ketemu kode #header-wrapper bisa di cari di CSS

         <b:skin><![CDATA[
          Kode CSS disini letaknya

         </b:skin>

      4.Kemudian kita beri CSS pembatas ( letakkan kode dibawah ini diatas )

           


      5. Letakan HTML-nya agar CSS diatas berfungsi , caranya pada div header kita tambahkan class             pembatas ( temukan div header tambahkan class pembatas dibawahnya )


      6.Silahkan simpan dan lihat template anda.


         Memang kelihatannya susah bagi orang gaptek, tetapi jika anda seorang blogger yang suka mengedit template, membajak template orang, ataupun seorang blogger pemula anda pasti tidak kesusahan.

      7 Comment(s)

      1. julia novella
        December 16, 2015

        kalau sudah mahir membuat yang ginian pasti mudah ya

      2. Doninda Dwi Alfandi
        December 16, 2015

        kode pembatasnya gan,, susah sesuaikannya sama tempalet saya..
        nice info

      3. Hendro Agung
        December 16, 2015

        boleh deh ane coba nanti nih gan hehehe

      4. Ryan Pratama
        December 28, 2015

        iya tentunya.

      5. Ryan Pratama
        December 28, 2015

        sama-sama gan.

      6. Ryan Pratama
        December 28, 2015

        iya gan silahkan di coba.

      7. Nisa Rahmah
        October 6, 2016

        Muncul gini gan, di peringatan, ini gimana ya?

        "More than one widget was found with id: Header1. Widget IDs should be unique."

      Write a comment