Membuat Show Hide Emoticon Dan Konversi kode pada Form Thread Komentar Blogger

Sudah banyak saya temui tutorial tentang Membuat Show Hide Emoticon Dan Konversi kode pada Form Thread Komentar Blogger , namun ada sedikit problem yang saya temukan pada salah satu tutorial dari sahabat blogger, problemnya ialah tombol show hide emoticon dan konversi kode tidak berfungsi saat saya mengklik balas pada komentar dari komentar orang lain dan saya klik lagi tulisan tambahkan komentar yang ada dibawah, mengapa demikian? saya sendiri juga kurang tau mengapa demikian, karna saya masih kurang menguasai betul tentang kode HTML dan Javascript

Demo

Namun setelah saya mencoba mengoprek isi dari Javascrip untuk Membuat Show Hide Emoticon Dan Konversi kode pada Form Thread Komentar Blogger ini akhirnya saya menemukan titik problem dari kasus tersebut, ternyata problem ada pada Js nya, dan saya mencoba memodifikasinya dan alhasil tombolnya sudah berfungsi saat reply komentar dari komentar lain. Cukup banyak langkah-langkah yang akan kita lakukan pada tutorial kali ini, berikut langkah2nya


1. Membuat tombol yang akan kita gunakan untuk memunculkan dan menyembunyikan emotikon dan konversi kode,Blogger-Template-Edit Html dan cari kode ]]></b:skin> atau </style>.

salin CSS dibawah ini dan letakkan diatas code yang telah anda cari tersebut:

#comments .red-button{
color:#fff;
margin-right:10px;
padding:4px 15px;
background-color:#A00F0F;
font-size:12px;
font-family: 'Open Sans', sans-serif, 'Segoe UI',Arial,Tahoma;
font-weight:400;
text-transform:none;
border-radius:4px;
text-decoration:none;
outline:none;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #333;
text-shadow:0px -1px 0px rgba(0,0,0,0.3);
transition: background-color 1s ease-out 0s;
cursor:pointer;
}
#comments .red-button a{
color:#fff !important;
}
#comments .red-button a:hover{
text-decoration:none;
}
#comments .red-button:hover {
background-color:#6F0A0A;
color:#ffffff;
}

#comments .blue-button{
color:#fff;
margin-right:10px;
padding:4px 15px;
background-color:#38f;
font-size:12px;
font-family: 'Open Sans', sans-serif, 'Segoe UI',Arial,Tahoma;
font-weight:400;
text-transform:none;
border-radius:4px;
text-decoration:none;
outline:none;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #333;
text-shadow:0px -1px 0px rgba(0,0,0,0.3);
transition: background-color 1s ease-out 0s;
cursor:pointer;
}
#comments .blue-button a{
color:#ffffff !important;
}
#comments .blue-button a:hover{
text-decoration:none;
}
#comments .blue-button:hover {
background-color:#000264;
color:#ffffff;
}

.myframe {
    display: none;
    background: none repeat scroll 0% 0% transparent;
    width: 100%;
    height: 315px;
    margin: 5px 0;
}

2. Cari kode <p><data:blogCommentMessage/></p> untuk memudahkan pencarian ketikan saja kode ini <p><data:blogCommentMessage/>, biasanya ditemukan ada 4buah kode tersebut, paste saja kode dibawah ini pada kode yang ke-2 dan ke-4 sebelum tag penutup </p>, lebih jelas bisa lihat gambar :

<br/>
<br/>
<span class='konversi red-button'>Konversi Kode</span>
<span class='tutup red-button' style='display: none;'>Tutup Konversi Kode</span>
<span class='buka_emo blue-button' style='background:#38F'>Emoticon</span>

3. Untuk Pemasangan Konversi kode, disini saya menggunakan Konversi kode dari DTE, dan saya upload di google drive, silahkan gunakan Kode Escaper ini dan upload pada Google drive anda (apabila yang belum punya) cara nya copy kode nya lalu buat file txt dan paste. rename format file txt menjadi html

Ambil Code

4. Pasang kode HTML dibawah ini tepat dibawah penutup tag </p> ke-2 dan ke-4

<iframe allowfullscreen='allowfullscreen' class='myframe' src='https://googledrive.com/host/0B-GXzRKoPbNnRkdncDdGbDNhZkk'/>

kode yang sayagaris bawah adalah link dari HTML Escaper, silahkan ganti dengan HTML Escaper yang telah anda upload tadi

5. Pasang kode Javascript dibawah ini tepat dibawah penutup tag </p> ke-2 dan ke-4

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('.konversi').live("click",function() {
        $('.myframe').show();
        $('.tutup').show();
        $('.konversi').hide();
    });
    $('.tutup').live("click",function() {
        $('.myframe').hide();
        $('.tutup').hide();
        $('.konversi').show();
    });
    $('.buka_emo').live("click",function() {
        $('.emoWrap').slideToggle('slow');
    });
});
//]]>
</script>

6. Simpan Template

Tweet