Tata letak header

setelah kita mengetahui isi dan tata letak pada sebuah template maka selanjutnya kita mengunakan Notepad Start > All program > Accessories > Notepad > ok
lalu pastekan kedalam notepad, ikuti langkah berikut file > Save as > file name (......xml ) > save as type (All file) > encoding (UTF-8) > ok

GAMBAR 1 (membuat template)

setelah anda save notepad tersebut lalu cari dimana letak anda menyimpan buka maka hasilnya akan seperti ini :

GAMBAR 2 (membuat template)

itu adalah bagian dari Template yang kosong, jika di edit template pada blogger maka akan terjadi eror karena itu hanya baru bagian yang kosong saja belum ada perintah atau memanggil, bagaimana caranya agar kita membuat template yang sedang kita mau ubah adalah bagaimana kita membangun sebuah template sesuai dengan keinginan kita. seperti Gambar di bawah ini adalah

GAMBAR 3 (Cara membuat template)

 Template yang ingin kita gunakan. pada dasarnya template memilki lima bagian, yang bagian tersebut membentuk blog anda dengan berbagai gaya bagian kelima tersebut adalah

1. Header
2. Sidebar
3. Mainbar
4. Footbar
5. Footer


1. Header adalah bagian pertama dari website Anda yang pengunjung lihat. Maka dari itu header website
1. Dapat memperkenalkan personality unik dari bisnis Anda. Tambahkan logo dan nama dari bisnis Anda.
2. Tambahkan juga tagline atau slogan dan beberapa summary yang menjelaskan apa yang bisnis Anda tawarkan. Sehingga dengan melihat headernya saja pengunjung menjadi tahu.
3. Informasikan mengenai alamat atau nomor handphone bisnis Anda
Informasi di header, dapat diulang pada bagian footer dan dapat ditambahkan dengan bagian lain seperti link menuju social media. 
Di bawah ini adalah contoh header.

GAMBAR 4 (Cara membuat Tempalte)

Di dalam Header terdapat

1. Judul Blog
2. Deskripsi Blog
3. Menambahkan Gambar pada komputer anda dan dapat menyeting langsung di dalamnya

TATA LETAK HEADER DI BLOG

Di dalam sebuah blog terdapat kode HTML dan CSS, di bawah ini adalah Kode HTML Header :

<header> sebagai awalan tag dan di akhiri dengan </header>, ,

pada sebuah Tag <header> s/d </header> adalah TATA LETAK HEADER, Saat ni saya akan menghapusnya Agar bisa membedakan posisi tata letak, berikut gambar yang saya mau hapus:

GAMBAR 5 (cara membuat template)

Setelah saya menghapus TATA LETAK HEADER, maka hasilnya seperti di bawah ini :

GAMBAR 6 (cara membuat template)

Peletakan TATA LETAK HEADER ada di bawah </head>, jika anda terus mengamati maka anda akan sama dengan apa yang saya kerjakan di atas.

LETAK POSISI KODE HEADER

kode header di dalam Tag <header> s/d </header> adalah :

</div> <b:include name='description'/></div> </b:if><b:else/>  <!--Show the image only--> <div id='header-inner'><a expr:href='data:blog.homepageUrl' style='display: block'>          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <!--Show the description--><b:if cond='data:imagePlacement == quot;BEFORE_DESCRIPTION&quot;'> <b:include name='description'/> </b:if></div> </b:if> <b:else/> <!--No header image --! <div id='header-inner'> <div class='titlewrapper'><h1 class='title'><b:include name='title'/ </h1></div> <b:include name='description'/>    </div></b:if> </b:includable> <b:includable id='description'><div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p>  </div></b:includable>  <b:includable id='title'>  <b:if cond='data:blog.url == data:blog.homepageUrl'>    <data:title/> <b:else/>   <a expr:href='ata:blog.homepageUrl'><data:title/></a> </b:if></b:includable>  </b:widget>      </b:section> </div> </div>  <div class='header-cap-bottom cap-bottom'> <div class='cap-left'/> <div class='cap-right'/>  </div> </div>  </header>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Judul blog anda (Header)' type='Header'>
          <b:includable id='main'>

GAMBAR 7 (cara membuat template)

Kode Html tersebut yang menunjukan Judul blog, diskripsi dll Letak di dalam header, jika saat ini anda masih mengamati dengan cara step bay step ini akan bisa memahami dimana tata letak ini, posting seblumnya pun saya sudah share mengenai tata letak Html yang dimana kita harus isi di dalmnya, tata letak yang salah akan terjadinya eror.

mengenal blog sangat lama tetapi saya baru memahami bahwa di dalam blog pun mendapatkan manfaatnya, bisa di isi dengan artikel atau catatan, pembuat blog bisnis dan lainnya. jika anda seorang pemula ikuti terus, part 3 ini saya menjelaskan suatu contoh pada note pad, anda pun bisa melihat elemen blog lain dengan cara buka blog yang anda simak lalu silahkan anda klik kanan pada mouse anda pilih view page source.
silahkan copy dan masukan kedalam note pad kosong, lalu ikuti caranya di atas, part ini kadang berguna untuk melihat isi dan cara penempatan dan lain-lainnya, saya menguji pada artikel acak-acak template dan ternyata berhasil.

Silahkan isi komentar anda setelah berkunjung