CARA MEMBUAT EMOTICON-SMILE DI BLOGDuta Kopi Indonesia

CARA MEMBUAT EMOTICON-SMILE DI BLOG

Emoticon-Smiley Seperti yang terdapat pada Chat jejaring social seperti Facebook ternyata dapat juga di aplikasikan kedalam blog kita lho... Mungkin di antara temen-temen banyak yang masih bingung, bagaimana sih cara memasang emoticon ke dalam kotak pesan blog kita..???

Tentunya langkah pertama adalah kita harus melakukan Coding terlebih dahulu karena ini memerlukan code Javascript Untuk membuatnya...

Oke, langsung aja…

Kalo temen-temen Blogger tertarik untuk memasang Emoticon seperti di facebook Silahkan temen-temen ikuti langkah-langkah dibawah ini. Pada intinya ada 3 langkah penting yang harus dilakukan:

a. Memasang kode HTML yang berguna untuk menampilkan preview emoticon-smiley di bagian atas kotak komentar. Fungsinya sebagai panduan pengunjung ketika hendak membuat emoticon pada komentar. a. Memasang CSS untuk mengatur tampilan emoticon.

b. Memasang CSS untuk mengatur tampilan emoticon.

c. Memasang kode javascript untuk mengconvert perintah menjadi gambar emoticon.

Berikut langkah pemasangannya :
catatan: code berwarna Hijau

1. Masuk ke Design/Template > Edit HTML

2. Jangan lupa Centang terlebihdahulu "Expand Widget Templates"

3. Copy paste kode CSS berikut di ATAS ]]></b:skin> (cari dg Ctrl + F):

.bukarahasiasmiley {background: none repeat scroll 0 0 #EFF5FB!important;font-size: small !important;padding: 5px !important;margin:auto !important;text-align: left !important;font-weight:bold !important;width:100% !important;-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;}

.bukarahasiasmiley span {padding-right: 3px !important;}

img.brbsmly {height: auto !important;vertical-align: middle !important;width: auto !important;border:0px !important;}

Jika ingin ganti warna background, ganti #EFF5FB dengan kode warna lain.

4. Cari <b:if cond='data:post.embedCommentForm'>. Biasanya ada dua tag xml seperti itu, cari & pilih yg kedua, yaitu yg berpasangan dengan <b:include data='post' name='comment-form'/>.

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

5. Copy kode HTML berikut letakkan di BAWAH/SETELAH <b:if cond='data:post.embedCommentForm'>.

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;-)

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/> /:)

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:-)

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =;

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-|

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-(

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O)

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> :-?

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd

<img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^

<img class='brbsmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar!

</div>

6. Copy kode berikut & letakkan di atas kode </body>:

7. Save templates

NB: Copy Code yang berwarna Hijau

SUMBER SCRIPT: http://www.buka-rahasia.blogspot.com

Coffee Arabica Gayo Organic