Add emoticons smileys to Blogger comment

Emoticons are also known as smileys which is used to represent the actual emotions of the visitors.They had been mainly used in social websites like facebook.Here we just add the emoticons just above the comment form which visitors can use during their comments and also mention them.

It is very attractive looks good and make the we site be alive always and it also give visitors a nice experience as they are using social websites.

Adding CSS for Smiley to blogger

• Log in to blogger.
• Then edit template and click proceed.
• Now backup your template.
• Then search for the ]]></b:skin> 
• Then place the below code above that code.

.blog4alsmly{
    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;
}
img.b4lsmly {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

Adding emoticons to blogger comment form 

Now search for the below code.

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

Then copy the below code and place it between the above two lines of code.Don't change any piece of code otherwise it won't work.

<div class="blog4alsmly">
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" alt="" class="b4lsmly"/>  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" alt="" class="b4lsmly"/>  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" alt="" class="b4lsmly"/>  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" alt="" class="b4lsmly"/>  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" alt="" class="b4lsmly"/> ;;-)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" alt="" class="b4lsmly"/> :-/
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" alt="" class="b4lsmly"/>  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" alt="" class="b4lsmly"/>  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" alt="" class="b4lsmly"/> :-*
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" alt="" class="b4lsmly"/> =((
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" alt="" class="b4lsmly"/> :-O
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" alt="" class="b4lsmly"/> X(
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" alt="" class="b4lsmly"/> :7
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" alt="" class="b4lsmly"/> B-)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" alt="" class="b4lsmly"/> :-S
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" alt="" class="b4lsmly"/> #:-S
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" alt="" class="b4lsmly"/> 7:)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" alt="" class="b4lsmly"/>  (
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" alt="" class="b4lsmly"/>  )
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" alt="" class="b4lsmly"/>  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" alt="" class="b4lsmly"/> /:)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" alt="" class="b4lsmly"/> =))
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" alt="" class="b4lsmly"/> O:-)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" alt="" class="b4lsmly"/> :-B
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" alt="" class="b4lsmly"/> =;
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif" alt="" class="b4lsmly"/> :-c
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif" alt="" class="b4lsmly"/>  ]
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif" alt="" class="b4lsmly"/> ~X(
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif" alt="" class="b4lsmly"/> :-h
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif" alt="" class="b4lsmly"/> :-t
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif" alt="" class="b4lsmly"/> 8-7
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif" alt="" class="b4lsmly"/> I-)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif" alt="" class="b4lsmly"/> 8-|
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif" alt="" class="b4lsmly"/> L-)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif" alt="" class="b4lsmly"/> :-a
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif" alt="" class="b4lsmly"/> :-$
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif" alt="" class="b4lsmly"/> [-(
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif" alt="" class="b4lsmly"/> :O)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif" alt="" class="b4lsmly"/> 8-}
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif" alt="" class="b4lsmly"/> 2:-P
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif" alt="" class="b4lsmly"/> (:|
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif" alt="" class="b4lsmly"/> =P~
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif" alt="" class="b4lsmly"/>  
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif" alt="" class="b4lsmly"/> #-o
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif" alt="" class="b4lsmly"/> =D7
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif" alt="" class="b4lsmly"/> :-SS
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif" alt="" class="b4lsmly"/> @-)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif" alt="" class="b4lsmly"/> :^o
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif" alt="" class="b4lsmly"/> :-w
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif" alt="" class="b4lsmly"/> 7:P
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif" alt="" class="b4lsmly"/> 2):)
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif" alt="" class="b4lsmly"/> X_X
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif" alt="" class="b4lsmly"/> :!!
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif" alt="" class="b4lsmly"/> m/
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif" alt="" class="b4lsmly"/> :-q
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif" alt="" class="b4lsmly"/> :-bd
<img src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif" alt="" class="b4lsmly"/> ^#(^
<img src="http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif" alt="" class="b4lsmly"/> :ar!
<a href="http://www.blog4al.com" rel="follow" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjGt4S-RBLhfiRTaFIinWjwEVl63WD7VWUVg1r-pwq7uAzl2R1fugJ_6I10i92gM8ig3-wDCD-oMMVXnVk0WLJIYK742JjHffD2EnzzJr3C4edQdVxPm6HTokXQ-6PQsogmB96Y02Tr1lq/" border="0"/></a>
</div>

Adding Javascript code to Blogger emoticons

This javascript code is used to select the which smiley the user selected and it will be loaded after checking if condition in script.

• Now search for </body> tag
• Then copy and paste the below code above it.

<script src='https://blog4al.googlecode.com/files/emoticons-for-blogger-comments.js' type='text/javascript'>/*Blogger emoticons created by blog4al*/</script>

• Then now click save button.
• Then open any page and scroll to comment form you will see a emoticons there encourage visitors to use those smileys.

Having any trouble comment below?