Cara Mudah Membuat Header Blog Jadi FullScreen & Responsive

Cara Membuat Header Blog Jadi FullScreen & Responsive - Untuk membuat dan mengubah header blog menjad responsive dan full screen sangatlah mudah , karena kita hanya memberi tag div class pembatas pada tag div header . Intinya tuh header wrapper kita buat widht 100% kemudian kita tambahkan kode pemotongnya menjadi 980 pixel atau sesuai selera sobat .

Jika sobat penggemar responsive maka tak ada salahnya bila sobat melakukan eksperimen dan membuat header atau kepala blog sobat menjadi full screen , hembs . bicara kesana kemari namun sbat belom tahu apa maksudnya ini ? nah untuk lebih jelasnya silahkan sobat cermati gambar dibawah ini dengan baik :

Gimana udah tahukan apa itu header full screen dan responsive , nah jika sobat sudah paham dan tertarik untuk membuatnya silahkan simak tutorialnya berikut :

Cara Mudah Membuat Header FullScreen dan Responsive di Blog

1. Pertama silahkan masuk ke editor template [ edit html ]
2. kemudian temukan kode div header , misalnya #header-wrapper , maka kita rubah widhtnya tersebut menjadi 100% maupun auto . contohnya seperti ini [ pasang kode ini diatas </style> ]

   #header-wrapper{width:100%;overflow:hidden;background:#FFF;padding:10px 0; border-bottom: 1px solid #eee;} 

3. Kemudian kita beri css pembatas [ silahkan pasang kode dibawah ini diatas ] .pembatas{max-width:1000px;margin:0 auto;}
4. Kita pasang htmlnya supaya css diatas berfungsi , caranya pada div header kita tambahkan class pembatas [ temukan div header tambahkan class pembatas dibawahnya ]

   <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>

5. Silahkan simpan template dan lihat hasilnya

Tips menjadikan header blog menjadi responsive dan fullscreen cukup susah bagi anda yang masih newbi mengenal css dan html , namun jika anda sudah terbiasa dan sering edit template insya Allah akan berhasil , silahkan mencoba semoga berhasil

Ditulis oleh Ahmad Suyadi pada tanggal

Tweet