Latest News

Mengganti Baner pada Template 3 Kolomnya Isnaini

Komponen yang biasa dipakai dalam sebuah website ialah tabel, pada blog juga demikian, apalagi bila 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, alasannya komponen pada template ini banyak menggunakan tabel. Untuk memahami wacana tabel mampu Klik disini. Tetapi bila anda ingin cara cepat mengganti baner menyerupai pesanan saudara andika maka anda mampu ikuti cara berikut :

Tampilan Template 3 kolom





Berikut ialah arahan 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">&nbsp;</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 kegiatan aplikasi lainnya. Uploud gambar tadi misalnya ke Picasa Web Album kemudian ambil link gambarnya. Sekarang kita liat lagi arahan 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">&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. Kaprikornus bahwasanya 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 arahan diatas di blog anda, kemudian diganti dengan arahan 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