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 bi...

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

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

    ReplyDelete
  2. aku nyoba ini belum pernah berhasil.

    ReplyDelete
  3. 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
  4. .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
  5. Keren gan..... mantappp makasih :)

    ReplyDelete
  6. cara menghilangkan scrollnya gimana?

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

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

    ReplyDelete
  9. 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
  10. 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
  11. kok di template ane ga work ya mas ?? template ane subculture fix mas :D mohon pencerahanya :)

    ReplyDelete
  12. 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
  13. kayaknya berat x mas loading blognya

    ReplyDelete
  14. 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

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Membuat show hide konversi kode dan emoticon
Membuat show hide konversi kode dan emoticon
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSdlA2ZDiKYS6xggbXB_ko0LkFZISqczE7f536e9jpvyKB1fQOFsc0ym6cK0N7n24tSKihLK1CepTbNy_Afmn7fwqA2-U9nvd84d7xg3j8q0XJ_ZKDgWOdjyw20WJEzdE7Cgr_auV9HG0/s1600/konversi_kode_blogger.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSdlA2ZDiKYS6xggbXB_ko0LkFZISqczE7f536e9jpvyKB1fQOFsc0ym6cK0N7n24tSKihLK1CepTbNy_Afmn7fwqA2-U9nvd84d7xg3j8q0XJ_ZKDgWOdjyw20WJEzdE7Cgr_auV9HG0/s72-c/konversi_kode_blogger.png
Jelas in Blog
https://jelasinblog.blogspot.com/2014/07/membuat-show-hide-konversi-kode-dan.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/07/membuat-show-hide-konversi-kode-dan.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content