Costumize blogger kita lagi yuk.
Emoticon/smiley biasanya digunakan untuk menyatakan kondisi, senang, sedih, marah dll. Selain itu juga sebagai pemanis kolom komentar, sehingga tampak lebih hidup.
Langsung saja kita breakdown :
>>Style #1. Emoticon Otomatis Sesuai Simbol Ketikan Keyboard
#Cara Menampilkan Emoticon Smiley Ke Blog :
Step 1>> Login ke Blogger Account
Step 2>> Masuk ke Template >>pilih Edit HTML
Step 3>> Cari kode ]]></b:skin> dengan menekan CRTL + F pada keyboard
Step 4>> Tambahkan kode CSS di bawah ini tepat di atasnya kode ]]></b:skin>
Pada tutorial kali ini saya ingin berbagi cara menampilkan emoticons smiley pada komentar blogger. Dengan beberapa pilihan costumize saya berharap sobat blogger bia memilih cara menampilkan emoticon smaley sesuai selera.Dipencarian google anda akan menemukan banyak blog tutorial yang membahas cara menambahkan yahoo smiley emoticons pada komentar blogger tapi yang menggunakan konsep JQuery mungkin masih jarang. Ini adalah fasilitas emoticons otomatis yang dapat merubah simbol emo seperti :), :D, :P, menjadi sebuah gambar yang telah ditentukan. Semoga dengan trik ini threaded comments blog anda tampil lebih aktraktif.
Emoticon/smiley biasanya digunakan untuk menyatakan kondisi, senang, sedih, marah dll. Selain itu juga sebagai pemanis kolom komentar, sehingga tampak lebih hidup.
 |
| Fig, Animation Emoticons Smiley |
>>Style #1. Emoticon Otomatis Sesuai Simbol Ketikan Keyboard
 |
| Fig. Emoticon smiley trick |
Step 1>> Login ke Blogger Account
Step 2>> Masuk ke Template >>pilih Edit HTML
Step 3>> Cari kode ]]></b:skin> dengan menekan CRTL + F pada keyboard
Step 4>> Tambahkan kode CSS di bawah ini tepat di atasnya kode ]]></b:skin>
| .emoWrap { background-color:#fff; border:2px solid#0B6138;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:10px 14px; color:black; font:bold 12px Tahoma,Arial,Sans-Serif; text-align:center; } img.emo, input.emoKey { display:inline-block; /* Penting! */ *display:inline; vertical-align:middle; } input.emoKey { border:1px solid #ccc; background-color:white; font:bold 11px Arial,Sans-Serif; padding:1px 2px; margin:0px 0px 0px 2px; color:black; } |
Step 5>> Kemudian tambahkan kode JQuery tepat di atas kode </head>
| <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> |
Note :
Untuk anda yang sudah memiliki atau menginstal script JQuery pada template anda maka langkah diatas abaikan saja! (perhatikan script di dalam kode </head> untuk memastikan bahwa kode JQuery di atas sudah ada atau belum dan tidak double script agar blog anda lebih responsif)
|
| <script type='text/javascript'> //<![CDATA[ var emoRange = "#comments p, div.emoWrap", putEmoAbove = "iframe#comment-editor", emoMessage = "To insert emoticon you must added at least one space before the code."; //]]> </script> <script src='https://tipstrikblogging.googlecode.com/files/EmoticonsKeren.js type='text/javascript'/> |
Step 7>> Simpan Template dan lihat hasilnya
>>Style #2. Emoticon Gif Yahoo