Header blog berisi judul dan biasanya juga disertai deskripsi singkat dari blog yang anda buat. Header blog bentuknya bisa bermacam-macam, ada yang dibuat 2 kolom, kolom kiri untuk judul dan kolom kanan untuk iklan. Dan ada juga yang dibuat satu kolom, sehingga penuh untuk judul saja. Ada header yang dibuat statis atau dengan kata lain tidak dapat dirubah dan ada juga yang dibuat dinamis, yaitu dapat dirubah kontennya. Pembuatan header dinamis ini menggunakan widget blog. Biasanya terdapat 2 widget bersebelahan, yaitu widget kiri untuk judul dan widget kanan untuk iklan. Di bawah ini adalah contoh header dari blog All inWish
Pada postingan ini admin akan membahas membuat header dengan iklan, tetapi iklan ini opsional bisa ditambahkan dan bisa tidak. Kode yang dibutuhkan adalah kode html dan css.
Sebelumnya buat tag header seperti berikut
<header id='header-all'></header>
Salin kode di bawah ini di dalam kode di atas kode </header>
<div class='clear'/>
<div id='judul'>
<b:section class='titling' id='titling' maxwidgets='1'/>
</div>
<div id='iklan'>
<b:section class='ads' id='ads' maxwidgets='1' showaddelement='yes'/>
</div>
Setelah itu kita atur kode css yang diperlukan
#header-all{width:80%; margin:0 auto;}@media screen and (max-width:800px) {#header-all{width:100%;}}
#judul{
margin-top:5px;
margin-left:0.8em;
float:left;
height:40px;
width:25%;
}@media screen and (max-width:800px) {#judul{margin:20px auto 0 auto; text-align:center; width:100%; clear:both;}}
#iklan{
margin-top:5px;
float:right;
width:728px;
height:90px;
}@media screen and (max-width:800px) {#iklan{width:100%; display:block;}}
Salin kode css tersebut di atas kode
<b:skin><![CDATA[
Demikian cara membuat header blog. Jika ada yang ingin ditanyakan atau mengalami kebingungan pada saat mencobanya, dapat ditanyakan melalui kolom komentar di bawah.
Related Posts