Bagaimana cara menambahkan Smiley / Emoticons ke blog

Segera blog Anda menjadi lebih baik di mata orang lain, pertama karena itu kreatif dan indah, berwarna dan tidak abu-abu, dan yang lainnya, itu menandakan semacam emosi yang harus Anda tunjukkan pada saat itu. Seperti yang ditambahkan, saya akan menunjukkan kepada Anda dan sangat mudah dengan cara ini. Seperti biasa, demo pertama. Klik di tempat ini yang ditulis dengan warna merah:   DEMO 1.   Buka Blogger Dashboard   ->  Template 2.   Klik  Edit HTML 4.   Gunakan  Ctrl + F  untuk menemukan  </ body> 5.   Kemudian salin dan tempel kode di bawahnya, di atas ini   </ body> 

Berikut kode yang Anda akan menempatkan bahwa di atas  </ body> tag

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

 

Sekarang cari]]> </ b: skin> dan tambahkan kode berikut di atasnya:

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

}

 


Jika Anda tidak memiliki blog ajax .... tambahkan ini di atas </head>

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

 
Sekarang akhirnya klik simpan dan lihat hasilnya. Itu saja.