Cara Membuat Header Blog Jadi FullScreen & Responsive




Cara Membuat Header Blog Jadi FullScreen & Responsive

Cara Membuat Header Blog Jadi FullScreen & Responsive


 Untuk anda yang ingin membuat dan mengubah header blog anda menjadi responsive dan full screen  cara membuatnya sangatlah mudah , ini karena kita hanya memberi sebuah tag div class pembatas pada bagian tag div header . Jadi intinya header wrapper kita buat widht 100% dan kita akan tambahkan kode pemotongnya menjadi 980 pixel atau bisa juga sesuai selera anda .

Blog yang responsive sangat di anjurkan untuk kita miliki, apalagi anda yang ingin mendaftarkan blognya ke google adsese, Nah jika anda memang ingin membuat nya blog anda menjadi full screen dan responsive, maka terlebih dahulu anda bisa melihat demo gambar di bawah ini.

JIka anda sudah paham apa itu header full screen dan responsive , dan tertarik untuk membuatnya silahkan anda ikuti penjelasan  berikut di bawah ini :

Cara Membuat Header FullScreen dan Responsive di Blog

  1. Silahkan anda masuk ke editor template [ edit html ]
  2. Dan anda bisa mencari kode div header , misalnya #header-wrapper , anda rubah widhtnya tersebut menjadi 100% maupun auto . contohnya seperti code di bawah ini ( anda pasang kode ini diatas </style> )
    #header-wrapper{width:100%;overflow:hidden;background:#FFF;padding:10px 0; border-bottom: 1px solid #eee;} 
  3. Selanjutnya anda beri css pembatas ( silahkan anda pasang kode dibawah ini diatas ) .pembatas{max-width:1000px;margin:0 auto;}
  4. Dan pasang htmlnya supaya css diatas bisa berfungsi , Nah 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. Jika sudah anda klik save template dan anda bisa lihat hasilnya
Demikian penjelasan saya pada hari ini tentang  Cara Membuat Header FullScreen dan Responsive di Blog, saya akui cara membuatnya mungkin tidak mudah khususnya bagi anda yang masih newbi atau pemula yang baru saja mengenal code css dan html , tetapi jika anda memang sudah terbiasa dan sering edit template insya Allah akan berhasil dan mudah memahami cara meletakan posisi css dan html di blog dengan benar , selamat mencoba dan berhasil.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect