Membuat show hide konversi kode dan emoticon

HTML Javascript jQuery Trik

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

.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

<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

<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

<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

<p><data:blogCommentMessage/>

...disini...

</p>

jadi dan hasilnya bisa dilihat di bawah ini:

<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

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

saya tidak hanya memberikan hasil jadinya, jadi saya juga menulis semua penjelasannya agar sobat lebih mengerti dan paham sekalian untuk belajar bersama saya.

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

17 komentar

iya makasih mas dafin, saya juga belum ada konversi kode di form komentarnya, cuma ada di halaman static saja :D

mantap gan :D
Keep posting :)
Artikelnya Berguna gan

Kumpulan Cerita Dewasa Terbaru

Detail sekali penjelasannya mas, Saya jadi lebih memahaminya. Pakai jQuery lebih mudah ya gan, karena penggunaannya simple.

iya kang, lebih mudah bisa juga di terapkan untuk yang lain :)

Thanks Ya mas saya mau buat dulu untuk kolom komentar saya :)

gan tempat saya emoticonnya di klik kenapa tidak mau muncul ya????

Msih bngung,air mata sajaa.. :'(

udh nyoba ulang2 gk jadi kang..

asli hasilnya polos bangat
mana emoticonnya ga keluar pas di klik :Ozz
gimana ne mas bro ?

coba liat blog ente, disini ja jalan coba klik http://kerangalamjombang.blogspot.com/2012/06/membuat-infografis-keren-dengan-infogram.html

Penjelasannya, Terpaku Ke materi Pembahasan, Tutorialnya Rumit

coba yang pemula, pasang yang kaya gini


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT:)
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.
Terima kasih telah berkomentar
Back to Top
Loading...