Seringkali kita merasa kesel lantaran saat meng-upload foto kedalam blog
memakan waktu yang lumayan lama. Sebenarnya ada cara mudah untuk
memasukkan foto kita kedalam blog, apalagi foto tersebut berasal dari
album foto yang terdapat dalam Picasa, Flickr, Photobucket, Tinypic, Spacelive, atau foto/gambar dari situs lain.
Berikut adalah langkah-langkanya:
Untuk foto sisipan di sebelah kiri:
Untuk foto sisipan di sebelah kanan:
Untuk foto sisipan di tengah:
Perbedaan antara foto sisipan kiri, kanan, dan tengah terletak pada
float dan posisi margin. Foto sisipan kiri memiliki margin: 0 10px 10px 0, magin foto sisipan kanan: 0 0 10px 10px, dan magin foto sisipan tengah: 0px auto 10px. Margin wpx xpx ypx zpx menunjukkan margin atas wpx, kanan xpx, bawah ypx, dan kiri zpx (mengikuti arah putaran jarum jam).
Ukuran foto sisipan pada script di atas adalah ukuran foto kecil dengan posisi landscape dengan width: 200px; dan height: 150px. Jika foto tersebut berbentuk potrait maka ukurannya dibalik menjadi width: 150px; dan height: 200px. Untuk ukuran foto yang lebih besar maka ubah saja ukuran lebar dan panjangnya. Ukuran foto sedang: width: 320px; height: 240px, dan ukuran foto besar: width: 400px; height: 300px.
Pusing ya dengan angka-angka itu? Gampangnya gini aja deh. Kamu ubah saja ukuran width-nya dengan persentase dan hapus ukuran height-nya. Misalnya: width: 35%. Ini artinya gambar yang ditampilkan akan sebesar 35% dari ukuran widget posting. Jika widget-nya 500px, maka gambar yang akan ditampilkan sebesar 0,35 x 500px = 175px.
Atau kamu juga bisa mengubah ukuran width dan height-nya dengan auto. Jadi ukuruannya akan seperti ini: width: auto; height: auto. Hanya saja kelemahannya setiap gambar yang dimasukkan akan ditampilkan sebesar gambar aslinya. Mudah kan?
Nah, mudah kan? Kamu bisa mencobanya. Tapi awas, jangan sampai ukuran (size) foto pada URL foto/gambar lebih kecil dari ukuran lebar dan panjang foto pada kode sisipan. Kalo kamu ngambil fotonya dari Picasa, sebaiknya kamu gunakan size: s288, s400, s512, atau s800.
Namun jika tidak terbiasa dengan bahasa HTML sebaiknya kamu gunakan fasilitas insert image pada menu bar posting.
Berikut adalah langkah-langkanya:
- Login terlebih dahulu blog kamu.
- Pada halaman dashboard, klik Entri Baru (New Post, jika postingan baru) atau Edit Entri (Edit Post, jika postingan lama)
- Pada halaman Edit Entri, klik Edit HTML
- Pada kotak Editing masukan kode:
Untuk foto sisipan di sebelah kiri:
<img style="float: left; margin: 0 10px 10px 0; width: 200px; height: 150px;" src="URL foto/gambar" border="0"/>
<img style="float: right; margin: 0 0 10px 10px; width: 200px; height: 150px;" src="URL foto/gambar" border="0"/>
<img style="display: block; text-align: center; margin: 0px auto 10px; width: 200px; height: 150px;" src="URL foto/gambar" border="0"/>
Ukuran foto sisipan pada script di atas adalah ukuran foto kecil dengan posisi landscape dengan width: 200px; dan height: 150px. Jika foto tersebut berbentuk potrait maka ukurannya dibalik menjadi width: 150px; dan height: 200px. Untuk ukuran foto yang lebih besar maka ubah saja ukuran lebar dan panjangnya. Ukuran foto sedang: width: 320px; height: 240px, dan ukuran foto besar: width: 400px; height: 300px.
Pusing ya dengan angka-angka itu? Gampangnya gini aja deh. Kamu ubah saja ukuran width-nya dengan persentase dan hapus ukuran height-nya. Misalnya: width: 35%. Ini artinya gambar yang ditampilkan akan sebesar 35% dari ukuran widget posting. Jika widget-nya 500px, maka gambar yang akan ditampilkan sebesar 0,35 x 500px = 175px.
Atau kamu juga bisa mengubah ukuran width dan height-nya dengan auto. Jadi ukuruannya akan seperti ini: width: auto; height: auto. Hanya saja kelemahannya setiap gambar yang dimasukkan akan ditampilkan sebesar gambar aslinya. Mudah kan?
- Selanjutnya, bukalah foto yang akan kamu masukkan ke dalam blog. Tujukan pointer mouse pada foto tersebut lalu klik kanan. Pada kotak dialog, pilih Salin URL gambar (Copy Image Location) kemudian paste pada lokasi URL foto/gambar.
- Untuk menambahkan tulisan setelah sisipan foto/gambar tersebut, klik Tulis (Compose), setelah itu silahkan curat-coret semau kamu.
<a href="Lokasi foto/gambar" title="Judul foto/gambar" target="_blank">
Nah, mudah kan? Kamu bisa mencobanya. Tapi awas, jangan sampai ukuran (size) foto pada URL foto/gambar lebih kecil dari ukuran lebar dan panjang foto pada kode sisipan. Kalo kamu ngambil fotonya dari Picasa, sebaiknya kamu gunakan size: s288, s400, s512, atau s800.
Namun jika tidak terbiasa dengan bahasa HTML sebaiknya kamu gunakan fasilitas insert image pada menu bar posting.
Tidak ada komentar:
Posting Komentar