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
Step 3
Add the code below just before
//
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."
})
});
//]]>
type='text/javascript'/>
Step 4
Hit CTRL+F and Search for ]]>
Step 5
COPY the code below and PASTE it just before ]]>
.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;
}
Step 6
Click on Save Template Button
Step 7
Like our Official Facebook fan page because your DONE!!!! =)
NOTE: Live demo below.
0 comments Blogger 0 Facebook
Post a Comment