Emoticon Yahoo Messenger Pada Template Blogsome
Hmmm… ini hasil eksperimen saya kemarin :). Secara default emoticon pada blogsome adalah emoticon standard bawaan instaler wordpress (emoticon warna kuning mungil). Untuk itu agar setiap kita menulis misal :) diubah otomatis menjadi gambar emoticon senyum yahoo messenger maka kita bisa memanfaatkan trik menggunakan Smarty seperti berikut ini.
Langkah-langkah :
- Masuk ke menu Options >> Writing
- Hilangkan tanda centang pada pilihan Formatting : Convert emoticons like :-) and :-P to graphics on display. Hal ini untuk mencegah emoticon standard bawaan wordpress nongol hehehehe… :D
- Masuk ke menu Manage >> Files kemudian lihat pada menu di bawah (disitu ada Main Page, Site Style Sheet, Posts, Comments)
- Pilih menu Posts. Maka akan muncul editing template posting.
- Pada template tersebut temukan kode ini {the_content} dan ganti dengan kode Smarty berikut :
{capture name=emoticon}{the_content}{/capture}
{assign var=tulis_emoticon value=$smarty.capture.emoticon|replace:":)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'>"|replace:":(":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'>"|replace:";)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'>"|replace:":D":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'>"|replace:";;)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'>"|replace:">:D<":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif'>"|replace:":-/":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'>"|replace:":x":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'>"|replace:':">':"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif'>"|replace:":P":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'>"|replace:":-*":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'>"|replace:"=((":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'>"|replace:":-O":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'>"|replace:"X(":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'>"|replace:":>":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'>"|replace:"B-)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'>"|replace:":-S":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'>"|replace:"#:-S":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'>"|replace:">:)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'>"|replace:":((":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'>"|replace:":))":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'>"|replace:":|":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'>"|replace:"/:)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'>"|replace:"=))":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'>"|replace:"O:-)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'>"|replace:":-B":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'>"|replace:"=;":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'>"|replace:":-c":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'>"|replace:":)]":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'>"|replace:"~X(":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'>"|replace:":-h":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'>"|replace:":-t":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'>"|replace:"I-)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'>"|replace:"L-)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/30.gif'>"|replace:":-&":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'>"|replace:":-$":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'>"|replace:"[-(":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'>"|replace:":O)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'>"|replace:"<:-P":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'>"|replace:"(:|":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'>"|replace:"=P~":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'>"|replace:":-?":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'>"|replace:"#-o":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'>"|replace:"=D>":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'>"|replace:":-SS":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'>"|replace:"@-)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'>"|replace:":^o":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'>"|replace:":-w":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'>"|replace:":-<":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/46.gif'>"|replace:">:P":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'>"|replace:"<):)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'>"|replace:"X_X":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'>"|replace:":!!":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'>"|replace:"\m/":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'>"|replace:":-q":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'>"|replace:":-bd":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'>"|replace:"^#(^":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'>"|replace:":ar!":"<img src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'>"}
{$tulis_emoticon}
NB :
Untuk URL emoticon yahoo messenger selengkapnya bisa diambil disini :
http://messenger.yahoo.com/features/emoticons/
Sedangkan URL emoticon yahoo messenger yang tersembunyi (hidden) bisa diambil disini :
http://messenger.yahoo.com/features/hiddenemoticons/
Inti dari kode Smarty diatas adalah mengganti tulisan :) :P :D ;) dll menjadi gambar emoticon animasi. Hehehehehe…
Cara ini juga bisa diterapkan pada template komentar. Langkah-langkahnya sbb :
- Masuk ke menu Manage >> Files kemudian lihat pada menu di bawah (disitu ada Main Page, Site Style Sheet, Posts, Comments)
- Pilih menu Comments. Maka akan muncul editing template komentar.
- Pada template tersebut temukan kode ini {comment_text} dan ganti dengan kode Smarty berikut :
{capture name=komentar_emoticon}{comment_text}{/capture}
{assign var=tulis_komentar_emoticon value=$smarty.capture.komentar_emoticon|replace:":)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'>"|replace:":(":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'>"|replace:";)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'>"|replace:":D":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'>"|replace:";;)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'>"|replace:">:D<":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif'>"|replace:":-/":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'>"|replace:":x":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'>"|replace:':">':"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif'>"|replace:":P":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'>"|replace:":-*":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'>"|replace:"=((":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'>"|replace:":-O":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'>"|replace:"X(":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'>"|replace:":>":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'>"|replace:"B-)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'>"|replace:":-S":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'>"|replace:"#:-S":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'>"|replace:">:)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'>"|replace:":((":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'>"|replace:":))":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'>"|replace:":|":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'>"|replace:"/:)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'>"|replace:"=))":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'>"|replace:"O:-)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'>"|replace:":-B":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'>"|replace:"=;":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'>"|replace:":-c":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'>"|replace:":)]":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'>"|replace:"~X(":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'>"|replace:":-h":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'>"|replace:":-t":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'>"|replace:"I-)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'>"|replace:"L-)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/30.gif'>"|replace:":-&":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'>"|replace:":-$":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'>"|replace:"[-(":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'>"|replace:":O)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'>"|replace:"<:-P":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'>"|replace:"(:|":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'>"|replace:"=P~":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'>"|replace:":-?":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'>"|replace:"#-o":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'>"|replace:"=D>":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'>"|replace:":-SS":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'>"|replace:"@-)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'>"|replace:":^o":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'>"|replace:":-w":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'>"|replace:":-<":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/46.gif'>"|replace:">:P":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'>"|replace:"<):)":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'>"|replace:"X_X":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'>"|replace:":!!":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'>"|replace:"\m/":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'>"|replace:":-q":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'>"|replace:":-bd":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'>"|replace:"^#(^":"<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'>"|replace:":ar!":"<img src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'>"}
{$tulis_komentar_emoticon}
Yup, semoga bermanfaat tutorial diatas :D
















tengkyu mas…mau coba dulu ach
Comment by adhe | 1 June 2008 | 12:00 pm
Comment by Testing Gambar Emoticon Animasi | 13 June 2008 | 8:36 am
Comment by Emoticon | 18 June 2008 | 8:16 pm
yuhui… thx ya…
jalan juga nih di blogsomeku
Comment by dadan | 23 July 2008 | 5:24 pm
boss…
mau nanya lagi…
caranya bikin CLOUD di rigth menu kayak punya anda gimana ya ?
boleh dong di bagi caranya
Comment by dadan | 23 July 2008 | 5:32 pm
Hehehehe… saya bikin manual
Tinggal dikasih aja ukuran font nya secara acak
Comment by Zawa | 28 July 2008 | 11:45 pm
duh kok saya gagal ya…
btw apabila saya menggunakan kode smarty buatan mas zawa itu apa ada yang perlu diinstall terlebih dahulu?
Comment by dimas | 29 July 2008 | 10:49 pm
Tidak memerlukan instalasi apapun. Perlu diingat, kode smarty ini hanya khusus untuk blog di Blogsome.com
Comment by Zawa | 31 July 2008 | 7:20 pm