Cara memasang Emoticons pada comment di blog Terbaru

Hallo sobat blogger, kali ini saya akan mencoba share Cara memasang Emoticons pada comment di blog Terbaru yahhh..Walau mungkin di mbah google anda akan menemukan banyak tutorial yang membahas tentang 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.mau coba??yuk kita ikuti langkah - langkah berikut ini.

Cara langkah pertama :

• Masuk ke Blogger > Dashboard Blogger > Template > Edit HTML. Cari kode ]]></b:skin>, tekan ctrl+F untuk melakukan pencarian, lalu pastekan script dibawah ini diatas kode ]]></b:skin>.

 

/* Emoticon Smiley -------------------------------------------- */
.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;
}

• Cari kode </head>. Lalu pastekan script dibawah ini diatas kode </head>.

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "Untuk menyisipkan emoticon, beri satu spasi sebelum memasukkan kode.";
//]]>
</script>
<script src='https://sites.google.com/site/airalokablogspotcom/download/Emoticon%20Smiley.js' type='text/javascript'/>

Note : Jika blog anda sudah terpasang JQuery, hapus script yang berwarna biru.

• Selesai.

(bila langkah yang pertama tidak berhasil silahkan coba cara langkah yang ke dua.)

Cara langkah yang ke dua :

Note : Hapus dulu kode script yang disimpan diatas kode </head> tadi sebelum melakukan cara langkah yang ke dua.

• Pastekan kode script berikut di atas kode </body>

 

<script type='text/javascript'>
//<![CDATA[
// kode js untuk menampilkan emoticon
jQuery(document).ready(function () {emoticonx({
emoRange:".post-body, div.emoWrap",
})
});
//]]>
</script>
<script src='http://id-pemula-javascript.googlecode.com/files/emoticons.js' type='text/javascript'/>

Kemudian Simpan template, dan llihat hasilnya.


Demikian postingan saya tentang Cara memasang Emoticons pada comment di blog Terbaru, Semoga bermanfaat.