Belajar Blogging : Cara Menampilkan Icon Smile atau Emoticon di Blog

Para pengguna blogger pasti sudah mengetahui icon smile yang banyak digunakan oleh pengguna blog, dimana setiap ada kode teks icon smile maka kode tersebut akan berganti dengan icon smile secara visual. Namun di blogger tidak support untuk icon smile seperti ini. Tapi jangan berkecil hati, semua pasti ada solusinya.

Anda bisa lihat contoh di blog ini, setiap ada penulisan text yang mengacu kepada code smile pasti akan berubah secara visual. Sebagai contoh, saya mengetikan icon senyum :) dan tertawa :D dan ketika saya tersipu malu :$. Icon smile ini akan tampil pada semua text yang ada pada blog kita di manapun letaknya

Notes : Tidak termasuk dalam shoutbox, link dan gambar), yang paling menguntungkan icon smile ini dapat memberikan keterangan emoticon pengujung ketika sedang memberikan komentar.

1. Login ke template > edit HTML > Expand Widget Templates dan cari kode dibawah ini:



]]></b:skin>


2. Jika sudah ketemu copy code javascript di bawah, dan letakan dibawah kode ini


]]></b:skin>

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

 

3. Simpan dan lihat hasilnya. 
 


Icon smile ini akan tampil secara otomatis pada blog kita setiap kali kita mengetikan standar kode dari icon tersebut.



Standar kode smile yang bisa digunakan :

:) or :-) 
:D or :-D 
:$ or :-$ 
:( or :-( 
:p or :-p 
;) or ;-) 
:k or :-k 
:@ or :-@ 
:# or :-# 
:x or :-x 
:o or :-o




ATAU PILIH CARA KE-2 BERIKUT DI BAWAH INI :


Log in ke Blogger

1. Klik rancangan
2. Edit HTML
3. centang expan pada kotak kecil
4. Cari kode </body>
5. Lalu letakkan script dibawah ini diatas kode </body>

<script src='http://infonetmu.googlecode.com/files/smiley.js' type='text/javascript'/>

 6. Terus cari Code :

 <p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if>

</b:if>

</p>

7. Kalau tidak sama, cari yang paling mendekati. Kemudian letakkan kode berikut ini dibawah <p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>

:))

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>

:)]

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>

;))

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>

;;)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>

:D

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>

;)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>

:p

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>

:((

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>

:)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>

:(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>

:X

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>

=((

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>

:-o

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>

:-/

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>

:-*

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>

:

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>

8-}

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>

~x(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>

:-t

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>

b-(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>

:-L

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>

x(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>

=))

</b>

 
Kemudian Klik Save Template. 
Selesai. Silahkan dicoba di kotak komentar anda.