Cara Memasang Emotion di Kotak Komentar


Untuk melengkapi siang ini saya akan membagikan widget emotion diatas kotak komentar setelah saya selesai membuat artikel cara membuat link warna warni , widget ini memang sangat menarik rasanya tidak sabar untuk langsung memasangnya pada blog, gimana enggak, seolah -olah widget nya ngomong ayolah cepet pasang gw (hehe), keuntungan dari widget ini adalah mempercantik tampilan kotak komentar sekaligus manambah nilai sudut pandang pengunjung blog yang gak tahan langsung ingin komentar menggunakan emoticon. langsung aja nih tutornya.
  • Login ke blogger
  • Pilih template >> edit html
  • Centang expand widget template
  • Cari kode </body> untuk mempermudah gunakan ctrl+f
  • Copy paste kode ini tepat diatas kode </body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
})
});
//]]>
</script>
<script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>
</b:if>

  • kemudian cari kode ]]></b:skin>
  • copy paste kode ini tepat diatas ]]></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;
}

  • Langkah terakhir, simpan Template sobat
Share This Article :

2 comments:

  1. screenshotnya seperti apa gan ?

    ReplyDelete
    Replies
    1. berupa image gan, sesuai dgn kode emotion yg di masukkan di kolom comment,,,

      Delete

Terimakasih telah berkenan mengunjungi dan meninggalkan komentar di Blog ini. Setiap Saran & Kritik yang masuk akan kami jadikan sebagai bahan Evaluasi untuk perbaikan Blog ini.
CATATAN :
1. Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA DISINI...</i>
2. Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA DISINI...</i>
3. Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DISINI...</i>
4. Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DISINI...</b>

NB: Jika anda ingin menyisipkan kode diatas silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar.
Jika anda ingin berkomentar "BIASA", abaikan no 1-4

Copyright © 2013 Warung Sehati - All Rights Reserved

Modified by Machmudan Lubis is proudly powered