Cara Membuat Header FullScreen Responsive di Blog

Ditulis oleh: -

Membuat sebuah header dengan widget di sebelahnya tidak lah terlalu sulit, karena hanya bermodalkan beberapa bagian divisi dan 2 section saja kita sudah dapat membuat sebuah Header yang Responsive. Header yang akan saya bahas saat ini yaitu header yang berada di posisi paling atas, tidak melayang, terdapat widget di sebelahnya, dengan perbandingan widget dan header yaitu 6:4.

Cara Membuat Header FullScreen Responsive di Blog

  1. Letakkan CSS berikut tepat di atas ]]</b:skin>
  2. /* Header */ #header-wrapper{width:100%;overflow:hidden;background: rgba(252, 252, 252, 0.74);padding:10px 0; border-bottom: 1px solid #eee;} #header-kiri{float:left;max-width:40%;overflow:hidden;} #header-kanan{float:right;max-width:60%;overflow:hidden;} #header-kanan img{max-width:100%;} .header .widget{padding:5px;} .description { margin: 0px; font-size:13px; } .title { font-size: 22px; margin: 0px; }.pembatas{max-width:1000px;margin:0 auto;}

  3. Letakkan HTML berikut tepat di bawah <body>
  4. <header id='header-wrapper'> <div class='pembatas'> <b:section class='header' id='header-kiri' maxwidgets='1'><b:widget id='Header1' locked='true' title='(Header)' type='Header'></b:widget> <b:section class='header' id='header-kanan' maxwidgets='1'/> </div> </header>
*nb: ubah angka berwarna merah menjadi ukuran width template kamu

18komentar:

  1. Wah mantap gan, tapi sayang cuma bagian header aja, kalau bisa sih biar lengkap gan. Thanks

    ReplyDelete
  2. PERTAMAX!
    wah keren mas, artikel updatenya makin mantab!
    - salam damai

    ReplyDelete
  3. nyimak sob!, makasih sdh berbagi *smile

    ReplyDelete
  4. Ternyata sangat simpel ya sob UTk membuat template jadi responsive

    ReplyDelete
  5. info yang sangat menarik gan

    ijin follow gan,n di tunggu follbacknya juga :D

    ReplyDelete
  6. wah mantap nih sob, tapi saya sudah nggak pake lagi nih template. agak susah banget di design ^_^

    ReplyDelete
  7. Patut dicoba nih,jangan jera buat menshareya ?
    di tunggu sharenya ^_^

    ReplyDelete
  8. waduh ane terlambat datang, salam damai mas :D

    ReplyDelete
  9. makasih sob nambah ilmu lagi cara membuat header fullscreen responsive, keren keliatannya :)

    ReplyDelete
  10. tinggal merubah px menjadi %, sehingga memudahkan dalam proses pembuatan responsive

    ReplyDelete
  11. Hehe mantap kali nih ..saya coba ah mudah-mudahan sukses .. maklum newbie sob

    ReplyDelete
  12. baru tau ane gan, makasih infonya


    berkunjung balik ke blog Bayu Setiawan ya, thx :)

    ReplyDelete
  13. Faktor yg mendasari untuk responsive itu apa?

    ReplyDelete
  14. Kembali lgi nih mampir keblog agan,,,kalo membuat widget responsif ada gak gan ?
    soalnya klo header sih saya gak ada aja blog saya...

    ReplyDelete