Kumpulan Cara Menambahkan Emoticons Smiley Di Kolom Komentar Blogger

Costumize blogger kita lagi yuk.

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
Fig, Animation Emoticons Smiley 
Langsung saja kita breakdown  :

>>Style #1. Emoticon Otomatis Sesuai Simbol Ketikan Keyboard

Fig. Emoticon smiley trick
Fig. Emoticon smiley trick
#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>  

.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)

Step 6>> Masukan kode di bawah ini tepat di bawah kode 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='https://tipstrikblogging.googlecode.com/files/EmoticonsKeren.js type='text/javascript'/>

Step 7>> Simpan Template dan lihat hasilnya

>>Style #2. Emoticon Gif Yahoo
SILAHKAN COPY PASTE ARTIKEL PBBLOG DAN GENERATE MENJADI ARTIKEL UNIK ANDA


BACA JUGA

Trik Comments 1741365870977947065

Posting Komentar

Scroll All Content

Memuat konten...

RANDOM POST

Memuat...

Google+ Badge

item