#Bacalah, Cara membuat gambar di blog bisa penuh
Dalam hal ini mengindikasikan informasi yang disampaikan secara akurat
masukkan script iklan disini 2
Sering kirim gambar di postingan blog atau tulisan.
Tentu ingin gambarnya tampil penuh, sudah tahu caranya? Lakukan tahap berikut , pahami dulu apa itu header full screen dan responsive , nah jika Anda sudah paham dan tertarik untuk membuatnya silahkan simak tutorialnya berikut :
Cara Header FullScreen dan Responsive di Blog
- Masuk ke editor template [ edit html ]
kemudian temukan kode div header , misalnya #header-wrapper , maka kita rubah widhtnya tersebut menjadi 100% maupun auto .
[ 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 harus sering melakukan ubah tampilan dan jika sudah terbiasa dan sering edit template insya Allah akan berhasil !!
** Silahkan mencoba semoga berhasil
Cara Header FullScreen dan Responsive di Blog
- Masuk ke editor template [ edit html ]
kemudian temukan kode div header , misalnya #header-wrapper , maka kita rubah widhtnya tersebut menjadi 100% maupun auto .
[ 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 harus sering melakukan ubah tampilan dan jika sudah terbiasa dan sering edit template insya Allah akan berhasil !!
** Silahkan mencoba semoga berhasil
