Menyederhanakan KODE Gambar untuk Posting: Panduan BloGGeR

Mencoba menggunakan kode html sendiri yang berbeda dari kode html image default blogger seperti yang dapat dijumpai di box posting (pada mode Edit HTML, selain lebih pendek (ringkas), cara seperti ini bisa digunakan untuk melatih diri memahami dan mengembangkan kode html. Manfaatnya tentu saja tak hanya di halaman posting saja, namun akan terus berkembang hingga blogger semakin memahami tentang template dan kode pembentuknya.

Saat upload image di halaman posting, 4 pilihan posisi image diberikan agar image dapat diletakkan dalam beberapa posisi berbeda.

1. Image di kiri (left).
2. Image di tengah (centre).
3. Image di kanan (right).
4. Image di tak satupun (none).

Upload dapat dilakukan melalui Mode HTML dan Mode Compose. Jika menggunakan mode Compose yang terlihat di box posting berupa image hasil upload, sedang jika menggunakan mode Edit HTML image tak akan dijumpai. Image hanya terlihat sebagai sebuah kode yang dikenal sebagai kode HTML. Melalui kode inilah berbagai perubahan bisa dilakukan. Tak hanya merubah posisi melainkan hingga merubah ukuran dan bahkan berbagai kode baru lain bisa ditambahkan hingga image akan terlihat berbeda dari biasanya. Jika kita mengetahui fungsi dan kegunaan kode CSS3, berbagai tampilan yang jauh lebih menarik bisa kita dapatkan.

Posisi Image di sebelah kiri (left):

Untuk membuat image pada posisi sebelah kiri, kode floating position (float:left;) harus digunakan. Untuk membatasi image dengan bidang disekitarnya perlu ditambahkan margin. Kedua kode inilah yang menjadi kode dasar pembuat image berada di sebelah kiri (left). Di bawah ini bisa dilihat perbedaan yang ada antara kode default blogger (image di kiri) dan kode lain dengan fungsi yang hampir sama.

Default Blogger: Image di sebelah kiri (left).

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8jciUpSWIyclNAz9bXD7Hq4cdoiBE9QPYLwU4VO1rSZLvw1D7yT1JJbx8sh5ZjKfcpaOCu6dcaySdLtDx4I4Z3kZdvcRpyLv6MS03mxUbMBEndD2G0JLWlFiJ-G0GI0exjHqTwIXs_U/s400/logo-gubhugreyot-grad.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8jciUpSWIyclNAz9bXD7Hq4cdoiBE9QPYLwU4VO1rSZLvw1D7yT1JJbx8sh5ZjKfcpaOCu6dcaySdLtDx4I4Z3kZdvcRpyLv6MS03mxUbMBEndD2G0JLWlFiJ-G0GI0exjHqTwIXs_U/s400/logo-gubhugreyot-grad.jpg" width="360" /></a></div>

Kode berbeda untuk Image di sebelah kiri (left).

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8jciUpSWIyclNAz9bXD7Hq4cdoiBE9QPYLwU4VO1rSZLvw1D7yT1JJbx8sh5ZjKfcpaOCu6dcaySdLtDx4I4Z3kZdvcRpyLv6MS03mxUbMBEndD2G0JLWlFiJ-G0GI0exjHqTwIXs_U/s1600/logo-gubhugreyot-grad.jpg"><img height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8jciUpSWIyclNAz9bXD7Hq4cdoiBE9QPYLwU4VO1rSZLvw1D7yT1JJbx8sh5ZjKfcpaOCu6dcaySdLtDx4I4Z3kZdvcRpyLv6MS03mxUbMBEndD2G0JLWlFiJ-G0GI0exjHqTwIXs_U/s400/logo-gubhugreyot-grad.jpg" width="360" style="float:left;margin:0.4em 1em 0.4em 0;" /></a>

Pengembangan kode Image di sebelah kiri (left).

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8jciUpSWIyclNAz9bXD7Hq4cdoiBE9QPYLwU4VO1rSZLvw1D7yT1JJbx8sh5ZjKfcpaOCu6dcaySdLtDx4I4Z3kZdvcRpyLv6MS03mxUbMBEndD2G0JLWlFiJ-G0GI0exjHqTwIXs_U/s1600/logo-gubhugreyot-grad.jpg"><img height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8jciUpSWIyclNAz9bXD7Hq4cdoiBE9QPYLwU4VO1rSZLvw1D7yT1JJbx8sh5ZjKfcpaOCu6dcaySdLtDx4I4Z3kZdvcRpyLv6MS03mxUbMBEndD2G0JLWlFiJ-G0GI0exjHqTwIXs_U/s400/logo-gubhugreyot-grad.jpg" width="360" style="float:left;margin:0.4em 1em 0.4em 0;background:#eee;padding:5px;border-radius:4px;box-shadow:0 0 5px #666;" /></a>

Posisi Image di tengah (centre):

Gambar di atas masih menggunakan gambar yang sama dengan gambar pertama, hanya image diposisikan ditengah tengah. Beberapa kode akan terlihat berbeda jika dibandingkan dengan posisi gambar di sebelah kiri. Buat posting pada mode Edit HTML untuk melihat bentuk kode.

Default Blogger: Image di tengah (centre).

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5ETTooyQNVb_ykZLv_KtXBQ0hws4qaP3UswV6kFsfuTCeGTiDRGIBreMo2gJlv69G3F-Zpnj8NfMPg2gGispxVnToYmp5o5MX6FoZ9Zb9z4eJd-sD1Y2exNx3ZlVW8PLXAdxjVuhnXY/s1600/logo-gubhugreyot-grad.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5ETTooyQNVb_ykZLv_KtXBQ0hws4qaP3UswV6kFsfuTCeGTiDRGIBreMo2gJlv69G3F-Zpnj8NfMPg2gGispxVnToYmp5o5MX6FoZ9Zb9z4eJd-sD1Y2exNx3ZlVW8PLXAdxjVuhnXY/s400/logo-gubhugreyot-grad.jpg" width="360" /></a></div>

Kode berbeda untuk Image di tengah (centre).

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5ETTooyQNVb_ykZLv_KtXBQ0hws4qaP3UswV6kFsfuTCeGTiDRGIBreMo2gJlv69G3F-Zpnj8NfMPg2gGispxVnToYmp5o5MX6FoZ9Zb9z4eJd-sD1Y2exNx3ZlVW8PLXAdxjVuhnXY/s1600/logo-gubhugreyot-grad.jpg"><img height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5ETTooyQNVb_ykZLv_KtXBQ0hws4qaP3UswV6kFsfuTCeGTiDRGIBreMo2gJlv69G3F-Zpnj8NfMPg2gGispxVnToYmp5o5MX6FoZ9Zb9z4eJd-sD1Y2exNx3ZlVW8PLXAdxjVuhnXY/s400/logo-gubhugreyot-grad.jpg" width="360" style="margin:1em auto;text-align: center;display:block;" /></a>

Pengembangan kode Image di tengah (centre).

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5ETTooyQNVb_ykZLv_KtXBQ0hws4qaP3UswV6kFsfuTCeGTiDRGIBreMo2gJlv69G3F-Zpnj8NfMPg2gGispxVnToYmp5o5MX6FoZ9Zb9z4eJd-sD1Y2exNx3ZlVW8PLXAdxjVuhnXY/s1600/logo-gubhugreyot-grad.jpg"><img height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5ETTooyQNVb_ykZLv_KtXBQ0hws4qaP3UswV6kFsfuTCeGTiDRGIBreMo2gJlv69G3F-Zpnj8NfMPg2gGispxVnToYmp5o5MX6FoZ9Zb9z4eJd-sD1Y2exNx3ZlVW8PLXAdxjVuhnXY/s400/logo-gubhugreyot-grad.jpg" width="360" style="margin:1em auto;text-align: center;display:block;padding:5px;border-radius:5px;background:#eee;box-shadow:0 0 5px #666;" /></a>

Posisi Image di sebelah kanan (right):

Untuk membuat image berada pada posisi sebelah kanan harus digunakan floating position (float:right;) dan menambahkan pengaturan jarak image dengan bidang sekitarnya melalui margin. Bandingkanlah dengan kode yang digunakan pada image di posisi sebelah kiri!

Default Blogger: Image di posisi sebelah kanan (right).

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2Lrf57a31hOp4Acs5Ufbum93XUa85BvaMxorTWGiWCcHCnebzBtVoISO0I8KIi4izAikgnO67ON3vobPGOFGymGs7PmwHPcW-vn_THE-QZ9l7jsIMQx_Sx-PgEaFKEZU81IyLO30Fwk/s1600/logo-gubhugreyot-grad.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5ETTooyQNVb_ykZLv_KtXBQ0hws4qaP3UswV6kFsfuTCeGTiDRGIBreMo2gJlv69G3F-Zpnj8NfMPg2gGispxVnToYmp5o5MX6FoZ9Zb9z4eJd-sD1Y2exNx3ZlVW8PLXAdxjVuhnXY/s400/logo-gubhugreyot-grad.jpg" width="360" /></a></div>

Kode berbeda untuk Image di posisi sebelah kanan (right).

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2Lrf57a31hOp4Acs5Ufbum93XUa85BvaMxorTWGiWCcHCnebzBtVoISO0I8KIi4izAikgnO67ON3vobPGOFGymGs7PmwHPcW-vn_THE-QZ9l7jsIMQx_Sx-PgEaFKEZU81IyLO30Fwk/s1600/logo-gubhugreyot-grad.jpg"><img height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5ETTooyQNVb_ykZLv_KtXBQ0hws4qaP3UswV6kFsfuTCeGTiDRGIBreMo2gJlv69G3F-Zpnj8NfMPg2gGispxVnToYmp5o5MX6FoZ9Zb9z4eJd-sD1Y2exNx3ZlVW8PLXAdxjVuhnXY/s400/logo-gubhugreyot-grad.jpg" width="360" style="float:right;margin:0.4em 0 0.4em 1em;" /></a>

Pengembangan kode Image di posisi sebelah kanan (right).

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2Lrf57a31hOp4Acs5Ufbum93XUa85BvaMxorTWGiWCcHCnebzBtVoISO0I8KIi4izAikgnO67ON3vobPGOFGymGs7PmwHPcW-vn_THE-QZ9l7jsIMQx_Sx-PgEaFKEZU81IyLO30Fwk/s1600/logo-gubhugreyot-grad.jpg"><img height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5ETTooyQNVb_ykZLv_KtXBQ0hws4qaP3UswV6kFsfuTCeGTiDRGIBreMo2gJlv69G3F-Zpnj8NfMPg2gGispxVnToYmp5o5MX6FoZ9Zb9z4eJd-sD1Y2exNx3ZlVW8PLXAdxjVuhnXY/s400/logo-gubhugreyot-grad.jpg" width="360" style="float:right;margin:0.4em 0 0.4em 1em;padding:5px;border-radius:5px;background:#eee;box-shadow:0 0 5px #666;" /></a>

Mengganti image dengan teks:

Ketika kode html image (tag img) dituliskan dalam sebuah tag "a" maka image tersebut dikenal sebagai image link. Dengan meng-klik image link maka sebuah alamat baru akan terbuka. Alamat baru bisa berupa image dalam ukuran yang lebih besar, image berbeda atau sebuah alamat blog atau web. Menggantikan image link dengan sebuah teks memungkinkan kita untuk tak perlu menampilkan image di blog, atau pada beberapa kasus untuk menampilkan image kita tak perlu harus menggnakan image link. Sebuah teks link akan membuat image terbuka ketika di klik.
Contoh :
Logo gubhugreyot

Bentuk kode html teks link

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2Lrf57a31hOp4Acs5Ufbum93XUa85BvaMxorTWGiWCcHCnebzBtVoISO0I8KIi4izAikgnO67ON3vobPGOFGymGs7PmwHPcW-vn_THE-QZ9l7jsIMQx_Sx-PgEaFKEZU81IyLO30Fwk/s1600/logo-gubhugreyot-grad.jpg" target="_blank" title="Klik untuk membuka gambar!">Logo gubhugreyot</a>

Link berupa Alamat sebuah blog/web

<a href="http://gubhugreyot.blogspot.com" target="_blank" title="Klik untuk mengikuti panduan blogger terlengkap!">Panduan  & Tutorial Blogger</a>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Jemuah KLIWON, January, 27, 2012

» Happy Blogging - gubhugreyot «