08 July 2011

How to add Yahoo Smiley Emoticons to Blogger Comment Form?

Advertisements

We all have been using the smileys for quite a long time. We use them on mobile, forums, etc.

Now you can add these yahoo smiley emoticons to your Blogger blog in  comment form. So that your users can easily use them while commenting on your blog. This will make commenting on your blog more fun and attractive.

So what you have to do is add some css code, html code and javascript to your template.

Here's how to do this -

STEP I : In this step we'll add the css code to your template.

- Go to Dashbord > Design > Edit HTML > Expand Widgets.
- Now search for ]]></b:skin> tag in your template.
- Add following code below that tag -

.way2bloggingcsmly {
background: none repeat scroll 0 0 #EFF5FB !important;
border: 1px dashed green !important;
font-size: medium !important;
padding: 5px !important;
text-align: left !important;
font-weight:bold !important;
width:100% !important;
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;
}
img.w2bsmly {
height: auto !important;
vertical-align: middle !important;
width: auto !important;
border:0px !important;
}

STEP II : Now that the CSS code is added, we'll add the HTML code.

- Search for the following code in your template

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

- Now the code below in between the above two tags

<div class="way2bloggingcsmly">
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" alt="" class="w2bsmly"/> :)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" alt="" class="w2bsmly"/> :(
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" alt="" class="w2bsmly"/> ;)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" alt="" class="w2bsmly"/> :D
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" alt="" class="w2bsmly"/> ;;-)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" alt="" class="w2bsmly"/> :-/
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" alt="" class="w2bsmly"/> :x
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" alt="" class="w2bsmly"/> :P
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" alt="" class="w2bsmly"/> :-*
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" alt="" class="w2bsmly"/> =((
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" alt="" class="w2bsmly"/> :-O
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" alt="" class="w2bsmly"/> X(
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" alt="" class="w2bsmly"/> :7
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" alt="" class="w2bsmly"/> B-)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" alt="" class="w2bsmly"/> :-S
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" alt="" class="w2bsmly"/> #:-S
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" alt="" class="w2bsmly"/> 7:)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" alt="" class="w2bsmly"/> :((
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" alt="" class="w2bsmly"/> :))
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" alt="" class="w2bsmly"/> :|
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" alt="" class="w2bsmly"/> /:)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" alt="" class="w2bsmly"/> =))
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" alt="" class="w2bsmly"/> O:-)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" alt="" class="w2bsmly"/> :-B
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" alt="" class="w2bsmly"/> =;
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif" alt="" class="w2bsmly"/> :-c
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif" alt="" class="w2bsmly"/> :)]
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif" alt="" class="w2bsmly"/> ~X(
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif" alt="" class="w2bsmly"/> :-h
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif" alt="" class="w2bsmly"/> :-t
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif" alt="" class="w2bsmly"/> 8-7
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif" alt="" class="w2bsmly"/> I-)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif" alt="" class="w2bsmly"/> 8-|
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif" alt="" class="w2bsmly"/> L-)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif" alt="" class="w2bsmly"/> :-a
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif" alt="" class="w2bsmly"/> :-$
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif" alt="" class="w2bsmly"/> [-(
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif" alt="" class="w2bsmly"/> :O)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif" alt="" class="w2bsmly"/> 8-}
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif" alt="" class="w2bsmly"/> 2:-P
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif" alt="" class="w2bsmly"/> (:|
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif" alt="" class="w2bsmly"/> =P~
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif" alt="" class="w2bsmly"/> :-?
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif" alt="" class="w2bsmly"/> #-o
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif" alt="" class="w2bsmly"/> =D7
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif" alt="" class="w2bsmly"/> :-SS
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif" alt="" class="w2bsmly"/> @-)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif" alt="" class="w2bsmly"/> :^o
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif" alt="" class="w2bsmly"/> :-w
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif" alt="" class="w2bsmly"/> 7:P
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif" alt="" class="w2bsmly"/> 2):)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif" alt="" class="w2bsmly"/> X_X
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif" alt="" class="w2bsmly"/> :!!
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif" alt="" class="w2bsmly"/> m/
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif" alt="" class="w2bsmly"/> :-q
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif" alt="" class="w2bsmly"/> :-bd
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif" alt="" class="w2bsmly"/> ^#(^
<img src="http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif" alt="" class="w2bsmly"/> :ar!
<a href="http://www.way2blogging.org" target="_blank">
<img src="http://2.bp.blogspot.com/_nDNgmK8FIyI/TBx__8vPtdI/AAAAAAAAAHM/DJscmXS8XFg/trans.gif" border="0"/></a>
</div>

STEP III : In this final step we'll add the javascript.

- Find tag in your template and below it add the following code and save it.

<script src='http://bloggerblogwidgets.googlecode.com/files/way2bloging-ysmileys-for-bloggercomments.js' type='text/javascript'></script>

That's it, you'll get following smileys in your comment form.


Related Posts

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More