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 :)

Comments

  1. Terimakasih mas buat penjelasannya, jadi ngerti juga prinsip kerjanya :D

    ReplyDelete
    Replies
    1. Kalau saya salah tolong bantu perbaiki ya :-bd

      Delete
  2. pak tolong pastekan isi htmlnya pra comment, aku nyoba jadi belum berhasil.
    http://blanggem.blogspot.com/2014/07/this-is-title-for-post-with-image.html

    ReplyDelete
  3. .Gan ane mau nanya, kalau kita mau ganti background pada kolom Konversinya gmana yah.?
    .Soalnya di blog ane warnanya gak sesuai, jadi kurang enak dipandang pengunjung.

    .Agan bisa check diblog ane : www.softdrizk.co.vu
    .Mohon bantuannya. :)

    ReplyDelete
    Replies
    1. Temukan CSS:
      #codes {
      border: medium none;
      width: 98%;
      height: 150px;
      margin: 10px auto;
      display: block;
      background-color: #1ABC9C;
      padding: 5px;
      font-size: 12px;
      font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
      }

      Lalu ganti background-colornya: #1ABC9C

      Delete
  4. Keren gan..... mantappp makasih :)

    ReplyDelete
  5. cara menghilangkan scrollnya gimana?

    ReplyDelete
  6. span class='konvert /* class tombol anda */
    /* class tombol anda */
    itu ganti pake apa gan maaf saya masih awam ~

    ReplyDelete
  7. gan ane mau tanya maksud class tombol anda itu apa?? dan cara menegetahuinya gmn???

    ReplyDelete
  8. gan itu class tombol anda itu apa maksudnya?? dan klo itu ngk dipake hapusnya yg dimana??

    ReplyDelete
    Replies
    1. Itu cuma keterangan saja, dihapus pun tak mengapa.

      Delete
  9. Asekk jadi keren gitu gan bisa di buka tutup kode konversi sama emoticonnya.. mantap dah buat agan yang bikinnya :D

    Jika berkenan, silahkan kunjungi blog sederhana ini http://puloblog.blogspot.com

    ReplyDelete
  10. kok di template ane ga work ya mas ?? template ane subculture fix mas :D mohon pencerahanya :)

    ReplyDelete
  11. Maaf itu script jquery ya ? Apakah bisa scripr jquery di pasang bgitu saja tampa jquery/Ajax/1.7.2 ??

    ReplyDelete
    Replies
    1. Anda benar, jQuery harus ada. Saya tidak sebutkan karena template custom biasanya sudah punya itu.

      Delete
  12. kayaknya berat x mas loading blognya

    ReplyDelete
  13. Maaf Untuk Yang Bertanya Ganti Warna Tombol : (GANTI CSS TADI.)

    background:WARNA SELERA ANDA;
    color:WARNA SELERA ANDA;
    border: 1px double WARNA SELERA ANDA;
    border-radius: 0px 0px 0px 0px;
    width:100%;
    height:410;
    margin:10px 0px;
    }
    .show-emo,.close-show {
    background:WARNA SELERA ANDA;
    color:WARNA SELERA ANDA;
    border: 1px solid WARNA SELERA ANDA;
    border-radius:2px;
    }
    .konvert {
    background:WARNA SELERA ANDA;
    border: 1px solid WARNA SELERA ANDA;
    border-radius:2px;
    }

    ReplyDelete

Post a Comment

Popular posts from this blog

Perbedaan JavaScript dan jQuery Beserta Contoh

Cara Menggunakan :before dan :after

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template