Menambahkan smiley selector di kolom komentar NextWapblog

Kode ini bukan buatan saya, Tapi saya dapat dari halaman smiley dari NWB, Saya intip source kodenya menggunakan browser firefox menggunakan Addon View Source.

Fungsi smiley selector ini sama seperti smiley selector di halaman smiley nwb, Yaitu jika di klik icon smiley nya otomatis kode smiley nya tertulis di kolom komentar, Manfaatnya adalah agar pengunjung lebih mudah berkomentar dengan smiley. Gimana? tertarik memasangnya?.

Langsung saja saudara-saudara, Walaupun saya nulis panjang lebar palingan kaga di baca sama user, njiiirrr.

1. Masuk Ke Dasboard => Tampilan => Tema,
2. Pilih CSS Editor (Mobile / Desktop),
3. Tambahkan Kode CSS ini di bagian paling bawah:

.simley {display:inline;letter-spacing:10px;}
.simley img {max-width:30px;max-height:30px;}

Lalu simpan.
4. Masuk ke template editor (Mobile atau Desktop),
5. Pilih post.html,
6.Cari kode berikut:

<textarea class="form-control" name="comment_text" id="comment_text" rows="8" required="required">{{ form_comment_value.comment_text }}</textarea>

<div class="help-block">You may use these HTML tags and attributes: &lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;blockquote cite=&quot;&quot;&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=&quot;&quot;&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=&quot;&quot;&gt; &lt;strong&gt;</div>

7. Hapus bagian yang teks warna kuning dan ubah pakai kode berikut:
<center>Klik untuk menambahkan smiley.!!</center> <div class="table table-responsive"> <table border="0" cellpadding="4" cellspacing="0"> <tbody> <tr> <td><a href="javascript:void(0);" onclick="insert_santo(':-)', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/grin.gif" alt="grin" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':lol:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/lol.gif" alt="LOL" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':cheese:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/cheese.gif" alt="cheese" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':)', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/smile.gif" alt="smile" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(';-)', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/wink.gif" alt="wink" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':smirk:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/smirk.gif" alt="smirk" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':roll:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/rolleyes.gif" alt="rolleyes" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':-S', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/confused.gif" alt="confused" style="width: 19; height: 19; border: 0;" /></a></td></tr> <tr> <td><a href="javascript:void(0);" onclick="insert_santo(':wow:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/surprise.gif" alt="surprised" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':bug:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/bigsurprise.gif" alt="big surprise" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':-P', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/tongue_laugh.gif" alt="tongue laugh" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo('%-P', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/tongue_rolleye.gif" alt="tongue rolleye" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(';-P', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/tongue_wink.gif" alt="tongue wink" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':p', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/rasberry.gif" alt="raspberry" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':blank:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/blank.gif" alt="blank stare" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':long:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/longface.gif" alt="long face" style="width: 19; height: 19; border: 0;" /></a></td></tr> <tr> <td><a href="javascript:void(0);" onclick="insert_santo(':ohh:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/ohh.gif" alt="ohh" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':grrr:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/grrr.gif" alt="grrr" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':gulp:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/gulp.gif" alt="gulp" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo('8-/', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/ohoh.gif" alt="oh oh" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':down:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/downer.gif" alt="downer" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':red:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/embarrassed.gif" alt="red face" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':sick:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/sick.gif" alt="sick" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':shut:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/shuteye.gif" alt="shut eye" style="width: 19; height: 19; border: 0;" /></a></td></tr> <tr> <td><a href="javascript:void(0);" onclick="insert_santo(':-/', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/hmm.gif" alt="hmmm" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo('>:-(', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/angry.gif" alt="angry" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':zip:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/zip.gif" alt="zipper" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':kiss:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/kiss.gif" alt="kiss" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':ahhh:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/shock.gif" alt="shock" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':coolsmile:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/shade_smile.gif" alt="cool smile" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':coolsmirk:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/shade_smirk.gif" alt="cool smirk" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':coolgrin:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/shade_grin.gif" alt="cool grin" style="width: 19; height: 19; border: 0;" /></a></td></tr> <tr> <td><a href="javascript:void(0);" onclick="insert_santo(':coolhmm:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/shade_hmm.gif" alt="cool hmm" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':coolmad:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/shade_mad.gif" alt="cool mad" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':coolcheese:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/shade_cheese.gif" alt="cool cheese" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':v', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/pacman.gif" alt="pacman" style="width: 10; height: 10; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':cry:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/cry.gif" alt="cry" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':like:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/like.gif" alt="like" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':up', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/sundul.gif" alt="up" style="width: 1; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':takut:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/takut.gif" alt="takut" style="width: 19; height: 19; border: 0;" /></a></td></tr> <tr> <td><a href="javascript:void(0);" onclick="insert_santo(':mad:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/Mad.gif" alt="mad" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':bata:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/bata.gif" alt="bata" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':Lol:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/Lol.gif" alt="lol" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':ojek:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/Rolleyes.gif" alt="ojek" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':musik:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/Twisted.gif" alt="twisted" style="width: 19; height: 19; border: 0;" /></a></td><td><a href="javascript:void(0);" onclick="insert_santo(':becak:', 'comment_text')"><img src="http://www.nextwapblog.com/images/smileys/emokaskusmenujutkpsmall.gif" alt="becak" style="width: 19; height: 19; border: 0;" /></a></td><td> </td><td> </td></tr> </tbody> </table></div> <script type="text/javascript" charset="utf-8">/*<![CDATA[ */ var smiley_map = {}; function insert_santo(smiley, field_id) { var el = document.getElementById(field_id), newStart; if ( ! el && smiley_map[field_id]) { el = document.getElementById(smiley_map[field_id]); if ( ! el) return false; } el.focus(); smiley = " " + smiley; if ('selectionStart' in el) { newStart = el.selectionStart + smiley.length; el.value = el.value.substr(0, el.selectionStart) + smiley + el.value.substr(el.selectionEnd, el.value.length); el.setSelectionRange(newStart, newStart); } else if (document.selection) { document.selection.createRange().text = smiley; } }// ]]></script></div>
8. Lalu Simpan. Dan lihat..

Untuk demo kalian bisa lihat di blog saya yang satunya Disini

Selesai sudah artikel yang berguna dan berfaedah ini, Silahkan pasang dan pelajari kode javascriptnya, Buat ngeblog sambil belajar.

Berbagi :