selamat datang di cyser blog: cara membuat template blog tanpa software ( bagian 1 )

Saya waktu itu pengen banget bikin template blog. Tapi nyari di google tutorialnya susah didapetin. Telusur terus beli buku akhirnya saya dapet juga ilmunya saya akan bagi nih.. silakan ikuti.. ( bukan hasil copas )
Ketika pertama kali membuat blog, kita akan mendapatkan tampilan blog standar, yang biasa-biasa saja. Sebenarnya kita bisa saja merubah tampilan template sesuai keinginan. Tetapi kita memerlukan pengetahuan tentang HTML… pada intinya file HTML yang akan kita buat hampir sama dengan pembuatan web dengan dreamweaver. Namun bedanya tidak banyak tag dan atribut HTML yang digunakan pada blog. Sehingga kita bisa mudah mempelajarinya.
Setiap halaman dalam sebuah blog tampak sama oleh karena memang umumnya layanan blog hosting memerlukan satu template untuk setiap halamannya. Ayo kita mulai rancang template blog.

Pembuatan template terbagi atas beberapa bagian, kita akan membuat tipe 3 kolom. Mari kita focus satu persatu, dimulai dari bagian Head & body, banner diikuti dengan kolom arsip, isi dan profil.

1.    HEAD & BODY

Kalau agan siap dan sudah mempunyai bekal pengetahuan HTML. Ikuti langkah berikut.

1.    Buatlah bagian dasar kode HTML : bagian kepala dan badan.
Jadi, untuk awal anda punya kode HTML seperti di-bawah

<html>
<head></head>
<body></body>
</html>

2.    Simpanlah file kode html ini dengan nama, sebagai contoh ; template.htm di direktori c:\situsku ( terserah aja mau taruh dimana ).

Untuk melihat tampilan html ini di browser, buka browser anda dan masukkab c:\situsku\template.htm ke kotak alamat. Contoh : buka Mozilla firefox, ketikkan direktori penyimpanan template yang anda buat seperti yang saya taruh di drive C:/     c:\situsku\template.htm
Untuk saat ini anda akan melihat halaman kosong saja. Karena kita belum memasukkan apapun ke halaman template ini.

BANNER.

Banner terletak pada bagian badan html. Jika anda ingat bab sebelumnya, maka anda dengan mudah membuat kode html ini.

1.    Masukkan kode untuk membuat tabel sebesar 800 pixel, tanpa border yang hanya terdiri dari 1 sel saja.

                             <table border=”0” width=”800”><tr><td></td></tr></table>

2.    Jangan lupa, anda memfokuskan konten di-bagian badan. Siapkanlah sebuah file gambar untuk di-jadikan banner situs anda. Dalam contoh ini, saya menyiapkan gambar banner JPEG berukuran 671X230 pixel dan diberi nama banner.JPEG dan disimpan dalam sub-direktori images. File gambar ini ditempatkan di direktori yang sama dengan template.htm yang saya buat di bab lalu. Untuk menyisipkan gambar ini, buatlah kode html dibawah

                                <img src=”images/banner.jpg” width=”671” height=”230”>

3.    Seperti sudah dibahas di bab sebelumnya, ada baiknya untuk menentukan lebar dan tinggi gambar. Walaupun seukuran aslinya, kode html yang lengkap untuk gambar banner ini adalah :

                              <img src=”images/banner.jpg” width= “671” height=”230”>

4.    Jadi kode html anda setelah disisipkan banner menjadi seperti berikut

                                 <html>
                                 <head></head>
                                 <body>
                                 <table border=”0” width=”800”><tr><td><img src=images/banner.jpg” width=”671”
                                  Height=”230”>
                                  </td></tr></table>
                                  <body>
                                   <table border=”0” width=”800”><tr><td>
                                   <img src=”images/banner.jpg” width=”671” height=”230”>
                                   </td></tr></table>
                                   </body>
                                   </html>

           Apabila anda buka dalam Mozilla, tampilan akan Nampak seperti di bawah


          Udah dulu ya gan capek ngetiknya, nanti saya bahas bagian ke2 tentang KOLOM dan memasukkan
           template blog buatan kita sendiri ke blog.

cara membuat template blog tanpa software ( bagian 1 )

1 komentar: