tHomBloG: Mengenal Kode HTML Gambar di Postingan

Mengenal Kode HTML Gambar di Postingan

Penting sekali mengenal kode html untuk postingan gambar maupun tulisan. Kode-kode ini dapat kita manfaatkan untuk membuat variasi pada blog kita. Bagaimana cara mendapatkan kode-kode itu? Sangat mudah, yaitu dengan mengklik "Edit HTML" pada bagian atas papan edit postingan.

Kita ambil contoh gambar orang antri minyak tanah yang saya tampilkan di atas. Dalam mode html akan keluar kode seperti ini: ‹a href=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYsN4dWDVQR6Xy4oEAg9sKemJ1qFFZDy-1JzeZpz_wiVehKdQcy7JLAlLVlIo0Y0FEGEvK2ii9tkDOL0CRPaKYT9389rE-Rewkv-BetvezFgHgR4INRDUP2a_WJJlcPhVwLcIgBUT-xyc/s1600-h/kerumunan.jpg› ‹img id="BLOGGER_PHOTO_ID_5429995920663700898" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 320px; CURSOR: hand; HEIGHT: 124px; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYsN4dWDVQR6Xy4oEAg9sKemJ1qFFZDy-1JzeZpz_wiVehKdQcy7JLAlLVlIo0Y0FEGEvK2ii9tkDOL0CRPaKYT9389rE-Rewkv-BetvezFgHgR4INRDUP2a_WJJlcPhVwLcIgBUT-xyc/s320/kerumunan.jpg" border="0" /›‹/a›

Pada dasarnya kode itu terdiri dari dua bagian.

Yang pertama

‹a href=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYsN4dWDVQR6Xy4oEAg9sKemJ1qFFZDy-1JzeZpz_wiVehKdQcy7JLAlLVlIo0Y0FEGEvK2ii9tkDOL0CRPaKYT9389rE-Rewkv-BetvezFgHgR4INRDUP2a_WJJlcPhVwLcIgBUT-xyc/s1600-h/kerumunan.jpg›

Setiap gambar yang kita kita masukkan ke postingan blogger sebenarnya disimpan dalam Picasa Web Album yang menjadi pendukung untuk blogger blog. Kode pertama ini mengarahkan klik ke gambar menuju penampilan gambar asli sebagaimana disimpan di Web Album. Dengan kata lain, bagian pertama adalah kode link ke file gambar kita di Picasa Web Album.

Coba klik di sini.

Nah bagian pertama ini sangat berguna. Link ini bisa kita ubah menuju ke alamat web mana saja. Kalau kita mau menggunakan gambar ini menjadi "menu navigasi", link-nya ya ke arah file di blog kita sendiri, misalnya postingan tertentu atau pencarian label tertentu. (Pelajari cara membuat link, klik di sini).

Bagian Kedua

‹img id="BLOGGER_PHOTO_ID_5429995920663700898" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 320px; CURSOR: hand; HEIGHT: 124px; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYsN4dWDVQR6Xy4oEAg9sKemJ1qFFZDy-1JzeZpz_wiVehKdQcy7JLAlLVlIo0Y0FEGEvK2ii9tkDOL0CRPaKYT9389rE-Rewkv-BetvezFgHgR4INRDUP2a_WJJlcPhVwLcIgBUT-xyc/s320/kerumunan.jpg" border="0" />

Bagian kedua ini menunjukkan identitas nyata di postingan kita, yang bisa kita ubah "style"-nya.

DISPLAY: block berarti penampilan gambar itu bersifat blok, tidak memungkinkan ada tulisan atau gambar lain di sebelahnya. Kode ini bisa diubah kalau kamu ingin di sisi gambar ada tulisan atau gambar lain.
WIDTH dan HEIGHT menunjukkan angka besarnya angka penampilan gambar lebar dan tingginya. Mengubah ukuran gambar di postingan selain dengan "drag" langsung ke gambar dengan mouse (dalam mode "tulis"), juga bisa dengan mengubah angka-angka di sini. Jangan lupa perhatikan perbandingannya. Kalau yang satu diubah 50% yang lain juga harus 50% supaya komposisi gambar tetap sama.
TEXT-ALIGN menunjukkan posisi gambar mau di kiri, tengah, atau kanan sebagaimana kamu pilih saat meng-upload gambar. Posisi ini juga bisa diubah dengan mengganti menjadi left atau right. Ingat "display:block"-nya dihapus dulu.
border menunjuk frame garis di sekitar gambar. Dalam template blog saya ini otomatis border="0". Kamu bisa mengubah nilainya menjadi 1px, 2px atau seberapapun kamu mau.

tag gambar, link, slideshow, tutorial | judul Mengenal Kode HTML Gambar di Postingan