Membuat show hide konversi kode dan emoticon

Teman kita Fajar Januriawan menanyakan cara konversi kode untuk komentar. Artikel kali ini menjelaskan cara membuat konversi kode yang bisa show hide (muncul-hilang) dan emoticon pada komentar blogger.

Mul-mula bukalah editor template, kemudian masukkan CSS berikut,

.box-konvert-kode {
    width:100%;
    height:410;
    margin:10px 0px;
}

tambahkan beberapa hal yang Anda inginkan untuk mempercantik tampilan seperti backgraund, padding, atau efek lain dan sesuaikan pula nilai height sesuai template Anda.

JavaScript yang digunakan.

<script>
$(document).ready(function() {
     $('.konvert').click(function() {
        $('.box-konvert-kode').show();
        $('.close-show').show();
        $('.konvert').hide();
     });

     $('.close-show').click(function() {
        $('.box-konvert-kode').hide();
        $('.close-show').hide();
        $('.konvert').show();
     });

     $('.show-emo').click(function() {
        $('.comment_emo_list').toggle('slow');
     });
});
</script>

Penjelasan 
.konvert di sisipkan dalam sebuah tombol awal dan ketika di klik maka .box-konvert-kode dan .close-show akan di tampilkan sedangkan .konvert akan di sembunyikan dimana .close-show adalah class yang di pasang pada tombol penutup konversi kode.
Pada saat .konvert di sembunyikan dan .close-show yang tampil, jika di klik kembali maka .box-konvert-kode dan.close-show akan disembunyikan lalu .konvert di munculkan kembali seperti fungsi semula dan akan begitu seterusnya.

Sedangkan pada .comment_emo_list class emoticon pada smile komentar blogger akan muncul dengan efek toggle ketika .show-emo di klik, begitu juga sebaliknya ketika di klik kembali untuk menyembunyikan.

Bagaimana cara menempatkan jika kita telah memasang tombol di dalam formulir komentar? silahkan lihat caranyanya sebagai berikut.

Buat sobat yang sudah memiliki atau memasang tombol pada pesan formulir komentar, langkahnya mudah silahkan sisipkan saja kelasnya di dalam tombolnya atau lebih mudah misalkan untuk tombol show <a class='tombol-konversi'>show konvert</a> maka akan jadi seperti ini <a class='tombol-konversi konvert'>show konvert</a> 
untuk tombol hidenya tinggal tambahkan class tombol serupa namun ubah class konvert dengan class tombol hidenya jadi kalau di gabungkan akan jadi <a class='tombol-konversi konvert'>Show Converter</a><a class='tombol-konversi close-show'>Hide Converter</a>

Yang perlu di perhatikan beri class tombol hide dengan style='cursor:pointer;display:none' karena tombol ini tidak punya link maka ketika disorot agar mouse berubah dan untuk display none tombol hide berfungsi untuk menyembunyikan tombol hide sebelum tombol show di buka sehingga tidak muncul bersamaan ketika fungsi belum di jalankan.


Penerapan

<span class='konvert' style='cursor:pointer;'>Konversi Kode</span>
<span class='close-show' style='cursor:pointer;display:none'>Tutup Konverter</span>
<span class='show-emo' style='cursor:pointer;'>show emo</span>

jangan lupa ubah class /* class tombol anda */ dengan milik Anda atau jika tombol Anda menggunakan atribut id letakkan saja di samping class sperti <a class='hide' id='tombol'>

untuk memanggil konversi kode dan emotikonnya saat di klik, maka kita akan membuat elemen HTML-nya, lihat dibawah ini.

<div class='box-konvert-kode' style='display:inline-block;display:none;'>
   <iframe align='center' height='410' src='https://googledrive.com/host/0B05MjHQkbOjhRzNMQUtRQ01EMmc' width='100%'/>
</div>
<div class='comment_emo_list'/>

perhatikan style display:inline-block;. Nilai "inline" mendefinisikan sebuah elemen akan ditampilkan"inline" atau dalam baris yang sama dengan elemen yang lain. Jadi buat sobat yang menggunakan thread komen dengan reply form memiliki jarak kiri, fungsi inline inilah yang akan menyesuaikan konversi kode agar memiliki lebar yang sama dengan form komentar.
Sedangkan display:none; menyembunyikan konversi kode sebelum fungsi show di jalankan.

Cari baris kode yang diawalai dengan <b:includable id='threaded-comment-form' var='post'> lalu temukan kode <p><data:blogCommentMessage/></p> atau kode dimana dulu Anda pernah membuat tombol dan memodifikasi formulir pesan komentar blogger. 

letakkan kode tombol show hide di antara tag berikut,

<p><data:blogCommentMessage/>

...disini...

</p>

jadi dan hasilnya bisa dilihat di bawah ini:

<p><data:blogCommentMessage/>
<span class='konvert' style='cursor:pointer;'>Konversi Kode</span>
<span class='close-show' style='cursor:pointer;display:none'>Tutup Konverter</span>
<span class='show-emo' style='cursor:pointer;'>show emo</span>
</p>

lalu letakkan JavaScript-nya dan elemen html-nya setelah kode tersebut, seperti berikut

<p><data:blogCommentMessage/>
<span class='konvert' style='cursor:pointer;'>Konversi Kode</span>
<span class='close-show' style='cursor:pointer;display:none'>Tutup Konverter</span>
<span class='show-emo' style='cursor:pointer;'>show emo</span>
</p>
<script>
$(document).ready(function() {
     $('.konvert').click(function() {
        $('.box-konvert-kode').show();
        $('.close-show').show();
        $('.konvert').hide();
     });

     $('.close-show').click(function() {
        $('.box-konvert-kode').hide();
        $('.close-show').hide();
        $('.konvert').show();
     });

     $('.show-emo').click(function() {
        $('.comment_emo_list').toggle('slow');
     });
});
</script>
<div class='box-konvert-kode' style='display:inline-block;display:none;'>
   <iframe align='center' height='410' src='https://googledrive.com/host/0B05MjHQkbOjhRzNMQUtRQ01EMmc' width='100%'/>
</div>
<div class='comment_emo_list'/>

Selamat mencoba :)