Cara Mudah Memasang Emoticon DI Komentar Blog

Cara Memasang Emoticon DI Komentar Blog

Tutorial Cara Menampilkan Emoticon / Smiley DI Komentar Postingan Blogger

Menampilkan Emoticon Di Komentar Blogger Dengan JavaScript, pada kesempatan kali ini saya akan memberikan tutorial memasang list emoticon di atas komentar blog untuk ditampilkan di kolom komen.

Mungkin sudah banyak yang share tutorial ini, tapi apa salahnya saya juga ikut membuat postingannya, dengan tampilan emoticon yang mungkin berbeda.

Kalian juga bisa mengganti emoticonnya sesuai yang kalian inginkan dan tentunya kode pemanggil emoticonnya juga bisa di atur sesuka kalian.

Sebelumnya saya juga sudah pernah share artikel yang berkaitan dengan komentar blogger :



Di tutorial ini, kalian bisa menambah mengurangi emoticon yang sudah saya sediakan dengan emoticon yang kalian suka...
Bagi kalian yang ingin melihat hasil setelah memasukan emoticon di blog kalian, bisa lihat di link demo berikut ini.
Demo Emoticon Comments Blogger
Nah untuk tutorial pemasnagan emoticon di kolom komentar blogger, kalian bisa ikuti tahap-tahap dibawah ini

Memasang Emoticon Pada Komentar Blogger

  • langkah pertama, login terlebih dahulu ke akun blogger kalian
  • Setelah Login, Masuk ke menu TemplateEdit HTML
  • Kalian cari kode </head> Lalu Masukan CSS dibawah ini tepat diatasnya
  • 
    <style type="text/css">
    img.comment_emo {
        vertical-align: middle !important;
        border: 0px !important;
        height: 18px !important;
        width: 18px !important;
        display: inline-block;
        cursor: text;
    }
    .mstamvan-key {
        border: 1px solid #334;
        border-radius: 3px;
        position: relative;
        text-align: center;
    }
    </style>
    
    Kalian bisa mengatur ukuran emoticonnya dengan merubah nilai di kode berikut ↓
    
    height: 18px !important;
    width: 18px !important;
    
  • Tahap selanjutnya, kalian cari lagi kode </body>
  • Kalo udah ketemu, masukan list emoticon dibawah ini tepat diatasnya
  • 
    <script type='text/javascript'>
    //<![CDATA[
    mastamvan = document.getElementById('comments');
    if (mastamvan) {
        zx = mastamvan.getElementsByTagName("p");
        for (i = 0; i < zx.length; i++) {
            if (zx.item(i).getAttribute('CLASS') == "comment-content", "emotlist") {
                mastamvan_emot = zx.item(i).innerHTML.replace(/emot0/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot.png' alt='emot0' title='Emot0' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emot1/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot1.png' alt='emot1' title='emot1' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emot2/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot2.png' alt='emot2' title='emot2' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emot3/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot3.png' alt='emot3' title='emot3' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emot4/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot4.png' alt='emot4' title='emot4' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emot5/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot5.png' alt='emot5' title='emot5' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emot6/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot6.png' alt='emot6' title='emot6' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emot7/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot7.png' alt='emot7' title='emot7' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emot8/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot8.png' alt='emot8' title='emot8' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emot9/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot9.png' alt='emot9' title='emot9' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emota0/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot10.png' alt='emota0' title='emota0' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emota1/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot11.png' alt='emota1' title='emota1' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emota2/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot12.png' alt='emota2' title='emota2' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emota3/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot13.png' alt='emota3' title='emota3' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emota4/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot14.png' alt='emota4' title='emota4' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emota5/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot15.png' alt='emota5' title='emota5' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emota6/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot16.png' alt='emota6' title='emota6' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emota7/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot17.png' alt='emota7' title='emota7' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emota8/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot18.png' alt='emota8' title='emota8' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emota9/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot19.png' alt='emota9' title='emota9' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotb0/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot20.png' alt='emotb0' title='emotb0' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotb1/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot21.png' alt='emotb1' title='emotb1' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotb2/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot22.png' alt='emotb2' title='emotb2' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotb3/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot23.png' alt='emotb3' title='emotb3' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotb4/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot24.png' alt='emotb4' title='emotb4' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotb5/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot25.png' alt='emotb5' title='emotb5' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotb6/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot26.png' alt='emotb6' title='emotb6' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotb7/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot27.png' alt='emotb7' title='emotb7' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotb8/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot28.png' alt='emotb8' title='emotb8' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotb9/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot29.png' alt='emotb9' title='emotb9' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotc0/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot30.png' alt='emotc0' title='emotc0' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotc1/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot31.png' alt='emotc1' title='emotc1' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotc2/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot32.png' alt='emotc2' title='emotc2' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotc3/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot33.png' alt='emotc3' title='emotc3' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotc4/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot34.png' alt='emotc4' title='emotc4' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotc5/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot35.png' alt='emotc5' title='emotc5' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotc6/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot36.png' alt='emotc6' title='emotc6' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotc7/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot37.png' alt='emotc7' title='emotc7' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotc8/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot38.png' alt='emotc8' title='emotc8' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotc9/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot39.png' alt='emotc9' title='emotc9' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotd0/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot40.png' alt='emotd0' title='emotd0' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotd1/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot41.png' alt='emotd1' title='emotd1' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotd2/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot42.png' alt='emotd2' title='emotd2' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotd3/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot43.png' alt='emotd3' title='emotd3' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotd4/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot44.png' alt='emotd4' title='emotd4' class='comment_emo'/>");
                mastamvan_emot = mastamvan_emot.replace(/emotd5/gi, "<img src='https://raw.githubusercontent.com/mastamvan/image/master/emot45.png' alt='emotd5' title='emotd5' class='comment_emo'/>");
                zx.item(i).innerHTML = mastamvan_emot;
            }
        }
    }
    //Kode Untuk Menampilkan Kode Emoticon Ketika Image/Emoticon di Klik
    //Memerlukan jQuery Library
    $(document.body).on("click",function(){$(".mstamvan-key").remove()}),$(".comment_emo").css("cursor","pointer").on("click",function(t){$(".mstamvan-key").remove(),$(this).after('<input class="mstamvan-key" type="text" size="6" value=" '+this.alt+'" />'),$(".mstamvan-key").trigger("select"),t.stopPropagation()});
    //]]>
    </script>
    
    Kalian bisa mengganti Link Imagenya dengan emoticon yang kalian mau..
    https://raw.githubusercontent.com/mastamvan/image/master/emot1.png
    replace(/emot1/gi,emot1 adalah kode untuk menampilkan emoticon di kotak komentar
    Kalian bisa menggantinya dengan simbol / tulisan lain
    Kalo kalian menggantinya dengan simbol seperti :), kalian harus menganti kodenya mulai dari /emot1/gi
    Misal
    /emot1/gi menjadi ':)'.
    /emot2/gi menjadi ':('.
    Ingat, tambahkan tanda kutip ' atau "
  • Kalo sudah tinggal save n selesai
  • Untuk mencobanya, kalian coba komentar dengan kode seperti emot1 , emot2 , emot3 , emota1 dll
  • Memasang Emoticon Di komentar blog sudah selesai
  • Buat kalian yang ingin menampilkan daftar list emoticonnya di atas from komen blog, bisa ikuti langkah-langkah dibawah ini
  • Masih di Edit HTML
  • Silahkan Cari Kode ↓
  • <b:includable id='threaded-comment-form' var='post'>
  • Kalo udah ketemu, liat kode di bawahnya ada html seperti ini <p><data:blogCommentMessage/></p>
  • Penampakannya seperti dibawah ini ↓
  • 
                  <b:includable id='threaded-comment-form' var='post'>
      <div class='comment-form'>
        <a name='comment-form'/>
        <b:if cond='data:mobile'>
          <p><data:blogCommentMessage/></p>
          <data:blogTeamBlogMessage/>
          <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
          <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
        <b:else/>
          <p><data:blogCommentMessage/></p>
          <data:blogTeamBlogMessage/>
          <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
          <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
        </b:if>
        <data:post.cmtfpIframe/>
        <script type='text/javascript'>
          BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
        </script>
      </div>
    </b:includable>
    
  • Kalian Tambahkan Html di kode <p><data:blogCommentMessage/></p> yang ke dua, sehingga hasilnya seperti berikut
  • 
                  <b:includable id='threaded-comment-form' var='post'>
      <div class='comment-form'>
        <a name='comment-form'/>
        <b:if cond='data:mobile'>
          <p><data:blogCommentMessage/></p>
          <data:blogTeamBlogMessage/>
          <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
          <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
        <b:else/>
          
          <p><data:blogCommentMessage/></p>
          <p><span id='emotlist' class='emotlist'>emot0 emot1 emot2 emot3 emot4 emot5 emot6 emot7 emot8 emot9 emota0 emota1 emota2 emota3 emota4 emota5 emota6 emota7 emota8 emota9 emotb0 emotb1 emotb2 emotb3 emotb4 emotb5 emotb6 emotb7 emotb8 emotb9 emotc0 emotc1 emotc2 emotc3 emotc4 emotc5 emotc6 emotc7 emotc8 emotc9 emotd0 emotd1 emotd2 emotd3 emotd4 emotd5</span></p>
          
          <data:blogTeamBlogMessage/>
          <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
          <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
        </b:if>
        <data:post.cmtfpIframe/>
        <script type='text/javascript'>
          BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
        </script>
      </div>
    </b:includable>
    
  • Kalo sudah, tinggal save dan lihat hasilnya
  • Memasang emoticon di komentar blog sudah selesai..

Cukup sekian dan tetima kasih, smeoga artile lentang Tutorial cara menampilkan emoticon di dalam komentar blog ini bermanfaat. Apabila ada yang bingung, silahkan bertanya di kolom komentar ya gan :)
14 komentar
  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Gagal gimana gan?
      Ada pesan errornya / gimana?

      Delete
    2. Gak ada pesan errornya Mas, yang jelas dia emtoiconnya cuman nangkring di bawah form comment gitu

      Delete
    3. Langsung aja ke http://www.nikmalabdul.com/2017/03/membuatideceritaantimainstream.html#comment-form

      Delete
    4. Oh, kalo itu penempatan HTML templatenya gan, harus d pindahin.
      [comment-form] pindahin ke atas [comments-content]

      Delete
  2. Punya saya gk ada ini nya gan p></p

    ReplyDelete
    Replies
    1. Bisa jadi penulisan di template agan seperti ini
      <p>
      <data:blogCommentMessage/>
      </p>


      Coba carinya ↓
      <data:blogCommentMessage/>

      Delete
  3. di template saya juga gak ada mas :)

    ReplyDelete
  4. mantap :-d . . . makasih bang tutorialnya.... jangan lupa singgah di sederhanaku http://demaslah.blogspot.com

    ReplyDelete