Cara Membuat Menu Emoticon dan Konverter Pada Komentar Blog

Menu pada emoticon adalah menu yang berfungsi untuk mempermudah para pengunjung blog anda untuk memilih apa-apa yang ingin ia tulis kode emoticon sesuai keinginannya. Menu ini menggunakan kode javascrift dari jQuery hide dan toggle yang berfungsi untuk menyembunyikan gambar emoticon dan kode emoticon itu sendiri, agar tidak memakan banyak tempat saja menurut saya.

Sedangkan pada menu Konverter saya akan buat dengan open tab saja dan sederhana untuk menampilkan konverternya bila mana di klik. Tampilan yang saya buat kali ini akan saya bedakan dari menu emoticon pada blog saya ini. Bila memang anda penasaran, silahkan saja baca artikel ini lebih lanjut.

Dan dibawah ini adalah tampilan menunya gan !

Hide Menu

Show Menu

Nah bila anda tertarik dengan menu Emoticon dan Konverter, silahkan ikuti cara-caranya dibawah ini ! Buka blog anda dan kemudian masuk ke edite template

1. Masukan kode jQuery dibawah ini pada bagian atas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
$(document).ready(function() {
$('.show_emo').click(function(){
$('.comment_emo_list').toggle('slow');
    });
}); 

2. Lalu cari kode <p><data:blogCommentMessage/></p>, dan tambahkan kode dibawah ini pada bagian kode tersebut seperti contoh <p><data:blogCommentMessage/>........kode yang ada dibawah ini....</p>.

<a class='converters' href='http://dte.googlecode.com/svn/brain/map/html-escaper.html' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=400,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'>Konversi Kode</a>
<span class='show_emo'>Emoticon</span>

3. Setelah itu tinggal anda tambahkan kode dibawah ini tepat dibawah kode </p> penutup kode di atas.

<div class='comment_emo_list' style='display: none;'>
<div class='item'><img alt='emoticon' class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVIoBXLc_vPpj_Hpu1OjGAwgihanHix9zfZpVMuINYeuMjnXjYXogPtUuiDdYLeSIDADx5R_EL-4uNv-o8H26tQlhsYBHmU_QB74oI4hLXG6Y3Zi0X3VSqv5nYHme4x_-FDvlamo9Ia4xR/s15/smile1.gif'/><span>:)</span></div>
<div class='item'><img alt='emoticon' class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoeGQy3QB9Q3o4Zv412eadSF4oG0ywPspZ7ezqFFMy28FaSW20UXKaYezSR8IMhwzaIVHu5ZKc-eqWjs5pARn4ac9S0bl_PIh-pYbno4g9Rof45aVZyp88a20-kM9XvZYPsfrEUK4tU6wC/s15/sad.gif'/><span>:(</span></div>
<div class='item'><img alt='emoticon' class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIP4KO9DHoduu71w7r-NShqYnIWSDhc5J8a7pbmXTLdZLR7CecJ1ZGLPEzC3zihJYWvLrULAzPDPSCFYaOgiu-EAUSNhsD35ZWecOFuL4ONK2N1v_W0GkgTWwEx8hAqZ0QSA0nyYGtJgvd/s15/sadanimated.gif'/><span>=(</span></div>
<div class='item'><img alt='emoticon' class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSx8g2ocsm3pFsb4IIkp4xs8msd0R49fiATlNeUFIdVIiy1uRTRzqEzWFg4yVHzKWg0889PLFTCK3Alejba10YGePFiyUv02x2Fvn3ENBD5WS8L_NnfhaUjGsYAqU5k2bBI_kgQhwdvMIm/s16/smile.gif'/><span>^_^</span></div>
<div class='item'><img alt='emoticon' class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzP7lLBocgR7jJTHLwgekEIeY8SSuBBlQLcrQ3eEBYfO5JErNMEE-hcTlK2dH_WNhVbaRkkoHEmolzvZ7B_S1au9jQnM277AiIoagzpAMU1dB4cyNAHIYS7GKB2XrsiMbHpsq4Cfx5eJVf/s15/icon_smile.gif'/><span>:D</span></div>
<div class='item'><img alt='emoticon' class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzSQKildx-q1sXWhoPUXConWkLlMNFwUE2CHMM_QBalVVnOuuK_LHxtX4p1zIMzROIbWdUaBLDM2cB4KwiWqR_ybC1xax-0ySO-heSyN6tJFKcU5NN3Ocsq2Bo7p_bFNgU6RpC1FuzJAU2/s15/hihi.gif'/><span>=D</span></div>
<div class='item'><img alt='emoticon' class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvBDfF6H-nY7Ez3cLAb3bJqQBASSQSQlT3Rxg23vphdRyCZdTRU1q33MFLbgjx5YevXyf8pbloEgsCPSC0SpIs9rVImmGYvYGYE4MWyskb07sU0jfbj0YI7M0_c5qEzrx2KZ5knCOC3_WH/s30/applause.gif'/><span>|o|</span></div>
<div class='item'><img alt='emoticon' class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU3IQdFIF4wSMiWHaTzgyAtnOkIiOie7SPy7aJAjO7hrtYkT9lGiTL3SCX7pkGNYJHQKnOgree0ADEl-7FJodzKj_DKx5j-T3zdSERRzMultS6fadD7lwS0Z7pUE86HeoA985yWWB0FpWU/s15/rolleyes.gif'/><span>@@,</span></div>
<div class='item'><img alt='emoticon' class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI_703PA8kUVTx-YLO-_13_BJ0o7WWg-CB7Hcq2kYp7P-DtzIB_hukZY6OC8rG_d_9eqIGk7V3vglrQBtqGK9m9r2_VhDDtBa7vNR3pUNZfzP7DY83TrU_QYh2BFCteckdfDT4iAu8C5Ps/s15/wink.gif'/><span> ;)</span></div>
<div class='item'><img alt='emoticon' class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj056E4aDxDTr-8MQqE4FwcKBKPUDlqvOnExYvVzHdymoeAyyx87G0t8w9TVSGRpWMSN5LGaYAkE3pIWdR_mxDRThAr9TDXATBCMNebouV_8kOtfqQNqR7BaXUyKmEIK5apqlRWTmJXb9e/s25/thumb.gif'/><span>:-bd</span></div>
<div class='item'><img alt='emoticon' class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcm3KgSH49xf7v_zk9-NtdDNvJsXf8RWV9SWVRR6OzLI8BIqvt_wFooBQT8Xmso8eWH4PajJEgapXK-45p0tjNoOTaRb04OENxY-j8tLCs4qW5mz_1BxifduyLmad2n4IjwbjuTnil1TCz/s25/thumbsup.gif'/><span>:-d</span></div>
<div class='item'><img alt='emoticon' class='comment_emo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE184oY9yuiar3aCQjzTq8i3UyrrehakTioxKk4Cu6ROBnGRfuZ-PDJEHTFFFiJirSaiI-dRSABpFJSv5VJwg1M_SpIjxGu8gXwPr8EsWftBQ-xl6NYMUaeUwqmI3AQNnaSY7A3MzPFSqZ/s15/wee.gif'/><span>:P</span></div>
</div>

Keterangan Penting !! "Silahkan sesuaikan URL/gambar URL beserta kode emoticonnya sesuai pada emoticon yang sudah anda pasang sebelumnya.

4. Kemudian anda tinggal tambahkan CSS untuk tampilan menu emoticon dan konverternya. (Mungkin sebagian besar anda sudah tahu bagaimana menempatkan kode CSS pada edite template).

.converters {
margin-right: 5px;
padding: 3px 8px;
background: #027BB4;
font-size: 14px;
font-family: Arial;
font-weight: bold;
text-transform: none;
outline: none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px #333;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
transition: background-color 1s 0s ease-out;
cursor: pointer;
}
.comment_emo_list {
display: none;
clear: both;
width: 100%;
background: #3292DD;
}
.comment_emo_list .item {
float: left;
text-align: center;
margin: 2px 5px 0 0;
height: 40px;
width: 46.5px;
color: #FFFFFF;
background: #555555;
}

5. Dan yang terakhir anda tinggal save/simpan template anda.

Bila mana anda belum memasang kode emoticon pada komentar blog anda, silahkan pergi ke link artikel Cara Membuat Emoticon Pada Komentar Blog.

Selesai sobat mengenai artikel Cara Membuat Menu Emoticon dan Konverter Pada Komentar Blog. Bila ada yang kurang anda pahami mengenai cara-cara diatas, silahkan saja berkomentar pada kotak komentar blog dibawah ini.