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.
Selamat mencoba...
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.
Selamat mencoba...
20 komentarPosting Komentar
kode ntu dmn letak nya mas
sipplah ntar d coba. mudah2an sukses.
numpang baca ya mas
saya suadah nencoba klik kanan pada foto tapi ga ada tulisan URLnya di mana sih,,
@Rev Idien:
Ya ga bakalan ada URL-nya. URL itu katan terlihat kalo kita mem-pastenya. Jadi lakukan dulu klik kanan, lalu pilih Copy image location, dan paste di tempat yg diinginkan.
gmn ya mas, udah tak ikuti printahx tapi kokmasih ak bisa.
aq cari 'copy image location' gak ada, yang ada cuma
'copy link location'.
tapi kalau tak paksakan pakai copy link location maka gambarx gak tampil, cuma link aja yang tampil..
gmn dong ?
Eeuuh... euweuh kanyaho sarua jeung urang. Ceuk kang eNeS mah, mousenya kudu di tujuin ke gambar, baru klik kanan. Nah ntar ada copy image location klo pake firefox, klo pake chrome ada Copy URL gambar. Kitu ceunah
@Rev Rofiks Blog:
Bener tuh kata sobat Sukabumi Aing. Emang langkah-langkahnya seperti itu sob
tks ya infonya... visit my blog. www.ahmadridho-ahmadridho.blogspot.com
wqewew
Terimakasih banyak infonya, mas. Kami akan coba sesuai tutornya di atas. Sekali lagi terimakasih. Maklum nih kami masih newbie. Kami disuruh kemari oleh bang Ivan.
numpang baca makasieh infonya
salam kenal..
masa aku dah nyoba tapi kok ga bisaa, knapa ya??
maen-maen ke blog ku mas
www.kiplisamodra.blogspot.com
bingun mas,,
He he,, maklum msih baru,
Mksih uda d'bolehkan numpang baca,
makasih gan mudah di mrngerti
terima kasih gan,,berhasil...
Gmn carax untuk download templete jnengan kie gAn ..??
Trims,
@Yayasan miftahul ulum Donlot saja di http://www.eblogtemplates.com/wp-polaroid-blogger sob...
masih bingung gan....gmn klo ngobrolnya di fb aja gan...kita bahas rame" sama yg masih nubie gan...
Mantap infonya ,sangat bermamfaat buat saya yg masih newbe
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.