Cara Memasang Smiley Atau Emoticon Pada Komen Blog

Smileys/Emoticons adalah salah satu cara untuk membuatkan pengunjung berasa seronok dan yakin dengan blog kita. Bagaimana pun tidak banyak template yang kita minati dipasang dengan emoticon. Bagaimanapun kitamasih boleh membuatnya sendiri.

Contoh Emoticon/Smiley

Sila ikuti langkah-langkah di bawah. Jika kurang berkeyakinan, backup template kita terlebih dahulu agar blog kita dapat dipulihkan jika terdapat kesilapan semasa mengedit template.

1. Buka Blogger Dashboard --> Template
2. Sila backup template
3. Klik Edit HTML
4. Gunakan  Ctrl+F untuk mencari kod  </body>
5. Selepas itu copy kod di bawah ini dan pastekan di atas atau sebelum kod </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>

Nota:  Anda boleh mengubah perkataan bold merah dengan perkataan yang kita sukai.

6. Langkah berikutnya ialah dapatkan kod  ]]></b:skin>
7. Copy dan pastekan script di bawah di atas/selepas   ]]></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;
}

8. Kemudian tambah script di bawah di atas.sebelum  </head>

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

9. Dan akhir sekali klik preview/pratonton. Jika tiada masalah klik save template.

Demonya ialah seperti diruangan komen entry ini. :)