Tutorial kali ini saya ingin berbagi cara menampilkan emoticons smiley pada komentar
blogger. Walau mungkin 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 :), :D, :P, menjadi sebuah gambar yang telah ditentukan.
Semoga dengan trik ini threaded comments blog anda tampil lebih aktraktif.
Setelah login, pada dasbor masuk ke menu template kemudian klik edit HTML dan lanjutkan:
Klik Ctrl+F dan cari kode ]]></b:skin>
Tambahkan kode CSS berikut diatasnya;
.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;
}
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
type='text/javascript'></script>
Untuk anda yang sudah memiliki atau menginstal script JQuery pada template anda maka langkah
diatas abaikan saja!
<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='http://tipstrikblogging.googlecode.com/files/EmoticonsKeren.js'
type='text/javascript'/>
Demikian tutorial cara menambahkan emoticons smiley pada komentar blogger. Semoga
bermanfaat!