Cara Menambahkan Emoticon Pada Blog

Hallo Sobat Blogger, kali ini saya akan share bagaimana Cara Menambahkan Emoticon Pada Blog , Emoticon Ini menggunakan konsep JQuery. Ini adalah fasilitas emoticons otomatis yang dapat merubah simbol :), :D, :P, menjadi sebuah gambar yang telah ditentukan. Oke langsung saja lihat langkah langkahnya dibawah ini : 

langkah langkah

1. Masuk ke Blogger > Dashboard Blogger > Template > Edit HTML. Cari kode ]]></b:skin>, agar lebih cepat, gunakan fasilitas Find ( CTRL+F ) lalu pastekan script dibawah ini  tepat 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;
} 

2. Kemudian, Cari kode </head>. Lalu pastekan script dibawah ini tepat 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'/>

3. Save/Simpan template

Selamat Mencoba :D