Cara Memasang Emoticons Dibawah Posting Blog

Cara Memasang Memasang Emoticons Dibawah Posting Blog

Selamat siang sobat semua, Alhmadulillah pada kesempatan yang baik ini saya akan mencoba memberikan sedikit tutorial bagaimana cara pasang emoticons di bawah posting blog.

Sobat mungkin pengen blognya terlihat, menarik, cantik, mungkin salah satunya sobat bisa memasang emoticons dibawah posting blog sobat. Selain bisa mempercantik tampilan blog, emoticon bisa juga menjadi cara mengekspresikan perasaan para visitor blog sobat. jadi tidak hanya tulisan-tulisan saja ...hehehe

Mungkin sobat belum punya dan berencana memasang emoticons dibawah posting blog sobat, berikut langkah-langkah yang bisa sobat lakukan.

1. Bukalah blog sobat
2. Pilih Template >> Edit HTML
3. Cari kode </body> untuk lebih memudahkan tekan Ctrl+f, kalau sudah ketemu silahkan copy paste script di bawah ini 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>
<script src='https://njilun2.googlecode.com/svn/njilun.js' type='text/javascript'/>
</b:if>

4. Belum selesai sampai disitu, lanjuta lagi sobat cari kode ]]></b:skin> kemudian copy paste script dibawah ini di atas 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;
}

untuk lebih jelasnya silahkan sobat gambar dibawah ini

5. Kalau di blog sobat belum ada jQuery silahkan copy paste script dibawah ini di atas kode </head>

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

6. Langkah terakhir klik Save Template

Semoga yang sedikit dari saya ini bermanfaat bagi seobat semua, jangan lupa core-coret ya sob...