Cara mudah memasang Emoticon pada Koemetar Blog dengan mudah

Cara mudah memasang Emoticon pada Koemetar Blog dengan mudah

1/13/2018

Baca Juga


Hai sahabat Blogger, kali ini saya akan memberikan tutorial Cara mudah memasang Emoticon pada Koemetar Blog. Mungkin sahabat Blogger kita sudah banyak yang share tapi apasalahnya saya juga ingin memberikan tutorial kepada kalian semua. tentunya cukup mudah jika penasaran langsung saja.

Kalian dapat menggaanti Emoticonya yang kalian inginkan,kodenya bisa di atur sesuka kalian.

Bagi kalian yang ingin lihat hasil demonya di link beriktut Demo Empticon Comments Blog. kalian bisa ikuti tahap-tahap sebagai berikut:

𐄂 Langkah pertama Masuk ke Blogg

𐄂 setelah login masuk  ke menu Template ➔ Edit Html

𐄂 Lalu cari kode, </head>, lalu masukan kode CSS di bawah 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>

Code by blog mastamvan
Catatan !
Kalian bisa mengatur ukuran emoticonnya dengan merubah nilai code berikut
height: 18px !important; width: 18px !important;

𐄂 Selanjutnya kalian cari kode  </body>

 𐄂 Kalo sudah ketemu, masukan list emoticon 

 




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

Code by blog mastamvan
𐄂 Kalo sudah tinggal save

𐄂  Untuk mencobanya, kalian coba komentar dengan kode seperti ini
emot1 , emot2 , emot3 , emota1 dll
𐄂 Memasang emoticon di komentar sudah selesai

𐄂 Bagi kalian yang ingin menampilkan daftar list emoticonnya di atas from koment blog.
bisa ikuti langkah-langkah di bawah ini.

𐄂 Masih di di EditHtml

 𐄂 Silahkan cari kode berikut
  • <b:includable id='threaded-comment-form' var='post'>
𐄂 Kalo udah ketemu, liat kode di bawahnya ada kode html seperti berikut
  • <p><data:blogCommentMessage/></p>
𐄂 Penampakanya seperti di bawah 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>
Code blog by  mastamvan 
𐄂 Kalian tambahkan kode Html
  • <p><data:blogCommentMessage/></p>
yang kedua maka hasilnya seperti 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>
      <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>
Code by blog mastamvan
𐄂 Kalo sudah tinggal save dan lihat hasilnya.

Sekian dari artikel saya semoga yang saya buat ini dapat di pahamami "terimakasih"

Artikel Terkait

Next
« Prev Post
Previous
Next Post »

Silahkan tinggalkan pesan jika Anda punya saran, kritik, atau pertanyaan seputar topik pembahasan.
catatan:
- silahkan tinggalkan pesan yang relevan
- komentar yang baik dan mengenai seputar Blog
- dilarang meninggalkan link aktif
Terima kasih untuk kerja samanya. (By Admin) ConversionConversion EmoticonEmoticon

Subscribe to: Post Comments (Atom)