|
Tampilkan postingan dengan label css. Tampilkan semua postingan
Tampilkan postingan dengan label css. Tampilkan semua postingan
Cara Membuat Tabel Pada Posting BlogSenin, 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 :
------------------------------------
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>
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 :
------------------------------------
<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 :
------------------------------------
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 :
sumber : situseo
Efek Transparan Pada Gambar Posting (Post Image)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 CSS Shadow - Membuat Bayangan Dengan CSSJumat, 06 April 2012 Pada postingan sebelumnya saya sudah membahas bagaimanacara membuat efek gradasi menggunakan CSS. Pada postingan kali ini saya akan membahas bagaimana cara membuat efek bayangan menggunakan CSS seperti pada gambar di samping ini, hanya saja gambar di samping ini sengaja saya convert ke jpg supaya teman-teman yang masih menggunakan browser versi lama tetap bisa melihat contohnya. Sama seperti postingan sebelumnya, efek ini hanya akan berjalan di browser-browser versi terbaru, untuk mozilla firefox effect ini hanya berjalan di versi 3.6 keatas. CSS shadow adalah salah satu cara termudah untuk membuat effect bayangan untuk sebuat objek tertentu. Pada postingan kali ini saya akan mencoba membuat efek bayangan pada text dan objek dengan perintah CSS yang tidak jauh berbeda. BOX SHADOW Box shadow dibagi menjadi 2 jenis yaitu offset shadow dan inner shadow, untuk membuat offset shadow kita bisa membuat kode CSS seperti di bawah ini: .shadow {5px adalah ukuran x-offset 5px adalah ukuran y-offset 7px Tingkat blur shadow #222 adalah warna bayangan Contoh hasil bayangan ini bisa dilihat di gambar awal postingan ini. Sedangkan untuk membuat inner shadow kita tinggal menambahkan kode inset seperti di bawah ini:
.inner-shadow {
box-shadow: inset 0 5px 7px #222; -moz-box-shadow: inset 0 5px 7px #222; -webkit-box-shadow: inset 0 5px 7px #222; } Keterangan: 0 adalah ukuran x-inset 5px adalah ukuran y-inset 7px Tingkat blur shadow #222 adalah warna bayangan Contoh hasil CSS inner shadow bisa dilihat di bawah ini:  TEXT SHADOW Cara menggunakan dan sistem kerja text shadow sebenarnya tidak berbeda dengan box shadow, perbedaannya kita tinggal merubah tulisan box-shadow menjadi text-shadow. Berikut ini contohnya:
.textshadow {
text-shadow: 5px 5px 7px #222; -moz-text-shadow: 5px 5px 7px #222; -webkit-text-shadow: 5px 5px 7px #222; } dan untuk inner text shadow menjadi seperti ini:
.inner-textshadow {
text-shadow: inset 0 5px 7px #222; -moz-text-shadow: inset 0 5px 7px #222; -webkit-text-shadow: inset 0 5px 7px #222; } Mudah-mudahan postingan kali ini bisa bermanfaat buat teman-teman semua. Seperti biasanya, selamat mencoba :)
Langganan:
Postingan (Atom)
|
