Unsur web/blog yang paling sering digunakan selain teks adalah image/gambar. Tidak hanya digunakan sebagai media visualisasi dalam posting, namun image memang mempunyai peran dan fungsi yang sangat besar terhadap desain blog/web berikut semua aktifitas seputar blog. Ada tiga jenis file image yang digunakan dalam web:
- File image jpg/jpeg
Image dalam bentuk file .jpg mempunyai kelebihan dalam detail warna. Paling lengkap dan paling bagus jika dibandingkan dengan file image yang lain. File image jpg juga dapat di kompres hingga ukuran yang jauh lebih kecil dari aslinya dengan kwalitas terjaga sehingga mempunyai efek positif terhadap kecepatan loading blog. Sifat-sifat seperti inilah yang membuat file jpg paling banyak digunakan sebagai bahan posting. - File image gif
Satu nilai lebih yang dimiliki file image berbentuk gif adalah kemampuannya untuk digunakan sebagai gambar animasi. Hal yang tak dapat kita lakukan dengan file image yang lain. File berbentuk gif juga sangat baik untuk image yang tidak membutuhkan detail warna terlalu banyak. Image gif dengan ukuran cukup besar akan mempunyai beban jauh lebih ringan dibandingkan jpg jika detail warnanya tak tak banyak. - File image png
Sekalipun file image png paling jarang digunakan, namun ada nilai lebih yang tak dimiliki bentuk file image yang lain. File png mampu memberikan sebuah efek transparansi paling sempurna diantara file image yang lain. Background dengan efek transparansi lebih banyak mengandalkan image dengan ekstensi .png.
Menampikan image di web/blog
Image tak hanya dapat ditampikan di halaman posting namun dihampir semua bagian blog bisa dilakukan. Selain halaman posting, widget adalah salah satu elemen blog yang paling sering digunakan untuk menampilkan image.Cara menampilkan image
Ada dua cara untuk menampikan image.- Menampikan image secara langsung.
- Menampilkan image sebagai background.
- URL alamat tempat file image disimpan. Pada masa sekarang hampir semua data image lebih banyak disimpan di blogger atau situs lain penyedia layanan blog gratis seperti wordpress dan blogdetik. Situs lain yang banyak digunakan adalah PicasaWeb dan Photobucket.
- Ukuran/dimensi/size Ukuran diperlukan agar image dapat langsung ditampilkanm dalam ukuran yang sesuai bersamaan dengan ketika loading dimulai. Ukuran image dalam bentuk
width danheight . - Penangaturan letak/posisi Pengaturan dimaksudkan untuk meletakkan image pada posisi sebelah kiri, tengah atau kanan halaman.
- Kode untuk menampilkan image Kode yang paling sederhana untuk menampilkan image secara langsung adalah sbb:
Kode html dasar untuk menampilkan image
<img src="URL" width="..." height="..." alt="Keterangan singkat tentang image" />
Image di sebelah kiri halaman
<img src="URL" width="..." height="..." style="float:left;margin:0 12px 5px 0;" alt="Keterangan singkat tentang image" />
Image di sebelah kanan halaman
<img src="URL" width="..." height="..." style="float:right;margin:0 0 5px 12px;" alt="Keterangan singkat tentang image" />
Image di sebelah tengah halaman
<img src="URL" width="..." height="..." style="display:block;margin:0 auto;" alt="Keterangan singkat tentang image" />
Menampilkan image sebagai background
menampilkan image sebagai sebuah background lebih banyak berkaitan dengan desain blog. Kode html yang dipergunakan berbeda dengan menampilkan image secara langsung. Kode css banyak dilibatkan dalam hal ini dengan tujuan untuk mendapatkan berbagai tujuan yang diharapkan berkaitan dengan digunakannya image sebagai background. Jika image yang ditampilkan secara langsung lebih banyak berupa image dengan bentuk file jpg, maka image sebagai background banyak memadukan tiga jenis file (jpg, png dan gif).Kode untuk menampilkan image sebagai background
Sekalipun banyak variasi kode yang dapat digunakan, namun bentuk dasar segala jenis kode yang digunakan adalah sbb:background-image:url(image.jpg);
Contoh kode penampil image
<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6CzbADhC552wjtG2KXlOUCfoI1q6kFvf9JY63N3CPmOc6BNeTfWdvkh8u6_WdldshBNx5HKY8D9bBDUlzzFWIVE8C8IjRN00aEhNr5HqshDPTxmPtl7on_nE-m-6xrg52eDDi23Pu3U0/h120/red-car-200x143.jpg" width="200" height="143" style="float:right;margin:0 0 5px 12px;" />Image tak hanya sekedar sebagai pemanis blog semata karena memalui image beberapa hal yang disampaikan melalui kata-kata atau teks menjadi lebih jelas. Bahkan, banyak sekali terjadi, kata-kata yang banyak sekalipun tak mampu mendefinisikan sesuatu secara gamblang sehingga sebuah image diperlukan untuk memvisualisasikan apa yang hendak disampaikan.</p>
Contoh image sebagai background
<style type="text/css">
div.dg-background{
width:360px;
padding:20px;
margin:30px;
border:1px solid #555;
background:#eee;
text-align:justify;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqGf0C1CF9YYNgL4ZmTTxoeyZA_NTblw6EDcrymogdBnTwQa21AgligmzD0hyphenhyphencx4J38_JWo5bgmrKc9-5cuoRgj5cw7KRbYFKiYxkVPlaexQYdWHy28WXey9z0SeTlbfAGGKen9Lalc6s/h440/kincir-400-400.jpg) no-repeat center top;
color:#fff;
}
</style>
<div class="dg-background">
<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6CzbADhC552wjtG2KXlOUCfoI1q6kFvf9JY63N3CPmOc6BNeTfWdvkh8u6_WdldshBNx5HKY8D9bBDUlzzFWIVE8C8IjRN00aEhNr5HqshDPTxmPtl7on_nE-m-6xrg52eDDi23Pu3U0/h120/red-car-200x143.jpg" width="120" height="83" style="float:left;margin:0 12px 5px 0;" alt="Mobil merah" />Image tak hanya sekedar sebagai pemanis blog semata karena memalui image beberapa hal yang disampaikan melalui kata-kata atau teks menjadi lebih jelas. </p>
<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6CzbADhC552wjtG2KXlOUCfoI1q6kFvf9JY63N3CPmOc6BNeTfWdvkh8u6_WdldshBNx5HKY8D9bBDUlzzFWIVE8C8IjRN00aEhNr5HqshDPTxmPtl7on_nE-m-6xrg52eDDi23Pu3U0/h120/red-car-200x143.jpg" width="120" height="83" style="float:right;margin:0 0 5px 12px;" alt="Mobil merah" />Bahkan, banyak sekali terjadi, kata-kata yang banyak sekalipun tak mampu mendefinisikan sesuatu secara gamblang sehingga sebuah image diperlukan untuk memvisualisasikan apa yang hendak disampaikan.</p>
</div>Di bawah ini telah disertakan demo tentang image, baik menampilkan secara langsung ataupun menggunakannya sebagai background.
Please click the button to display. Continue with editing code and click to see the results!
Post : Imageby : gubhugreyot - gubhugcss
my Blogs : Demo Tutorial Blogger-1 | Demo Tutorial Blogger-2 | Best Blogger Hacks | Best Blogger Menus | gubhuggreyot-b'detik | gubhugreyot
Tidak ada komentar:
Posting Komentar