Add Animated Style Smileys/Emotions In Blogger Comments

Add Animated Style Smileys/Emotions In Blogger Comments

No more blah..blah...blah... info's, so lets get started!

Step 1

 Go to [Blogger Dashboard] ---> [Template] ---> [Edit HTML]

Step 2

Hit CTRL+F Search for </body>

Step 3

Add the code below just before </body>

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

//<![CDATA[

jQuery(document).ready(function () {emoticonx({

emoRange:"#comments p, div.ttwrap",

putEmoAbove:"iframe#comment-editor",

topText:"Click the image to see dlasap code!",

emoMessage:"To insert dlasap emoticon you must added at least one space before the code."

})

});

//]]>

</script>

<script src='http://yourjavascript.com/345424190/downloadasap-emotions-smileys.js'

type='text/javascript'/>

</b:if>

Step 4

Hit CTRL+F and Search for ]]></b:skin>

Step 5

COPY the code below and PASTE it just before  ]]></b:skin>

<!---downloadasap.blogspot.com smiley dlasap code starts--->
.ttwrap {
position:relative;
padding:10px;
margin-bottom:7px;
background:#fff;
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF),
color-stop(1, #FFF9F2));
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
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;
}
.ttwrap: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;
}
<!---downloadasap.blogspot.com smiley dlasap code ends--->

Step 6

Click on Save Template Button

Step 7

Like our Official Facebook fan page because your DONE!!!! =)

NOTE: Live demo below.