-->

Cara Membuat Elemen Header pada Template Blog

Oleh: : Sabtu, Juni 25, 2016
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.
Klik ikon Facebook, Twitter, dan Email jika anda ingin membagikan tulisan luar biasa ini pada teman anda. Lalu klik ikon print jika anda ingin mencetak halaman ini. Dan klik tombol Subscribe untuk berlangganan gratis update terbaru via email

facebook Twitter WhatsApp email Print subscribe
6 komentar
avatar
Lord of Noirful 22 Juli 2018 pukul 21.08

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

Balas
avatar
Wisnu Azis 1 September 2018 pukul 01.47

mas bagian widget header h1 nya error gimana mas zzzzz

Balas
avatar
Erianto Anas Admin 1 September 2018 pukul 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
avatar
hasheemi Rafsanjani 3 Oktober 2020 pukul 09.12

Bagus sekali ilmunya

Balas
avatar
Brok3n link 29 Oktober 2020 pukul 10.12

Terima kasih atas bantuan ini(kenapa gak bisa dikopi!!)

Balas
avatar
Brok3n link 29 Oktober 2020 pukul 10.13

Tapi sekarang bisa make hp aplikasi copy paste diplaystore

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

Desember 2015 - Erianto Anas - blogernas
∟