Cara Mengganti Gambar Posting ke bentuk Teks: Cara Membuat dan Merubah Link Dalam Bentuk Teks

Kelemahan yang tercipta dengan terlalu banyaknya posting berbentuk gambar adalah mengakibatkan loading blog semakin lambat. Untuk mensiasati hal ini ada dua cara yang mungkin kita lakukan. Cara pertama dengan mengganti gambar menjadi sebuah teks yang didalamnya berisi link gambar. Yang ke dua dengan memperkecil gambar yang digunakan sebagai pembuka link gambar yang sebenarnya. Cara paling mudah dan praktis tentu saja dengan menggunakan bentuk teks.

Contoh Kode Gambar hasil upload di blogger (di halaman posting - mode edit html):

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5IBAuGq3MpOTcYuqGmFSC5L40HNJ0fiO2U6MovYxR28c9x0GWAxqVTqbYZ0rlHSafiH5R1nSAyETI8HcD9UQeMX7p4rDWd8bxs-hx9AhFTe78rnqTGCmX3xJeidRFK43TWbhSw1fz_w/s1600/img_gubhugreyot-gambar-kodok-mbleding.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="400" width="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5IBAuGq3MpOTcYuqGmFSC5L40HNJ0fiO2U6MovYxR28c9x0GWAxqVTqbYZ0rlHSafiH5R1nSAyETI8HcD9UQeMX7p4rDWd8bxs-hx9AhFTe78rnqTGCmX3xJeidRFK43TWbhSw1fz_w/s400/img_gubhugreyot-gambar-kodok-mbleding.jpg" /></a>
</div>

Kode berwarna merah dihilangkan kemudian kode berwarna orange di ganti dengan teks. Misalnya dengan sebutan Gambar 1, Gambar 2 atau yang lain.

Bentuk KODE setelah dilakukan perubahan menjadi seperti di bawah ini:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5IBAuGq3MpOTcYuqGmFSC5L40HNJ0fiO2U6MovYxR28c9x0GWAxqVTqbYZ0rlHSafiH5R1nSAyETI8HcD9UQeMX7p4rDWd8bxs-hx9AhFTe78rnqTGCmX3xJeidRFK43TWbhSw1fz_w/s1600/img_gubhugreyot-gambar-kodok-mbleding.jpg"> Gambar 1</a>
</div>

Dapat juga hanya menggunakan kode seperti ini:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5IBAuGq3MpOTcYuqGmFSC5L40HNJ0fiO2U6MovYxR28c9x0GWAxqVTqbYZ0rlHSafiH5R1nSAyETI8HcD9UQeMX7p4rDWd8bxs-hx9AhFTe78rnqTGCmX3xJeidRFK43TWbhSw1fz_w/s1600/img_gubhugreyot-gambar-kodok-mbleding.jpg"> Gambar 1</a>

Dengan bentuk kode baru seperti di atas, dimana image dirubah menjadi sebuah teks, maka untuk membuka link tinggal lakukan klik Gambar-1

D E M O

Silahkan KLIK "Gambar Kodhok" di bawah ini untuk mencobanya!

Gambar Kodhok

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

Update » Rebo WAGE, January, 11, 2012

» Happy Blogging - gubhugreyot «