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
- Pertama silahkan masuk ke editor template [ edit html ]
- 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;}
- Kemudian kita beri css pembatas [ silahkan pasang kode dibawah ini diatas ]
.pembatas{max-width:1000px;margin:0 auto;}
- 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>
- 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
8 Komen Cara Mudah Membuat Header Blog Jadi FullScreen & Responsive
hehehe langsung di bungkus ya, tapi aku prakteknya suka gagal, kalau pasang iklan di header valid kayak punya mas gimana ? makasih ya..
silahkan di bungkus mbak 8D kalau gagal di coba lagi mbak , jangan menyerah ,
Oh ya nanti saya buatkan cara memasang iklan yang valid di header
ok makasih yaa..
ikutan bungkus mas, hehe
Kalo template yg udah di bungkus dengan wrapper dengan nilai 980px misalnya dan semua komponen ada di dalam wrapper tersebut, cara diatas gak berlaku mas
Ikut praktekkan juga. Salam Kenal
Kalo untuk wordpress gmn mas?
Web saya sudah responsive tlkecuali headernya saja yang belum. mohon bantuannya n trmksh sebelumnya.
Masih bingung dengan tutorialnya masta
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish