Menambahkan emoticon (smiley) di blogger/blogspot

Posted by aRfian on Oct 23, 2007

Satu lagi kekurangan blogger, ga ada emoticonnya!!!
well, tapi ini bisa diakali, setelah googling dan mencari2 cara menambahkan emoticon,
saya menemukan beberapa cara yang bisa digunakan untuk menambahkan emoticon.
pastinya dengan memodifikasi template blogger, tapi beberapa cara membutuhkan plugin tambahan seperti greasemonkey.

Cara yang membutuhkan plugin greasemonkey tentu saja tidak saya ambil, karena walaupun jadi amat mudah (gambar emoticon tampil diatas tempat posting),
tapi cara mengurangi mobilitas, karena setiap pindah tempat ngenet, berarti harus install greasemonkey lagi, repot

——cara kedua (saya pake yang ini)———
ada cara lain yang hanya mengubah template blogger, caranya sebagai berikut:

1) Copy paste kode ini didalam (setelah) <head> tag:
<!–BloggerEmoticons–>
<script type=”text/javascript”>
<!–function replaceText() {
// no support
if(!document.getElementById) {
return;
}

bodyText = document.getElementById(”body”;
theText = bodyText.innerHTML;
// replace
theText = theText.replace(/;\)/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/wink.gif” alt=”” />’;
theText = theText.replace(/;-\)/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/wink.gif” alt=”;-)” />’;
theText = theText.replace(//g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif” alt=”” />’;
theText = theText.replace(/:-D/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif” alt=”:-D” />’;
theText = theText.replace(/B\)/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/cool.gif” alt=”B)” />’;
theText = theText.replace(/B-\)/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/cool.gif” alt=”B-)” />’;
theText = theText.replace(/:x/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/mad.gif” alt=”:x” />’;
theText = theText.replace(/:X/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/mad.gif” alt=”:X” />’;
theText = theText.replace(/:-x/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/mad.gif” alt=”:-x” />’;
theText = theText.replace(/:-X/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/mad.gif” alt=”:-X” />’;
theText = theText.replace(/:-\(/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/sad.gif” alt=”:-(” />’;
theText = theText.replace(/:\(/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/sad.gif” alt=”” />’;
theText = theText.replace(/:o/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif” alt=”:o” />’;
theText = theText.replace(/:O/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif” alt=”:O” />’;
theText = theText.replace(/:-o/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif” alt=”:-o” />’;
theText = theText.replace(/:-O/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif” alt=”:-O” />’;
theText = theText.replace(//g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif” alt=”” />’;
theText = theText.replace(/:-p/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif” alt=”:-p” />’;
theText = theText.replace(/:-P/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif” alt=”:-P” />’;
theText = theText.replace(/:P/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif” alt=”:P” />’;
theText = theText.replace(/:-\)/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/smile.gif” alt=”:-)” />’;
theText = theText.replace(/:\)/g,’<img src=”http://photos1.blogger.com/blogger/7678/802/1600/smile.gif” alt=”” />’;

bodyText.innerHTML = theText;
}

–>
</script>
<!–BloggerEmoticons–>

2) Ubah tag <body> menjadi <body id=”body” onload=”replaceText();”>

3) Udah, gampang kan. Selamat Menikmati!

——cara ketiga (lebih mudah lagi)———-
1. Klik template > edit HTML> centang pada Expand Widget Templates dan cari ini:
]]>

2. copy paste kode ini dibawah yang tadi
]]>

3. Save template, udah

nb:
kalau mau aman (kali aja gambarnya ilang) atau mau tambah emoticon lagi, lebih baik upload sendiri aja gambarnya/scriptnya, terus diubah/ditambah aja kode diatas, sesuaikan alamat gambar dengan yang anda upload.

=====updated=====
aduh, ada masalah lagi, kode yang gw tulis jadi kacau, berubah jadi smiley
tapi untungnya kalo di copy hasilnya masih bener…

3 Comments »

Masadhi:

Klo di wordpress apa bisa diimplementasikan yak?

February 8th, 2008 | 8:10 am

aRfian:

kode ini khusus blogger, kalau di wordpress tidak bisa jalan, karena struktur kode blogspot dan wordpress beda mas…

nah disinilah indahnya wordpress masadhi, kalau mau nambah smiley ga usah repot2 ngerubah kode template, tinggal install plugin baru, tentunya kalau pake hosting sendiri ya

Kalau masih numpang di wordpress.com sih setahu gw ga bisa ngutak-ngatik beginiannya… soalnya kita ga dikasih ftp account dan ga bisa masuk CPanelnya…

February 8th, 2008 | 9:54 am