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('<data:post.appRpcRelayPath/>');
</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('<data:post.appRpcRelayPath/>');
</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"
![[TUT] Cara Install SQLmap for IOS](https://image.ibb.co/g7z68a/sql.jpg "[TUT] Cara Install SQLmap for IOS")
