Teman kita Fajar Januriawan menanyakan cara konversi kode untuk komentar. Artikel kali ini menjelaskan cara membuat konversi kode yang bi...
Teman kita 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,
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.
Penjelasan
Pada saat
Sedangkan pada
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
untuk tombol hidenya tinggal tambahkan class tombol serupa namun ubah class konvert dengan class tombol hidenya jadi kalau di gabungkan akan jadi
Yang perlu di perhatikan beri class tombol hide dengan
Penerapan
jangan lupa ubah class /* class tombol anda */ dengan milik Anda atau jika tombol Anda menggunakan atribut id letakkan saja di samping class sperti
untuk memanggil konversi kode dan emotikonnya saat di klik, maka kita akan membuat elemen HTML-nya, lihat dibawah ini.
perhatikan style
Sedangkan display:none; menyembunyikan konversi kode sebelum fungsi show di jalankan.
Cari baris kode yang diawalai dengan
letakkan kode tombol show hide di antara tag berikut,
jadi dan hasilnya bisa dilihat di bawah ini:
lalu letakkan JavaScript-nya dan elemen html-nya setelah kode tersebut, seperti berikut
Selamat mencoba :)
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 :)
Terimakasih mas buat penjelasannya, jadi ngerti juga prinsip kerjanya :D
ReplyDeleteKalau saya salah tolong bantu perbaiki ya :-bd
Deleteaku nyoba ini belum pernah berhasil.
ReplyDeletepak tolong pastekan isi htmlnya pra comment, aku nyoba jadi belum berhasil.
ReplyDeletehttp://blanggem.blogspot.com/2014/07/this-is-title-for-post-with-image.html
.Gan ane mau nanya, kalau kita mau ganti background pada kolom Konversinya gmana yah.?
ReplyDelete.Soalnya di blog ane warnanya gak sesuai, jadi kurang enak dipandang pengunjung.
.Agan bisa check diblog ane : www.softdrizk.co.vu
.Mohon bantuannya. :)
Temukan CSS:
Delete#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
Keren gan..... mantappp makasih :)
ReplyDeleteSama-sam :)
Deletecara menghilangkan scrollnya gimana?
ReplyDeleteSetahu saya tidak ada scroll :)
Deletespan class='konvert /* class tombol anda */
ReplyDelete/* class tombol anda */
itu ganti pake apa gan maaf saya masih awam ~
Cuma keterangan saja, dihapuspun tak mengapa.
Deletegan ane mau tanya maksud class tombol anda itu apa?? dan cara menegetahuinya gmn???
ReplyDeletegan itu class tombol anda itu apa maksudnya?? dan klo itu ngk dipake hapusnya yg dimana??
ReplyDeleteItu cuma keterangan saja, dihapus pun tak mengapa.
DeleteAsekk jadi keren gitu gan bisa di buka tutup kode konversi sama emoticonnya.. mantap dah buat agan yang bikinnya :D
ReplyDeleteJika berkenan, silahkan kunjungi blog sederhana ini http://puloblog.blogspot.com
kok di template ane ga work ya mas ?? template ane subculture fix mas :D mohon pencerahanya :)
ReplyDeleteMaaf itu script jquery ya ? Apakah bisa scripr jquery di pasang bgitu saja tampa jquery/Ajax/1.7.2 ??
ReplyDeleteAnda benar, jQuery harus ada. Saya tidak sebutkan karena template custom biasanya sudah punya itu.
Deletemakasih bang :D
ReplyDeletekayaknya berat x mas loading blognya
ReplyDeleteMaaf Untuk Yang Bertanya Ganti Warna Tombol : (GANTI CSS TADI.)
ReplyDeletebackground: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;
}