CARA MEMBUAT EMOTICON DI KOMENTAR

CARA MEMBUAT EMOTICON DI KOMENTAR - Pada kesempatan kali ini saya akan berbagi tutorial yang keren, tutorial ini saya dapatkan dari blog tetangga saat saya blogwalking dan saya menuliskan komentar namun di blog ini sedikit berbeda karena blognya memakai Emoticon yang sangat lucu dan keren. tengok saja screenshot-nya di bawah ini:

CARA MEMBUAT EMOTICON DI KOMENTAR

karena saya baik, jadi saya akan memberikan tutorialnya, meskipun blog Mas Ryan Blog belum memakainya mungkin sobat ingin memasangnya di blog sobat supaya blognya makin cantik.

CARA MEMBUAT EMOTICON DIKOMENTAR:
1. Login ke akun blogger Anda
2. Pada Dashboard klik Template » Edit HTML
3. Cari kode </head> menggunakan CTRL+F
4. Letakan kode script di bawah ini tepat diatas kode </head>

<script src='https://dmblog-project.googlecode.com/svn/Emoticononion.js' type='text/javascript'/>

5. Cari kode </body> kemudian letakan kode berikut ini diatasnya:

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

6. Untuk tampilan lebih menarik, tambahkan juga kode CSS berikut ini dan letakan di atas kode ]]></b:skin>

/* EMOTICON */
.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:&quot;&quot;;
  position:absolute;
  bottom:-10px;
  left:10px;
  border-top:10px solid #860000;
  border-right:20px solid transparent;
  width:0;
  height:0;
  line-height:0;
}

7. Terakhir klik Save atau Simpan Template

*Catatan: jika emoticon di klik dan kodenya tidak muncul, ganti jQuery pada template sobat dengan jQuery dibawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

letakan kode diatas di atas kode </head>

Demikian Cara Membuat Emoticon di Komentar, semoga bermanfaat. sampai jumpa di postingan selanjutnya, Salam Blogger!