Komponen yang biasa dipakai dalam sebuah website adalah tabel, pada blog juga demikian, apalagi jika anda menggunakan template klasik untuk tampilan blog anda. Seperti pada template 3 kolom buatan Saudara Isnaini yang menggunakan HTML + CSS ini ternyata mudah sekali untuk dipahami, di desain ulang serta sangat mudah untuk menambahkan komponen - komponen lainya. Syarat pertamanya anda harus sedikit tahu tentang HTML, karena komponen pada template ini banyak menggunakan tabel. Untuk memahami tentang tabel bisa Klik disini. Tetapi jika anda ingin cara cepat mengganti baner seperti pesanan saudara andika maka anda bisa ikuti cara berikut :
Tampilan Template 3 kolom
Berikut adalah kode HTML yang berada pada header blog untuk baner
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70"><img src="http://img145.imageshack.us/img145/3215/techbluer1c1dm7.jpg" width="70" height="170"></td>
<td width="515" align="center" valign="top" background="http://img135.imageshack.us/img135/6245/techbluer1c2yh5.jpg"><h1><a href="http://dika-trytothinksmart.blogspot.com/">try to think smart</a></h1>
<h2>pola pikir yang positif dapat memajukan kualitas diri kita</h2></td>
<td width="145"><img src="http://i34.tinypic.com/34q7c0o.jpg" width="145" height="170"></td>
<td background="http://img134.imageshack.us/img134/5853/techbluer1c5fh3.jpg"> </td>
</tr>
</table>
Untuk membuat tabel diawali dengan tag <table> dan ditutup dengan </table> kemudian tabel terdiri dari baris. Baris (row) dalam HTML ditulis dengan <tr> ditutup dengan </tr>. Didalam baris terdapat kolom, dalam HTML ditulis dengan <td> dan ditutup dengan </td>. Jika ditulis urut - urutannya sebagai berikut :
<table>
<tr>
<td>Tabel data pertama</td>
<td>Table data kedua</td>
</tr>
</table>
Saya rasa cukup untuk pengenalan komponen tabel diatas, sekarang kita kembali ke Misi kita yaitu mengganti baner. Sebelumnya anda siapkan dulu gambar untuk baner ukuran 1007px X 200px, terserah anda ingin membuatnya dengan photoshop atau program aplikasi lainnya. Uploud gambar tadi misalnya ke Picasa Web Album kemudian ambil link gambarnya. Sekarang kita liat lagi kode html berikut :
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70"><img src="http://img145.imageshack.us/img145/3215/techbluer1c1dm7.jpg" width="70" height="170"></td>
<td width="515" align="center" valign="top" background="http://img135.imageshack.us/img135/6245/techbluer1c2yh5.jpg"><h1><a href="http://dika-trytothinksmart.blogspot.com/">try to think smart</a></h1><h2>pola pikir yang positif dapat memajukan kualitas diri kita</h2></td>
<td width="145"><img src="http://i34.tinypic.com/34q7c0o.jpg" width="145" height="170"></td>
<td background="http://img134.imageshack.us/img134/5853/techbluer1c5fh3.jpg"> </td>
</tr>
</table>
Bisa dilihat bahwa komponen diatas hanya ada satu baris (tr) yang terdiri dari 4 kolom (td) dengan warna biru, hijau, ungu dan Orange. Jadi sebenarnya gambar baner diatas terdiri dari 4 potongan bagian. Jika anda ingin mengganti dengan satu gambar saja maka didalam "tr" bikin satu "td". Untuk lebih cepatnya cari kode diatas di blog anda, kemudian diganti dengan kode berikut :
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="200" align="center" valign="top"> <img src="http://alamatgambar.jpg" width="100%" height="200"> </td>
</tr>
</table>
Selamat Mencoba
0 komentar:
Posting Komentar