Cara Mengganti Text Dengan Gambar

Posted by: Donny on April 14th, 2010

Dalam dunia blogging atau web, terkadang kita ingin mengganti

beberapa tampilan teks yang ada dengan sebuah gambar agar tampak lebih menarik, atau
sekedar ingin memberi penekanan tertentu.

Hal ini juga bisa saja terjadi ketika kita kurang puas dengan tampilan teks yang hanya sedikit
bisa diutak-atik tampilannya. Nah, kali ini saya akan mencoba membagi sedikit ilmu
mengenai cara mengganti text dengan gambar, dengan menggunakan css.

Pada tutorial ini, sebenarnya kita tidak benar-benar mengganti text yang ada dengan gambar.
Hanya saja kita menampilkan gambar pengganti tersebut, lalu menyembunyikan text dari
orang yang melihat blog/web kita, tanpa menghilangkannya dari pandangan bot Google,
misalnya.

Secara mudahnya, metode yang digunakan adalah menggunakan gambar sebagai background
dari text yang ingin kita ganti, dan menggeser posisi text sehingga text berada di luar
jangkauan screen para penonton tanpa mengeluarkannya dari elemen halaman.

Langsung ke contoh. Misalkan kita ingin mengganti judul sidebar widget “Tulisan Terbaru”
kita dengan gambar. Contoh source html-nya adalah sebagai berikut:

<div id="sidebar">
<h3>Tulisan Terbaru</h3>
<ul>
<li><a href="link1">judul1</a></li>
<li><a href="link2">judul2</a></li>
<li><a href="link3">judul3</a></li>
</ul>
</div>

Langkah 1: Menyiapkan Gambar

Pertama-tama, siapkan gambar yang akan menjadi pengganti dari teks yang ingin kita ganti.
Perhatikan ukuran dari gambar yang ingin kita pakai. Tentukan lebar (width) dan tingginya
(height), agar sesuai dengan lokasi teks yang ingin diganti.

Jika gambar telah siap, upload gambar tersebut. Baik itu di blog wordpress anda, blogspot,
atau tempat upload gambar lainnya seperti imageshack.us atau image host favorit anda.
Kemudian simpan/catat link URL-nya.

Langkah 2: Menambahkan Class Pada Text

Setelah gambar siap, sekarang kita tambahkan class pada text yang ingin kita ganti dengan
gambar. Pada contoh di atas: judulnya. Maka kita bisa menambahkan class baru untuk judul
h3 nya dengan nama apa saja yang mudah kita ingat.

<h3 class="terbaru">Tulisan Terbaru</h3>

Pada contoh di atas, saya menambahkan class “terbaru” pada h3 yang ingin saya ganti
dengan gambar.

Langkah 3: Menambah CSS Pada Class Baru Tersebut

Sesudah itu, kita tambahkan perintah baru pada CSS kita berupa:

h3.terbaru {
background: url(images/recent.png);
position: relative;
width: 280px;
height: 40px;
padding: 0 0;
text-indent: -9999px;
}

Perintah CSS di atas akan membuat gambar yang kita berikan linknya muncul di tempat teks
itu berada, pada saat yang sama memerintahkan teks (text-indent) untuk bergeser sejauh
9999px dari posisi semula (mohon koreksinya jika saya salah mengintrepretasikannya).

Pada dasarnya teks tersebut masih tetap ada, tetapi tidak dapat dilihat oleh para pembaca pada
umumnya. Kecuali mereka yang memiliki monitor dengan resolusi lebih dari 9999px yang
saya rasa hampir tidak ada. Sedemikian sehingga, ketika Google datang untuk crawling
dengan bot nya, judul text kita yang bisa dibaca oleh bot masih tersedia. Sedangkan para
pembaca “dimanjakan” dengan tampilah gambar yang bisa lebih menarik daripada sekedar
teks.
Agar menjadi perhatian: pada bagian background tempat kita menaruh link gambar. Perintah
CSS yang saya tulis di atas khusus untuk wordpress atau web dengan folder image. Hal itu
untuk meringkas CSS agar perintah tidak terlalu panjang.

Jika masih bingung atau ragu, kita bisa saja menulis lengkap URL gambar tersebut. Cara ini
juga menjadi wajib, jika kita mengunggah (upload) gambar kita di image hosting gratis
seperti imageshack. contoh

background: url(http://img227.imageshack.us/img227/7504/recent.png);

Untuk masalah width dan height kita bisa mengisinya sesuai dengan lebar dan tinggi gambar
yang kita upload tadi.

Setelah semuanya sudah dilaksanakan, kita maupun pembaca kita bisa menikmati tampilan
gambar yang lebih menarik dari sekedar text biasa. Gunakanlah dengan bijak, perihal
bandwidth yang akan membengkak baik dari sisi server hosting kita, maupun dari akses para
pembaca.

Selamat Ber-CSS ria!