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

Konversi Kode dan Emoticon Show Hide

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



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: &#39;Open Sans&#39;, sans-serif, &#39;Segoe UI&#39;,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: &#39;Open Sans&#39;, sans-serif, &#39;Segoe UI&#39;,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>


HTML


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



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

39 Responses to "Membuat Show Hide Emoticon Dan Konversi kode pada Form Thread Komentar Blogger"

  1. Makasih sebelumnya, tapi saya kurang suka mengggunakan
    &lt;iframe allowfullscreen='allowfullscreen
    karena tidak valid, sebelumnya saya juga pernah menggunakan cara ini tapi banyak komplain dari sahabat blog saya jadi saya gunakan cara di tutorial blog saya.
    Makasih pencerahannya :D

    ReplyDelete
    Replies
    1. terima kasih juga atas pencerahannya,
      nanti diperbaiki :-bd

      Delete
    2. Bisa gunakan data-src sob daripada iframe src
      Kebanyakan yg di cari para blogger sekarang validasinya baru style'nya..
      Pengalaman dari sahabat blogger..

      Delete
    3. bisa beri saya contohnya menggunakan data src ?

      Delete
    4. maaf izin jawab, mungkin bisa dipake yang satu ini :D
      <script type='text/javascript'>
      //<![CDATA[
      setTimeout(function() {
      $('.konversi').each(function() {
      $(this).replaceWith('<iframe class="idblognetwork loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen" width="738px" height="100px" marginwidth=0 marginheight=0 ></iframe>');
      });
      }, 5000);
      //]]>
      </script>

      Delete
    5. sip, thanks masukannya, :-bd

      btw masukin linknya di src="' inikah ?

      namun pada penggunaan seperti cara saya diatas sudah saya cek validasinya masih tetep valid tuh 0:)

      Delete
    6. gk masukannya sperti kode ini
      <div class="idblognetwork loader" data-src="linknya"></div>
      Jadi untuk mengatur ukurannya ada di jQuerynya

      Delete
    7. paham paham,

      menggunakan jquery untuk replace ya..

      nice :-bd

      Delete
  2. Wahaha, panjang banget kayak uler, tapi kalau tinggal copas jadi singkat juga :) Btw, desain templatenya keren

    ReplyDelete
  3. nice gan.. tapi template ane ngga suppot kyknya deh.. jadi gabisa dipake :(

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. wih jadi tambah keren nih komentarnya pake emoction :-bd ,iji coba ya gan ;)

    ReplyDelete
  6. Wuihh keren nih bang cocok sekali kebetulan gue juga mo nyoba yang ini tanks yah :D

    ReplyDelete
  7. keren euuuuy... thanks tuk tutornya, salam kenal :)

    ReplyDelete
  8. wah bagus nih buat blog saya makasih info nya mas

    ReplyDelete
  9. saya udah pernah nyoba pas saya lihat hasilnya warna form komentarnya hilang mohon di jawab gan!!??
    terima kasih.

    ReplyDelete
  10. Wah makasih gan :) sangat bermanfaat :)
    Cuman ane masih bingung masangnya -_-

    ReplyDelete
  11. Maaf, tetapi kami tidak dapat menyelesaikan permintaan Anda.

    Bila melaporkan kesalahan ini kepada Dukungan Blogger atau di Grup Bantuan Blogger, harap:

    Uraikan apa yang Anda lakukan ketika menemui kesalahan ini.
    Berikan kode kesalahan berikut.

    bX-eecj3v

    Informasi ini akan membantu kami melacak dan mengatasi masalah Anda! Maaf atas ketidaknyamanan ini.

    ReplyDelete
  12. itu maksudnya apa ya kang? mohon pencerahannya...Terimakasih.

    ReplyDelete
  13. iya kang...muncul pas mau save template nya...tapi udah saya perbaiki ternyata kesalahannya saya lupa ganti kode pemanggilan HTML nya saja. Namun, setelah sudah muncul, kenapa tidak bisa di klik yang kang, button konversi dan emoticonnya. Mohon pencerahannya? Terimakasih.

    ReplyDelete
    Replies
    1. mana linknya coba ?

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


      di bawah kode

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

      Delete
  14. maaf baru balas kang, baik coba saya terapkan arahan dari akang. makasih sebelumnya.

    ReplyDelete
  15. aduh...maaf kang masih belum berhasil...ini link blog saya kang, http://s-k-b.blogspot.com

    Terimakasih.

    ReplyDelete
    Replies
    1. waduh, itu bukan komentar blogger ya kang ?

      tutorial ini bekerja hanya pada komentar blogger seperti blog ini kang..
      itu komenta blog akang sudah komentar dari pihak ke 3

      Delete
  16. hehehe iya kang...komentar saya dapat dari blog tetangga.....kalo mw berkenan tolong lihat komentar blog saya deh..... di http://s-k-b.blogspot.com/2014/05/mengatasi-idm-yang-ketahuan-fake-sn.html?showComment=1402636589883#c9007344008302800337, mohon maaf ya kang kalo saya merepotkan. Terimakasih.

    ReplyDelete
    Replies
    1. saya cek kayaknya smua javascript akang tidak berfungsi kang, kemungkinan besar diakibatkan terdapat JQuery, 2 buah di template akang,
      coba cari ini kang : https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

      apabila ada 2 coba hapus satu..

      kalo tidak, coba template akang diupload, nanti saya download dan saya bantu membuat tombolnya..

      Delete
  17. baik, coba saya telusuri lagi apa yang akang katakan...dan untuk upload template saya dan diberitahukan kepada akang, bagaimana caranya? terimakasih.

    ReplyDelete
    Replies
    1. coba upload di mediafire / 4shared, nanti copy link nya, dan nanti tulis disini link nya, nanti biar saya download :W

      Delete
  18. Untuk J-Query-nya alhamdulillah cuma ada 1 kang....Terimakasih.

    ReplyDelete
  19. hehehe...iya kang.....setelah di utak-atik walau otak rada mumet...akhirnya bisa juga....makasih banyak loh kang atas bantuannya...maaf kalo saya merepotkan. Terimakasih.

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
  22. itu pasang script kode emo nya dimana gan??

    ReplyDelete