logo blog

Cara Mudah Memasang Emoticon DI Komentar Blog

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

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Cara Mudah Memasang Emoticon DI Komentar Blog. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Cara Mudah Memasang Emoticon DI Komentar Blog. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

7 comments

Nikmal Abdul
This comment has been removed by the author.
Mas Tamvan

Gagal gimana gan?
Ada pesan errornya / gimana?

Nikmal Abdul

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

Mas Tamvan

Bisa saya liat gan?

Nikmal Abdul

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

Mas Tamvan

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

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Tambahkan Spasi Setelah Memasukan Kode Emoticon..
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show EmoticonShow Emoticon Hide Emoticon