Selamat bertemu kembali. Sudah siap beraksi? Sekarang kita lanjutkan belajarnya. Dah bagian 3 kan? Kali ini, kita akan membuat bagian Header dan Menunya. Silahkan buka kembali desain template Anda dengan phpDesign.
Silahkan copy kode berikut dan letakkan di bawah kode #kotakblog (lihat gambar di bawahnya):
Kalau sudah, tambahkan kode untuk Header dan Menunya. Caranya sama dengan postingan sebelumnya. Silahkan pindahkan kursor ke bawah, tempatnya di bawah kode <body>. Pertama, untuk Header silahkan Anda tambahkan kode seperti ini: <div>. Tekan SPASI setelah tanda (>) lalu akan muncul pilihan. Silahkan pilih kode id=”” lalu pilih Header. Nih, ada gambarnya di bawah supaya tidak bingung.
Setelah itu, pindahkan kode penutup </div> dan letakkan di bawah Deskripsi Blog. Maka hasilnya akan seperti gambar di bawah ini.
Kedua, silahkan lakukan hal yang sama untuk kode Menu. Sudah paham kan? Oke!!! Hasilnya akan seperti gambar di bawah ini.
Seperti biasa, silahkan klik RUN untuk lihat hasilnya. Kira-kira seperti gambar di bawah.
Untuk area Header dan Menu sudah terbentuk kan? Postingan Membuat Template Desain Sendiri (Bag. 3) sudah selesai. Tunggu postingan selanjutnya Membuat Template Desain Sendiri (Bag. 4). Oke!!!
Silahkan copy kode berikut dan letakkan di bawah kode #kotakblog (lihat gambar di bawahnya):
*/-----Untuk Header-----*/
#header {
padding-top: 15px;
width:930px;
height:150px; /*tinggi area header*/
border:1px solid #000;
background:transparent;
}
*/-----Untuk Menu-----*/
#menu {
overflow: hidden;
width: 100%; /*panjang menu*/
font-size: 16px; /*ukuran font*/
letter-spacing: 1px;
border-bottom: 1px inset;
border-bottom-width: thick;
padding-bottom: 5px;
}
Kalau sudah, tambahkan kode untuk Header dan Menunya. Caranya sama dengan postingan sebelumnya. Silahkan pindahkan kursor ke bawah, tempatnya di bawah kode <body>. Pertama, untuk Header silahkan Anda tambahkan kode seperti ini: <div>. Tekan SPASI setelah tanda (>) lalu akan muncul pilihan. Silahkan pilih kode id=”” lalu pilih Header. Nih, ada gambarnya di bawah supaya tidak bingung.
Setelah itu, pindahkan kode penutup </div> dan letakkan di bawah Deskripsi Blog. Maka hasilnya akan seperti gambar di bawah ini.
Kedua, silahkan lakukan hal yang sama untuk kode Menu. Sudah paham kan? Oke!!! Hasilnya akan seperti gambar di bawah ini.
Seperti biasa, silahkan klik RUN untuk lihat hasilnya. Kira-kira seperti gambar di bawah.
Untuk area Header dan Menu sudah terbentuk kan? Postingan Membuat Template Desain Sendiri (Bag. 3) sudah selesai. Tunggu postingan selanjutnya Membuat Template Desain Sendiri (Bag. 4). Oke!!!