Membuat Emoticon Lucu Ala blogerch.com by BlogERCH

Share

Membuat Emoticon Lucu Ala blogerch.com

Membuat Emoticon Keren Menambahkan Emoticon pada komentar bertujuan agar komentator bisa mengekxpresikan diri dengan emoticon yang ada agar suasana pada saat berkomentar menjadi lebih hidup. Kode Emoticon ini saya ambil dari MKR-Site dan saya beri sedikit tambahan CSS agar lebih menarik;
Berikut cara memasang Emoticon pada komentar Blogspot:
1. Login Akun Blogger anda
2. Pada Dashboard pilih Template » Edit HTML
3. Cari kode </body> kemudian letakkan 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>
<script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>
</b:if>
4. Untuk lebih menarik tambahkan kode CSS berikut ini dan letakkan diatas kode ]]></b:skin>
.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;
}

5. Letakkan kode JQuery dibawah di atas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
NB: Tidak boleh lebih dari satu kode jQuery pada template.  

6. SIMPAN TEMPLATE ANDA


Silahkan anda sesuaikan sendiri, Semoga Bermanfaat..
0 Comments
Tweets
Responds

Provide your comments in the form below. If there is no website or blog, you can use the anonymous

Setiap komentar di blog ini akan dimoderasi oleh pengelola situs, dengan demikian tidak menutup kemungkinan pengelola situs menghapus setiap komentar yang melakukan penghinaan berlebihan, spam, referral link, hal yang berbau sara, porno, iklan (tanpa pemberitahuan sebelumnya) dan hal lainnya yang serupa. --- Baca Ketentuan

~ErcH~

Facebook

Random Post


Recent Post

Label:
Recent Posts