Cara Buat Emoticon Komentar

Salam Jumpa Kembali Sobat Blogger.com

Pada postingan kali ini saya akan share bagaimana cara menambahkan emoticon pada kotak komentar blog Anda. Dengan adanya emoticon ini dapat membuat tampilan komentar dan kegiatan komentar semakin seru. Langsung saja saya jelaskan bagimana caranya.

• Pertama-tama Anda Log in ke blogger Anda.
• Kemudian pada dashboard klik Template >> Edit HTML
• Setelah itu pastekan kode </head> kedalam kotak find.
• Setelah kotak edit HTML terbuka, maka klik di dalam kotak dan tekan Ctrl+F untuk tampilkan kotak find.

• Jika sudah ketemu, maka paste kode dibawah ini tepat di ATAS kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://dmblog-project.googlecode.com/svn/Emoticononion.js" type="text/javascript"></script>

• Setelah code tersebut di copas, maka cari kode </body> dan pastekan kode dibawah ini tepat di ATAS kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>
</b:if>

• Terakhir tambahkan code CSS dibawah ini

.emoWrap {
  position:relative;
  padding:10px;
  margin-bottom:7px;
  background:#fff;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Opera */ 
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);
  border:3px solid #860000;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  font-weight:normal;
  color:#333;
}
.emoWrap:after {
  content:"";
  position:absolute;
  bottom:-10px;
  left:10px;
  border-top:10px solid #860000;
  border-right:20px solid transparent;
  width:0;
  height:0;
  line-height:0;
}

• Langkah terakhir adalah tekan save dan lihat perubahan yang terjadi.

Sekianlah cara buat emoticon komentar, semoga bermanfaat bagi blogger.com.

Terima Kasih Atas Kunjungan Anda.