Cara Membuat Tabel Pada Posting Blog

2 komentar Senin, 08 Oktober 2012
Membuat tabel pada posting blog, seperti halnya tabel pada ms Office yang terdiri dari kolom dan baris, yang berfungsi untuk memasukan data dan mengurutkanya sesuai dengan kategori atau kebutuhan sehingga menjadi susunan data yang rapih.

Untuk membuat tabel pada postingan hanya dibutuhkan tiga kode perintah utama seperti <table>, <tr> dan <td>. Penjelasan : <table> perintah untuk membuat tabel <tr> perintah untuk membuat baris dan <td> perintah untuk membuat kolom. Sebagai ilustrasi penerapan kodenya seperti ini :

<table>  
<tr>  
<td>Baris 1 - Kolom 1</td>  
<td>Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>

Kode tersebut akan menghasilkan 2 kolom dan 2 baris data yang belum dipisahkan oleh garis yang membatasi tiap data, seperti tergambar hasilnya seperti ini :

Baris 1 - Kolom 1
Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2


------------------------------------


Untuk menambahkan garis sebagai pemisah antar data yang dimasukan, kalian bisa menambahkan perintah border yang diatur ketebalannya sesuai dengan keinginan, sehingga kodenya menjadi seperti ini :

<table border="5">  
<tr>  
<td>Baris 1 - Kolom 1</td>  
<td>Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>

dan hasilnya pun sudah dengan penambahan garis pemisah antar tiap data, seperti ini :

Baris 1 - Kolom 1Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2
Jika kalian akan melakukan pengisian data pada tabel, sebagai ilustrasi kalian akan memasukan suatu data pada baris pertama kolom pertama, hal pertama yang harus dibuat adalah membuat baris lalu dikuti dengan membuat kolom dan selanjutnya memasukan data, jika akan dilanjutkan mengisi kolom kedua pada baris pertama, yang perlu dilakukan adalah membuat baris dulu kemudian membuat kolom pertama dan selanjutnya membuat kolom kedua lalu mengisi data, inti dari pengisian data pada tabel adalah pertama membuat baris lalu diikuti membuat kolom.

Dari contoh diatas sudah membentuk tabel dengan 2 kolom dan 2 baris dan sudah dipisahkan dengan garis, untuk merapihkan kita bisa memberi jarak antar sel dengan sel yang lain atau memberi jarak teks dalam 1 sel.


------------------------------------


Untuk memeberi jarak antar sel kita bisa menambahkan kode perintah cellspacing dalam table, sehingga kode pengaplikasiannya seperti ini :

<table border="5" cellspacing="15">  
<tr>  
<td>Baris 1 - Kolom 1</td>  
<td>Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>

dengan penambahan cellspacing 15, akan memberi jarak tiap sel sebesar 15px seperti hasil pengaplikasiannya dibawah ini :
Baris 1 - Kolom 1Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2

------------------------------------


Sedangkan untuk memberi jarak teks dalam 1 sel menggunakan kode cellpadding, kode pengaplikasinnya seperti ini:

<table border="5" cellpadding="15">  
<tr>  
<td>Baris 1 - Kolom 1</td>  
<td>Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>

dan hasilnya seperti ini :
Baris 1 - Kolom 1Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2



------------------------------------

selain keteranga perintah border, cellspacing dan cellpadding masih ada kode perintah untuk mempercantik tampilan table seperti width (ukuran table), bgcolor (warna background) dan align (perataan) pengaplikasian kodenya saya gabungkan menjadi seperti ini :

<table border="5" width="400">  
<tr bgcolor="#f0f0f0">  
<td align="center">Baris 1 - Kolom 1</td>  
<td align="center">Baris 1 - Kolom 2</td>  
</tr>  
<tr>  
<td>Baris 2 - Kolom 1</td>  
<td>Baris 2 - Kolom 2</td>  
</tr>  
</table>

dan hasilnya menjadi seperti ini :
Baris 1 - Kolom 1Baris 1 - Kolom 2
Baris 2 - Kolom 1Baris 2 - Kolom 2

sumber : situseo
Read On

Efek Transparan Pada Gambar Posting (Post Image)

0 komentar Jumat, 08 Juni 2012
Membuat efek taransparan atau tembus pandang pada gambar-gambar (image) pada postingan (post image) akan menghasilkan tampilan yang lembut, apalagi ditambah dengan efek bias warna box pada gambar, untuk mewujudkan itu yang penting kita mengetahui letak atau bagian mana yang perlu kita modifikasi.

Pada umumnya setiap template menggunakan kode css .post img { untuk bagian gambar posting, mudah-mudahan pengkodeannya sama jadi tidak susah untuk menemukan bagian gambar posting (post image), untuk menemukan posisi kode .post img {, kalian masuk pada Design - Edit HTML, jika sudah ketemu, kalian tambahkan kode perintah transparan untuk post image, yaitu opacity seperi ilustrasi kode post image dibawah ini :

.post img {
opacity: 0.3;
}

Dengan kode opacity tersebut, gambar atau image dalam postingan secara otomatis akan transparan semua, sesuai dengan transparansi yang telah ditentukan angkanya dalam template, tapi efeknya belum kelihatan walaupun mouse melewati gambar tersebut, untuk menjadikan efeknya lebih kelihatan, kalian bisa tambahkan hover supaya terjadi perbedaan jika mouse melewati gambar posting tersebut, penerapan kodenya seperti ini : 

.post img:hover {
opacity: 1.0;
}
 
Semoga dengan penggunaan opacity dalam post image, bisa menjadikan bagian post kalian menjadi lebih baik.
Semoga bermanfaat,
 
Sumber 
Read On
Langganan: Postingan (Atom)