Blogger
Newbie still fight, artikel kali ini tentang Cara Membuat Header Blog Menjadi
Responsive. Untuk membuat dan mengubah header blog menjadi Responsive dan full
screen kita hanya memberi tag div class pembatas pada tag div header . Pada
dasarnya header wrapper dibuat widht 100% dengan menambahkan kode pemotongnya
menjadi 980 pixel atau sesuai selera sobat .
Tidak
ada salahnya bila sobat newbie melakukan eksperimen dan membuat header blog
sobat menjadi full screen dan Responsive. Untuk lebih jelasnya silahkan sobat ikuti
tips 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 Membuat Header
FullScreen dan Responsive di Blog
1.
Masuk ke Template >> Edit HTML
2.
Cari kode div header , misalnya #header-wrapper
, Sobat rubah widht-nya menjadi 100% atau 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 [ letakkan
kode dibawah ini diatas ] .pembatas {max-width:1000px;margin:0
auto;}
4.
Letakan HTML-nya agar 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
Cara membuat header blog menjadi responsive dan fullscreen memang sedikit susah bagi Newbie yang belum mengenal css dan html , Blogger Newbie semangatttttttttttt..
Saya akan
lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan
tambahan informasi juga pertanyaan seputar artikel Cara Membuat Header Blog
Menjadi Responsive. Terima kasih dan semoga bermanfaat…..
