Cara Membuat Daftar Emot yang Bisa Dibuka-Tutup (Spoiler)

Coba anda lihat pada bagian diatas kotak komentar blog ini. Terdapat tombol yang jika diklik akan memunculkan daftar emot. Seperti gambar diatas.

Trik ini berguna untuk menghemat tampilan blog supaya terlihat lebih menarik dan seksi. (evil_grin) Gimana caranya? Ikuti trik berikut!

1. Login ke Blogger, kemudian klik Rancangan > Edit HTML.

2. Centang kotak kecil Expand Template Widget.

3. Cari kode berikut.

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

4. Diatasnya, masukkan kode berikut.

<style>
#tblttpemot, #daftaremot{display:none;}
</style>
<script>
function bukaemot(){
document.getElementById(&#39;tblbukaemot&#39;).style.display=&#39;none&#39;;
document.getElementById(&#39;tblttpemot&#39;).style.display=&#39;inline&#39;;
document.getElementById(&#39;daftaremot&#39;).style.display=&#39;inline&#39;;
}
function ttpemot(){
document.getElementById(&#39;tblbukaemot&#39;).style.display=&#39;inline&#39;;
document.getElementById(&#39;tblttpemot&#39;).style.display=&#39;none&#39;;
document.getElementById(&#39;daftaremot&#39;).style.display=&#39;none&#39;;
}
</script>
<h3>Emoticon yang dapat digunakan <a href='#nogo' id='tblbukaemot' onClick='bukaemot()'>[Tampilkan]</a> <a href='#nogo' id='tblttpemot' onClick='ttpemot()'>[Sembunyikan]</a></h3>
<br/><br/>
<div id='daftaremot'>
<div style='-moz-column-count:2;-moz-column-rule:1px solid #aabbcc;-moz-column-gap:10px;'>
<img src='http://forum.plurk-id.org/Smileys/default/joyful.gif' style='border:0; margin:0; padding:0;'/> :-<b></b>))<br/>
<img src='http://forum.plurk-id.org/Smileys/default/smile.gif' style='border:0; margin:0; padding:0;'/> :-<b></b>)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/grin.gif' style='border:0; margin:0; padding:0;'/> :-<b></b>D<br/>
<img src='http://forum.plurk-id.org/Smileys/default/laugh.gif' style='border:0; margin:0; padding:0;'/> (<b></b>lol)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/tongue.gif' style='border:0; margin:0; padding:0;'/> :-<b></b>p<br/>
<img src='http://forum.plurk-id.org/Smileys/default/w00t.gif' style='border:0; margin:0; padding:0;'/> (<b></b>woot)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/wink.gif' style='border:0; margin:0; padding:0;'/> ;-<b></b>)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/surprised.gif' style='border:0; margin:0; padding:0;'/> :-<b></b>o<br/>
<img src='http://forum.plurk-id.org/Smileys/default/angry_002.gif' style='border:0; margin:0; padding:0;'/> X-<b></b>(<b></b><br/>
<img src='http://forum.plurk-id.org/Smileys/default/sad.gif' style='border:0; margin:0; padding:0;'/> :-<b></b>(<b></b><br/>
<img src='http://statics.plurk.com/72ddf2c585fe77dd0be731b19624d8cb.gif' style='border:0; margin:0; padding:0;'/> :&#39;-(<b></b><br/>
<img src='http://forum.plurk-id.org/Smileys/default/sick.gif' style='border:0; margin:0; padding:0;'/> :-<b></b>&amp;<br/>
<img src='http://forum.plurk-id.org/Smileys/default/kiss.gif' style='border:0; margin:0; padding:0;'/> (<b></b>K)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/angry.gif' style='border:0; margin:0; padding:0;'/> (<b></b>angry)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/annoyed.gif' style='border:0; margin:0; padding:0;'/> (<b></b>annoyed)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/bye.gif' style='border:0; margin:0; padding:0;'/> (<b></b>wave) | (<b></b>bye)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/cool.gif' style='border:0; margin:0; padding:0;'/> B<b></b>-)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/cozy.gif' style='border:0; margin:0; padding:0;'/> (<b></b>cozy)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/fever.gif' style='border:0; margin:0; padding:0;'/> (<b></b>sick)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/tired.gif' style='border:0; margin:0; padding:0;'/> (<b></b>:<br/>
<img src='http://forum.plurk-id.org/Smileys/default/fingerscrossed.gif' style='border:0; margin:0; padding:0;'/> (<b></b>goodluck)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/gril_toungue.png' style='border:0; margin:0; padding:0;'/> (<b></b>griltongue)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/like_food.gif' style='border:0; margin:0; padding:0;'/> (<b></b>mmm)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/hungry.gif' style='border:0; margin:0; padding:0;'/> (<b></b>hungry)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/listening_music.gif' style='border:0; margin:0; padding:0;'/> (<b></b>music)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/tears.gif' style='border:0; margin:0; padding:0;'/> (<b></b>tears)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/tongue_002.gif' style='border:0; margin:0; padding:0;'/> (<b></b>tongue)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/unsure_002.gif' style='border:0; margin:0; padding:0;'/> (<b></b>unsure)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/wave.gif' style='border:0; margin:0; padding:0;'/> (<b></b>highfive)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/dance.gif' style='border:0; margin:0; padding:0;'/> (<b></b>dance)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/blush.gif' style='border:0; margin:0; padding:0;'/> (<b></b>blush)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/big_eyed.gif' style='border:0; margin:0; padding:0;'/> (<b></b>bigeyes)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/dance_moves.gif' style='border:0; margin:0; padding:0;'/> (<b></b>funkydance)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/idiot.gif' style='border:0; margin:0; padding:0;'/> (<b></b>idiot)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/lonely.gif' style='border:0; margin:0; padding:0;'/> (<b></b>lonely)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/scenic.gif' style='border:0; margin:0; padding:0;'/> (<b></b>scenic)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/silly_couple.gif' style='border:0; margin:0; padding:0;'/> (<b></b>hassle)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/startled.gif' style='border:0; margin:0; padding:0;'/> (<b></b>panic)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/unsure.gif' style='border:0; margin:0; padding:0;'/> (<b></b>okok)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/yupi.gif' style='border:0; margin:0; padding:0;'/> (<b></b>yahoo)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/cry.gif' style='border:0; margin:0; padding:0;'/> (<b></b>cry)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/doh.gif' style='border:0; margin:0; padding:0;'/> (<b></b>doh)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/broken_heart.gif' style='border:0; margin:0; padding:0;'/> (<b></b>brokenheart)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/drinking.gif' style='border:0; margin:0; padding:0;'/> (<b></b>drinking)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/girl_kiss.gif' style='border:0; margin:0; padding:0;'/> (<b></b>girlkiss)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/lol.gif' style='border:0; margin:0; padding:0;'/> (<b></b>rofl)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/money.gif' style='border:0; margin:0; padding:0;'/> (<b></b>money)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/rock_n_roll.gif' style='border:0; margin:0; padding:0;'/> (<b></b>rock)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/not_talking.gif' style='border:0; margin:0; padding:0;'/> (<b></b>nottalking)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/party.gif' style='border:0; margin:0; padding:0;'/> (<b></b>party)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/sleeping.gif' style='border:0; margin:0; padding:0;'/> (<b></b>sleeping)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/thinking.gif' style='border:0; margin:0; padding:0;'/> (<b></b>thinking)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/bring_it_on.gif' style='border:0; margin:0; padding:0;'/> (<b></b>bringit)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/worship.gif' style='border:0; margin:0; padding:0;'/> (<b></b>worship)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/applause.gif' style='border:0; margin:0; padding:0;'/> (<b></b>applause)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/nerd.gif' style='border:0; margin:0; padding:0;'/> 8<b></b>-)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/gym.gif' style='border:0; margin:0; padding:0;'/> (<b></b>gym)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/heart.gif' style='border:0; margin:0; padding:0;'/> (<b></b>heart)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/devil.gif' style='border:0; margin:0; padding:0;'/> (<b></b>devil)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/lmao.gif' style='border:0; margin:0; padding:0;'/> (<b></b>lmao)<br/>
<img src='http://statics.plurk.com/4f01bac8a707e5450307f97065ec0fa7.gif' style='border:0; margin:0; padding:0;'/> (<b></b>banana_cool)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/banana_rock.gif' style='border:0; margin:0; padding:0;'/> (<b></b>banana_rock)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/evil_grin.gif' style='border:0; margin:0; padding:0;'/> (<b></b>evilgrin)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/headspin.gif' style='border:0; margin:0; padding:0;'/> (<b></b>headspin)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/heart_beat.gif' style='border:0; margin:0; padding:0;'/> (<b></b>heart_beat)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/ninja.gif' style='border:0; margin:0; padding:0;'/> (<b></b>ninja)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/haha.gif' style='border:0; margin:0; padding:0;'/> (<b></b>haha)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/evilsmirk.gif' style='border:0; margin:0; padding:0;'/> (<b></b>evilsmirk)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/eyeroll.gif' style='border:0; margin:0; padding:0;'/> (<b></b>eyeroll)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/muhaha.gif' style='border:0; margin:0; padding:0;'/> (<b></b>muhaha)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/taser.gif' style='border:0; margin:0; padding:0;'/> (<b></b>taser) | (<b></b>rammi)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/banana_ninja.gif' style='border:0; margin:0; padding:0;'/> (<b></b>banana_ninja)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/beer.gif' style='border:0; margin:0; padding:0;'/> (<b></b>beer)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/coffee.gif' style='border:0; margin:0; padding:0;'/> (<b></b>coffee)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/fish_hit.gif' style='border:0; margin:0; padding:0;'/> (<b></b>fish_hit)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/muscle.gif' style='border:0; margin:0; padding:0;'/> (<b></b>muscle)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/smileydance.gif' style='border:0; margin:0; padding:0;'/> (<b></b>smileydance)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/fireworks.gif' style='border:0; margin:0; padding:0;'/> (<b></b>fireworks)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/47d20905d017c396d67b4a30c9ac9b10.png' style='border:0; margin:0; padding:0;'/> (<b></b>goal)<br/>
<img src='http://statics.plurk.com/e3481a0219283c49455d8af6012980ea.png' style='border:0; margin:0; padding:0;'/><img src='http://statics.plurk.com/7bd4d66256fc805da4dd178b9fdbe3ce.png' style='border:0; margin:0; padding:0;'/><img src='http://statics.plurk.com/5a2a63fa773e68797ec69a1303bfa3b9.png' style='border:0; margin:0; padding:0;'/><img src='http://statics.plurk.com/129b757f2346a6e5ea782c79f0337ba9.png' style='border:0; margin:0; padding:0;'/> (<b></b>bzzz) <br/>
<img src='http://forum.plurk-id.org/Smileys/default/4ad099fba019942f13058610ff3fc568.gif' style='border:0; margin:0; padding:0;'/> (<b></b>dance_bzz)<br/>
<img src='http://forum.plurk-id.org/Smileys/default/rusia.gif' style='border:0; margin:0; padding:0;'/> (<b></b>&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;)<br/>
<img src='http://statics.plurk.com/0efc4d55d28704f4370ef874ae906161.gif' style='border:0; margin:0; padding:0;'/> (<b></b>code)<br/>
<img src='http://statics.plurk.com/91cf07e3aa16738943fa1147940b48ea.gif' style='border:0; margin:0; padding:0;'/> (<b></b>morning)
<br/><br/>
</div>
<b>Cara menggunakan:</b> ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa <b>&quot;|&quot;</b> maka itu adalah alternatif. Seperti <b>(<b></b>wave) | (<b></b>bye)</b> maka bisa <b>(<b></b>wave)</b> bisa <b>(<b></b>bye)</b>
</div>

5. Simpan.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya