Cara Membuat Elemen Header pada Template Blog

Cara Membuat Elemen Header pada Template Blog



Setelah anda ikuti Cara Membuat Elemen Outer Wrapper, sekarang mari kita lanjutkan bagaimana pula cara membuat elemen header pada template blog dari awal (jangan lupa pahami juga Fungsi Penting Header pada sebuah Blog).

Bagaimana caranya?
Sama seperti sebelumnya sekarang silahkan login dulu ke dasbor Blogger anda. Kemudian lanjutkan membuka form Edit HTML Template blog. Kemudian script yang anda perlukan untuk membuat elemen header ini adalah:



<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='blogernas  (Header)' type='Header'>
</b:widget>
</b:section>
</div>



Lalu bagaimana cara menyisipkan semua kode ini pada template yang anda rancang? Prinsip dasarnya adalah, semua kode ini harus berada pada area body tapi bagian paling atas sesudah elemen Outer Wrapper. Karena itu letakan saja tepat dibawah tag <div id='outer-wrapper'>. Lengkapnya akan menjadi seperti ini:



<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[]]></b:skin>
<style type='text/css'>
#outer-wrapper{
width:1000px;
margin:0 auto;
font-size:15px;
}
#content-wrapper{
width:1000px;
}
#main {
float: left;
width: 600px;
padding: 20px;
border-left: 1px solid #ddd;
}
</style>
</head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='blogernas  (Header)' type='Header'>
</b:widget>
</b:section>
</div>

<div id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
<div class='clear'/>
</div>
</body>
</HTML>



Kemudian untuk mengatur desain tampilannya, tambahkan kode CSS berikut tepat dibawah kode <style type='text/css'> :


#header-wrapper{
background:#333;
height:120px;
width:1000px;
}
#header-inner{
padding-left:30px;
}
#header,.title2{
text-align:left
}
#header h1,.title2{
font-size:50px;
font-weight:500;
color:#fff;
margin:0;
padding:20px 10px 0 0;
}
#header a,.title2 a{
color:#f60;
text-decoration:none}
#header a:hover,.title2 a:hover{
color:#fff
}
#headerlogo{
float:right;
display:inline;
overflow:hidden;
}
#header .description{
color:#999;
font-size:10px;
letter-spacing:10px;
margin-top:-5px;
padding-bottom:50px}



Sehingga total akhir kodenya akan menjadi seperti ini:



<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[]]></b:skin>
<style type='text/css'>
#header-wrapper{
background:#333;
height:120px;
width:1000px;
}
#header-inner{
padding-left:30px;
}
#header,.title2{
text-align:left
}
#header h1,.title2{
font-size:50px;
font-weight:500;
color:#fff;
margin:0;
padding:20px 10px 0 0;
}
#header a,.title2 a{
color:#f60;
text-decoration:none}
#header a:hover,.title2 a:hover{
color:#fff
}
#headerlogo{
float:right;
display:inline;
overflow:hidden;
}
#header .description{
color:#999;
font-size:10px;
letter-spacing:10px;
margin-top:-5px;
padding-bottom:50px
}

#outer-wrapper{
width:1000px;
margin:0 auto;
font-size:15px;
}
#content-wrapper{
width:1000px;
}
#main {
float: left;
width: 600px;
padding: 20px;
border-left: 1px solid #ddd;
}
</style>
</head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='blogernas  (Header)' type='Header'>
</b:widget>
</b:section>
</div>

<div id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
<div class='clear'/>
</div>
</body>
</HTML>



Jika sudah, jangan lupa klik tombol Simpan template seperti dibawah ini.


Cara Membuat Elemen Header pada Template Blog


Setelah itu coba lihat dulu pada Tata Letak, apakah penambahan elemen Header ini sudah berhasil atau belum.


Cara Membuat Elemen Header pada Template Blog

Cara Membuat Elemen Header pada Template Blog



Nah jika sudah seperti gambar diatas, sudah muncul gadget headernya, berarti proses penambahan elemen ini sudah berhasil. Jika anda ingin membagi 2 space hader ini bisa anda pelajari pada: Cara Membagi Header Blog Menjadi 2 Kolom. Selanjutnya untuk melengkapi rancangan template anda, mari kita lanjutkan pada penambahan elemen sidebar blog.
3 komentar
avatar
John HS 22 Juli 2018 21.08

Unfaedah konten, masa codenya gak bisa dicopy. -_-

Balas
avatar
Wisnu Azis 1 September 2018 01.47

mas bagian widget header h1 nya error gimana mas zzzzz

Balas
avatar
Erianto Anas Admin 1 September 2018 07.41

Apa yang anda lakukan sebelumnya terhadap template anda sampai jadi error? Kalau kode dasar dari template, biasanya tidak pernah error pada bagian (tag heading) headernya

Balas
Komentar yang tidak relevan, jorok, spamming dan promosi link akan dihapus

Desember 2015 - blogernas