Cara Membuat Emoticons Smiley Pada Komentar Blogger

Beberapa waktu yang lalu saya telah bahas mengenai Cara Mudah Membuat Kotak Komentar Blog | Intense Debate, lumayan bagus untuk di coba, karena itu membuat kolom komentar blog menjadi menarik. Untuk Tutorial Blogpot sekarang saya kembali membahas mengenai komentar bloggger, tapi kali ini membahas mengenai Emoticons Smileynya.

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.

SCREENSHOT EMOTICONS SMILEY UNTUK KOMENTAR BLOGGER

CARA MENAMBAHKAN EMOTICONS SMILEY KE BLOG

• Login ke akun blogger anda >> Template

• Klik Edit HTML

• Klik Ctrl+F Kemudian Cari kode ]]></b:skin>

• Tambahkan kode CSS berikut diatas 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;
}

• Kemudian tambahkan script JQuery berikut diatas kode </head>

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!

Tambahkan lagi Script berikut dibawah script JQuery tadi

<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://aliyfaizal.googlecode.com/files/EmoticonsSmiley.js type='text/javascript'/>

• Simpan template dan lihat hasilnya diblog anda

Demikian tutorial cara menambahkan emoticons smiley pada komentar blogger. Semoga bermanfaat