Mengganti Baner pada Template 3 Kolomnya Isnaini

Komponen yang biasa digunakan dalam sebuah website yakni tabel, pada blog juga demikian, apalagi jika anda memakai template klasik untuk tampilan blog anda. Seperti pada template 3 kolom buatan Saudara Isnaini yang memakai HTML + CSS ini ternyata gampang sekali untuk dipahami, di desain ulang serta sangat gampang untuk menambahkan komponen - komponen lainya. Syarat pertamanya anda harus sedikit tahu tentang HTML, lantaran komponen pada template ini banyak memakai tabel. Untuk memahami wacana tabel bisa Klik disini. Tetapi jika anda ingin cara cepat mengganti baner mirip pesanan saudara andika maka anda bisa ikuti cara berikut :

Tampilan Template 3 kolom

Berikut yakni isyarat 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 sanggup 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">&nbsp;</td>
</tr>
</table>



Untuk menciptakan tabel diawali dengan tag <table> dan ditutup dengan </table> lalu 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, kini 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 acara aplikasi lainnya. Uploud gambar tadi contohnya ke Picasa Web Album lalu ambil link gambarnya. Sekarang kita liat lagi isyarat 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 sanggup 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">&nbsp;</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 bergotong-royong 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 isyarat diatas di blog anda, lalu diganti dengan isyarat 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

Sumber http://www.tips-trick.com