QUOTE
Yang umum diyakini, membuat blog itu susah.
Apalagi menjadikannya untuk mencari uang di internet.
Tapi ketahuilah, itu hanya mitos!
Temukan inspirasi dan semangat baru di sini
terbaru

Cara Membuat Elemen Header pada Template Blog

: 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.

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

Copyrights @ blogernas ■ Desember 2015 - Erianto Anas