Ads (728x90)

Latest Post

Kesehatan

Tips


Karena kemarin banyak komentator/pengunjung yang menginginkan emoticon blog onion head yang saya pakai di blog kang rio, maka dari itu pada kesempatan kali ini saya akan memenuhi permintaan mereka dengan membuat artikel tutorial blog tentang Cara Membuat Emoticon Lucu Onion Head pada komentar Blogspot.

Screenshot :

Menambahkan Emoticon pada komentar bertujuan agar komentator bisa mengekxpresikan diri dengan emoticon yang ada agar suasana pada saat berkomentar menjadi lebih hidup. Kode Emoticon dari MKR-Site dan saya beri sedikit tambahan CSS agar lebih menarik.

Berikut cara memasang Emoticon Lucu Onion Head pada komentar Blogspot :

1. Login Akun Blogger anda
2. Pada Dashboard pilih Template » Edit HTML3. Letakan kode script ini diatas kode </head>

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

4. 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>
</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>
5. Untuk lebih menarik tambahkan kode CSS berikut ini dan letakkan diatas 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;
}
 4.  Simpan Template

» Jika di klik emoticonnya dan kodenya tidak muncul.. ganti jQuery pada template anda dengan jQuery dibawah ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Letakkan jQuery tersebut diatas kode </head> 
NB: Tidak boleh lebih dari satu kode jQuery pada template. 

Silahkan anda sesuaikan sendiri, Semoga Bermanfaat.. 

Post a Comment

  1. makasih sob udah share, ijin pasang di blog ane sob.
    Mau ksh kritik sob boleh, gini saya perhatikan makin hari blog sobat makin berat di buka, bukan bermaksud apa2 sob. Tapi mungkin karna koneksi inetku yg lemot ya,, sekali lagi saya tdk ada mksud apa2 sob.

    Ditunggu kunjungannya. (h)

    ReplyDelete
    Replies
    1. hemmm tapi ada benernya juga mas, ane juga ngrasa blog ane ini tmbah berat aja....
      padahal widget cuman 3 doank hadeehh ;((

      Delete
  2. mantap kang, tapi ane dh make yg emoticon kayak punya akang..hehe

    ReplyDelete