Cara Membuat Header Blog Jadi FullScreen & Responsive Cara Membuat Header Blog Jadi FullScreen & Responsive - mizipediacom mizipediacom: Cara Membuat Header Blog Jadi FullScreen & Responsive

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Membuat Header Blog Jadi FullScreen & Responsive

Thursday, 13 April 2017




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.
Lihat Juga