Menjadi seorang blogger yang sekaligus juga mengetahui bagaimana desain blog dibuat berikut kode yang digunakan menjadi sesuatu yang sangat menarik. Menjadi blogger memang "tak hanya sekedar bernilai sebuah posting", namun masih banyak hal lain yang juga sangat menantang dan seringkali bahkan membuat lebih banyak waktu tersita. Salah satunya adalah mencoba membuat berbagai kode baru dengan tujuan menciptakan posting dengan kode lebih sederhana namun mempunyai kualitas dan tampilan lebih baik. Image posting merupakan salah satu diantaranya dan melakukan itu dapat dilakukan dengan memanfaatkan property css. Tentu saja memahami kode css menjadi kunci segalanya dan itu hanya bisa terjadi dengan lebih banyak belajar css melalui tutorial css yang banyak tersedia di berbagai blog/web atau dari berbagai buku tentang css & kode html.
Image, baik dalam posting ataupun bukan, umumnya ditampilkan dalam 3 macam posisi penatan:
- Sebelah kiri
- Tengah
- Sebelah kanan
Imagedi sebelah kiri
<style type="text/css">
img.kiri{
float:left;
margin:0 1em 0 0.5em;
}
</style>
<img class="kiri" src="image.jpg" width="xx" height="xx" />
Image di sebelah kanan
<style type="text/css">
img.kanan{
float:right;
margin:0 0 0.5em 1em;
}
</style>
<img class="kanan" src="image.jpg" width="xx" height="xx" />
Image di tengah
<style type="text/css">
img.tengah{
display:block;
margin:0 auto 1.5em;
}
</style>
<img class="tengah" src="image.jpg" width="xx" height="xx" />
Keterangan :
- display:block secara khusus digunakan untuk posisi image di tengah.
- xx adalah ukuran width dan height yang nilainya dinyatakan dalam satuan pixel (px).
- image.jpg adalah URL image, sedang file image dapat berupa jpg, gif atau png
Menambah properti css baru
Dengan menambah beberapa properti css lain akan didapatkan tampilan image berbeda dan dapat dibuat sesuai keinginan blogger.<style type="text/css">
img.kiri-plus{
float:left;
margin:0 1em 0.5em 0;
padding:8px;
background:#eee;
border:1px solid #aaa;
border-radius:5px;
box-shadow:4px 4px 4px #666;
}
img.kanan-plus{
float:right;
margin:0 0 0.5em 1em;
border:8px solid #eee;
border-radius:58px;
box-shadow:0 0 6px #222;
}
img.tengah-plus{
display:block;
margin:0 auto 1.5em;
padding:8px;
background:#aaa;
border:1px solid #ccc;
border-radius:100px 100px 180px 180px;
box-shadow:0 0 6px #900, 4px 4px 4px #444;
}
</style>
<img class="kiri-plus" src="image.jpg" width="xx" height="xx" />
<img class="kanan-plus" src="image.jpg" width="xx" height="xx" />
<img class="tengah-plus" src="image.jpg" width="xx" height="xx" />Di bawah ini telah disertakan 3 contoh pengaturan posisi image yang dilakukan dengan cara menambah class. Didalamnya juga disertakan penambahan properti css lain untuk mendapatkan tampilan image berbeda. Lakukan penambahan atau berbagai perubahan nilai atau mungkin saja penambahan properti baru yang lain hingga mendapatkan tampilan yang lebih baik.
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar