GO Blog

Salam buat agan agin sobat blogger yang suka utak atik template, kali ini saya mau share cara membuat show hide konversi kode dan emoticon pada komentar blogger bagi anda yang sedang mencari trik ini silahkan saja untuk di simak.

pertama buka editor template blogger lalu tambahkan css di bawah ini

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-5.box-konvert-kode-db {
    width:100%;
    height:410;
    margin:10px 0px;
}

css di atas hnya tampilan apa adanya untuk membungkus element konversi kode, silahkan anda tambahkan beberapa hal yang anda inginkan seperti backgraund, padding, atau efek lain da sesuaikan nilai height sesuai template anda.

sekarang kita lanjutkan pada javascriptnya, silahkan lihat dibawah ini

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-19<script>
$(document).ready(function() {
     $('.konvert').click(function() {
        $('.box-konvert-kode-db').show();
        $('.db-close-show').show();
        $('.konvert').hide();
     });

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

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

Penjelasan logika tentang javascript diatas

.konvert di sisipkan dalam sebuah tombol awal dan ketika di klik maka .box-konvert-kode-db dan .db-close-show akan di tampilkan sedangkan .konvert akan di sembunyikan dimana .db-close-show adalah class yang di pasang pada tombol penutup konversi kode.
pada saat .konvert di sembunyikan dan .db-close-show yang tampil jika di klik kembali maka .box-konvert-kode-db dan .db-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 .db-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 saja sisipkan kelasnya di dalam tombolnya atau lebih mudah misalakan

untuk tombol show <a class='tombol-konversi'>show konvert</a> maka akan jadi seperti ni <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 konvert</a><a class='tombol-konversi db-close-show'>hide konvert</a>

yang perlu di perhatikan beri class tombol hide dengan style='cursor:pointer;display:none' karena tombol ini tidak punya link maka ketika disorot biar 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.

bingung dengan penjelasan diatas?

memang koding membingungkan, tapi buat anda yang tidak mau bingung silahkan comot aja yang sudah jadi yang saya buat di bawah ini

1code-line:3-12code-line:3-23code-line:3-34code-line:3-4<span class='konvert /* class tombol anda */' style='cursor:pointer;'>Konversi Kode</span>
<span class='db-close-show /* class tombol anda */' style='cursor:pointer;display:none'>Tutup Konverter</span>
<span class='db-show-emo /* class tombol anda */' style='cursor:pointer;'>show emo</span>

jangan lupa ubah class /* class tombol anda */ dengan punya 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 htmlnya, lihat dibawah ini

1code-line:4-12code-line:4-23code-line:4-34code-line:4-4<div class='box-konvert-kode-db' 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; ini berfungsi 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 replay from 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.

Saatnya menerapkan setelah mendengar ocehan panjang.

cari baris bais kode tag 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 antar

1code-line:5-12code-line:5-23code-line:5-34code-line:5-45code-line:5-5<p><data:blogCommentMessage/>

...disini...

</p>

jadi dan hasilnya bisa dilihat di bawah ini:

1code-line:6-12code-line:6-23code-line:6-34code-line:6-45code-line:6-5<p><data:blogCommentMessage/>
<span class='konvert /* class tombol anda */' style='cursor:pointer;'>Konversi Kode</span>
<span class='db-close-show /* class tombol anda */' style='cursor:pointer;display:none'>Tutup Konverter</span>
<span class='db-show-emo /* class tombol anda */' style='cursor:pointer;'>show emo</span>
</p>

lalu letakkan javascriptnya dan elemen htmlnya setelah kode tersebut, seperti berikut

1code-line:7-12code-line:7-23code-line:7-34code-line:7-45code-line:7-56code-line:7-67code-line:7-78code-line:7-89code-line:7-910code-line:7-1011code-line:7-1112code-line:7-1213code-line:7-1314code-line:7-1415code-line:7-1516code-line:7-1617code-line:7-1718code-line:7-1819code-line:7-1920code-line:7-2021code-line:7-2122code-line:7-2223code-line:7-2324code-line:7-2425code-line:7-2526code-line:7-2627code-line:7-2728code-line:7-28<p><data:blogCommentMessage/>
<span class='konvert /* class tombol anda */' style='cursor:pointer;'>Konversi Kode</span>
<span class='db-close-show /* class tombol anda */' style='cursor:pointer;display:none'>Tutup Konverter</span>
<span class='db-show-emo /* class tombol anda */' style='cursor:pointer;'>show emo</span>
</p>
<script>
$(document).ready(function() {
     $('.konvert').click(function() {
        $('.box-konvert-kode-db').show();
        $('.db-close-show').show();
        $('.konvert').hide();
     });

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

     $('.db-show-emo').click(function() {
        $('.comment_emo_list').toggle('slow');
     });
});
</script>
<div class='box-konvert-kode-db' 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'/>

setelah selesai silahkan simpan template anda yang telah di beri perubahan dan lihat hasilnya... jangan lupa untuk mencari css .comment_emo_list dan tambahkan display:none; di dalamnya.


sekian saja tentang membuat show hide konversi kode dan emoticon komentar blogger , silahkan di terapkan dan semoga berhasil...