Build Template Blog - Header Wrapper

Setelah membuat sebuah blog sederhana yang baru bisa digunakan untuk membuat sebuah postingan dan sudah bisa berinteraksi di dunia maya. Tapi sayangnya untu bisa berinteraksi didunia maya, sebuah blog harus memiliki design yang menarik. Bukan hanya sebuah kontent (isi) blog yang perlu diperhatikan, tetapi design yang indah dan menarik juga perlu diperhatikan.

Karena kita baru saja memiliki sebuah blog yang hanya dapat digunakan untuk posting yang hanya berisi sebuah widget posting dan belum memiliki header, sidebar dan kelengkapan lainnya dari sebuah blog (template kosong). Maka langkah berikutnya adalah membuat header agar kita bisa mengukur berapa lebar halaman posting dan sidebar.

Untuk lebih jelasnya lebih baik kita lanjut ketahap pembuatan header ini, langkah2nya sebagai berikut :

1. Login ke Dashboard blog anda.
2. Pilih Template > Edit Template > Proceed
3. Letakan kode dibawah ini tepat dibawah navbar, agar widget dapat tersusun rapi.

<!-- Outer-Wrapper dan Header Ekman  -->
<div id='outer-wrapper'>
<div id='wrap2'/>
</div>
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Template Demo (Header)' type='Header'/>
</b:section> </div></div>
<!-- End Outer and Header berlanjut kepengaturan CSS nya -->

<!-- CSS Outer and Header Ekman -- >
<style type='text/css'>
#header-wrapper {
width:1010px;
height:280px;
margin-bottom:2px;
padding-bottom:15px;
background:#FFFFFF;
border:1px solid #E0E0E0;
font:22px Verdana;
font-weight:bold;
color:#FFFF00;
</style>
<!-- End CSS Outer and Header -- >

Untuk diperhatikan bahwa penulisan kode yang berwarna merah merupakan kode saya dalam menandai bagian2 yang saya buat. Anda dapat juga memberikan tanda dengan kode anda sendiri asalkan kode tersebut diawali dengan <!-- dan diakhiri dengan -->
Untuk kode berwarna biru merupakan lebar dan tinggi header, yang dalam contoh gambar sudah saya berikan background dengan ukuran image 1010px x 280px.
Bagian berwarna kuning adalah warna huruf pada judul blog kita.


Simpan template anda dan jika perlu anda backup agar pada langkah2 berikutnya template anda aman jika terjadi kesalahan penulisan dan penempatan kode.

Silahkan cari cara pembuatan dan kreasi lainya tentang basic template blog. Untuk selanjutnya pembahasan selanjutnya kita akan langsung pada tips dan trick berkreasi di design template blog.

Ranking: 5