HTML Addicted: Private Emoticon

Well, teman-teman bisa melihat emoticon di atas? Memang lucu. Emoticon memang berfungsi untuk memberikan ekspresi dalam pesan/komentar kita. Dengan ekspresi tersebut, pesan akan terlihat lebih menarik karena tidak sekadar teks. Bahkan dengan emoticon tersebut teman-teman bisa menggambarkan suasana hati teman-teman saat mengetikkan pesan tersebut. Maksud pun bisa lebih tersampaikan.

Menyadari fungsi luar biasa dari emoticon tersebut, saya pun bermaksud untuk memberikan fasilitas tersebut bagi pembaca. Sebagai pengganti kode javascript (berhubung di wordpress.com dilarang), akhirnya beberapa saat yang lalu saya menyediakan widget emoticon untuk pembaca, dengan harapan pembaca bisa mengambil gambar tersebut ke komentar. Namun kemudian saya urungkan niat karena yang bisa melampirkan gambar ke komentar hanya saya sebagai pemilik blog (tidak untuk pembaca). Sehingga kini saya hanya memberikan bantuan cheatsheet berupa kode emoticon yang diperkenankan di wordpress.com (lihat widget WP Emoticon di samping).

Setelah berkeliling ke berbagai blog yang juga satu ide dengan saya mengenai emoticon, rupanya hal itu sudah lumrah di tataran blog wordpress.com. Tamu memang tidak punya kebebasan untuk memasang emoticon unik ke blog seseorang. Hanya yang punya blog yang bisa. Jadi jangan marah ya!

Dan jika teman-teman juga ingin memakai emoticon unik di blog teman-teman sendiri, berikut saya berikan penjelasan tutorialnya… Yuk mari!

Dan seperti biasa saya akan menjelaskan beberapa hal yang perlu teman-teman ketahui sebelum masuk ke tutorial.

Emoticon itu sejarahnya kayak gimana sih?

Emoticon berbentuk gambar yang pertama kali dikenal orang adalah smile, sebuah bulatan kuning yang punya wajah. Versi smile ini sudah sangat beragam dan menyebar di berbagai aplikasi. Di wordpress.com hanya ada sedikit yang bisa digunakan. Di Yahoo!Messenger lebih beragam. Dan pastinya masih ada lagi wajah kuning lainnya.

Setelah itu bermunculan berbagai emoticon yang lebih beragam dan unik. Di blog saya ini ada Yoyo (monyet cowok) dan Cici (monyet cewek). Yang terkenal lainnya ada Onionhead (si kepala bawang) dan Crazy Rabbit. Ada juga Puca (gadis dari Cina), Pig (Babi), Parampaa (buatan Indonesia), sampai emoticon khusus Kaskus.

Sejatinya gambar emoticon ini muncul secara otomatis setelah kita mengetikkan kode tertentu. Namun berhubung kita orang tidak punya kuasa melakukan pengaturan tersebut, maka cukuplah melampirkan alamat gambar di dalam kode HTML <img src=”…”> seperti yang biasa dilakukan.

OK, terus apa yang harus saya ketahui tentang widget emoticon yang akan kita buat sebentar lagi?

Penjelasan sederhana tentang widget ini (seperti yang ada di blog saya) adalah sama seperti Text Area, hanya saja isinya adalah gambar. Namun untuk lebih jelasnya kira-kira begini:

  1. Ada text area dengan width dan height tertentu.
  2. Di dalamnya ada tabel.
  3. Di dalam tabel ada gambar-gambar (emoticon).

Selain itu apa lagi?

Kode HTML Table: kita memerlukan tabel agar gambar tidak morat-marit. Dan yang seperti teman-teman ketahui, tabel ini terdiri dari baris dan kolom. Hal ini pun tercermin melalui kode-kodenya:

<table>...</table> untuk awal dan akhir tabel
<tr>...</tr> untuk menggambarkan baris
<td>...</td> untuk menggambarkan kolom

Dalam memasukkan kode ini tidak boleh terbalik. Adapun logika pembuatan tabel ini adalah kita mulai dari baris pertama, lalu buat kolom-kolomnya, buat baris kedua, lalu buat kolom-kolomnya, buat baris ketiga, lalu buat kolom-kolomnya, dan seterusnya. Jadi kira-kira seperti inilah yang harus dituliskan:

<table>
   <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
   </tr>
</table>

Kode di atas artinya tabel terdiri dari 1 baris dan 3 kolom.

Kode HTML Image: ini adalah kode HTML sederhana untuk memasukkan gambar, yaitu:

<img src="...">

dimana titik-titik diisi dengan lokasi gambar. Selain itu, gambar juga dapat diatur width dan heightnya. Contoh:

<img src="http://asalgambar.com/gambar.jpg" width="90px" height="75px">

Artinya, gambar yang muncul berlokasi di http://asalgambar.com/gambar.jpg dengan lebar 90 pixel dan tinggi 75 pixel.

 

Wah, udah nggak sabar nih. Langsung aja gimana cara bikinnya!

Ikuti langkah-langkah berikut:

  1. Masuk ke Dashboard pilih Appearance > Widget dan aktifkan widget Teks dengan menggesernya ke sidebar atau tempat lainnya.
  2. Di dalam sana, isikan kode untuk membuat text area (seperti yang ada di sini).
  3. masukkan kode HTML table sesuai keperluan.
  4. masukkan kode HTML image ke dalam table satu persatu.
  5. jangan lupa klik tombol Save

::::: END of TUTORIAL :::::

Bagaimana? Bisa dicoba? Jika ada pertanyaan jangan sungkan-sungkan. OK!
Iklan

9 thoughts on “HTML Addicted: Private Emoticon

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s