Pengikut

22 Oktober 2008

Kreasi Ikon Smiley Sendiri


Awalnya begini, melihat ada beberapa ekspresi senang atau sedih yang ditampilkan di blog ini, pasti akan lebih cakep bila ekspresinya bisa terwakilkan oleh gambar-gambar yang lebih ekspresif. Tak sekedar teks icon senang seperti : ) atau : - ), dan juga bukan sekedar : ( atau : - ( di kala sedih. Tapi :) atau :D

Beberapa di antara kita yang sering YM-an, pasti mengenalnya sebagai smiley icon. Lucu-lucu kan, bahkan ikon setan yang mestinya serem terlihat sangat lucu di sana. Cocok kan kalo dipake di blog! Pasti akan banyak ekspresi, ungkapan atau kata-kata yang lebih membidik kesadaran bila melengkapinya dengan gambar.

Jadi idenya simpel aja, bila ada teks yang mengandung : ) atau : ) ) atau juga : ( di dalam posting, maka akan segera digantikan pesannya menjadi sebuah gambar.

Untuk persiapan ini, kita butuh 3 hal :

1. Kode untuk memiliha milih teks mana yang akan digantikan
2. Gambar berupa ikon kecil sebagai pengganti teks
3. Edit HTML di blognya.

OK, langsung kita mulai.

Untuk bagian 1, pemilihan kode, bisa kita gunakan kode javascript yang lebih mudah pengaplikasiannya ke blog. Bisa langsung dituliskan di dalam kode HTML blognya, atau kita pisah menjadi file dengan ekstensi .js dan kita upload di hosting gratisan. Googlepages misalnya. Nah, edittag menggunakan opsi terakhir. Mengunggahnya di googlepages. Coba unduh di sini.

Bila ingin mengutak-atik, bisa juga filenya dibuka di Notepad. Lalu bila ingin mengganti gambar-gambarnya, coba gulung kebawah hingga menemukan kode :

d[i].innerHTML = d[i].innerHTML.replace(/\s:-?D/ig, '
<img src="http://agushery.googlepages.com/edittagbigsmile.gif"
id="new" /> ');

Artinya, file beralamat di http://agushery.googlepages.com/edittagbigsmile.gif akan dipakai untuk menggantikan teks : - D, di kodenya menjadi :-?D. Bila punya gambar sendiri, silakan upload lalu ganti alamat filenya menjadi alamat URL file gambar yang baru diunggah. Oh ya, sekarang bagian ke dua :

Gambar.
Dengan pertimbangan ukuran gambar yang mini, maka akan lebih baik bila kita gunakan software gambar bitmap untuk membantunya. Misalnya Adobe Photoshop. Kita buat ukuran canvas 16*16 pixel. Sebenarnya ini ukuran yang pas agar teks di atas dan di bawahnya tak terkena imbas ukuran gambar. Namun bisa pula diperbesar seperti yang edittag gunakan menjadi 20*20 pixel.

Bagaimana membuatnya? Cukup gunakan pencil tool untuk menggambarnya. Kira-kira saja, toh ukurannya kecil. Terlebih saat edittag ingin membuat ikon diri sendiri. Susah menggambar di ukuran kecil. Jadi cukup lah gambarnya terwakili dengan kacamata agar terlihat edittag :).

Jangan lupa untuk menyimpannya. Bisa sebagai gif, png, atau jpg. Untuk membuat animasi seperti di blog ini, edittag gunakan varian Adobe lainnya, yakni Adobe Image Ready. Tambahkan frame agar bisa dibuat animasi. Tampilannya seperti berikut :

Dan setelah gambar selesai, juga kode javascript telah disesuaikan dan keduanya di upload. Kini bagian penyetelan di blog. Untuk itu perlu edit HTML blognya. Saat ini edittag menggunakan tampila blog berjenis Tata Letak (layout), bukan Template.

Untuk itu klik Tata Letak, lalu Edit HTML. Kemudian cari bagian <head>, lalu sisipkan kode berikut di bawahnya :

<script src='http://agushery.googlepages.com/addSmiley.js'type='text/javascript'></script>

Ingat ya, alamat http://agushery.googlepages.com/addSmiley.js bisa diganti dengan alamat file milik sendiri. Kemudian satu lagi, tuju bagian/seksi pos agar javascriptnya bisa dibaca di bagian posting. Misalnya di kode edittag adalah :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Ingat juga, bagian ini bisa berganti nama menjadi apa saja di kode yang berbeda. Petunjuknya adalah type='Blog' di dalam Body. Selanjutnya, simpan!. Oh ya, expand widget tak perlu dicentang pada proses di atas.

Bila tampilan gambar ikon masih naik turun pada paragraf, coba cek bagian CSSnya, terutama di #main-inner. Misalnya di edittag kodenya adalah :

.post .post-body img { margin-bottom: 0px; }

Angka 0 di atas artinya posisi gambar berada di level yang sama dengan teks. Bila menggantinya dengan angka 10, maka posisinya akan terangkat lebih tinggi dari teks.

Silakan mencoba ya!