Thursday, 9 May 2013

Add Yahoo Smiley Emoticons Above Blogger / BlogSpot Comment Form

Anonymous  Blogger Tips N Tricks, Blogger Widgets  



Yahoo smileys on blogger comments. Yahoo smileys are Now available in blogger comments. Using with a simple JavaScript Hack, smiley characters are replaced with Yahoo Smiley images. I used yahoo smileys in Yahoo emotions site and implemented this script. I changed some smiley characters for our requirement. You can try this in bellow comments form.









ADD YAHOO! SMILEYS ON BLOGGER COMMENTS

There are three simple steps in this…
a. Adding CSS Code
b. Adding Html Code
c. Adding Javascript

ADDING CSS CODE

  1. Go to Blogger Dashbord > Design > Edit HTML
  2. Click on Expand Widgets tick box
  3. Search for ]]></b:skin> tag and add bellow code before It.
    .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;
}
img.w2bsmly {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

ADDING HTML CODE

  1. Search for bellow two tags
    <b:if cond='data:post.embedCommentForm'>
 <b:include data='post' name='comment-form'/>
  2. Add bellow code in between above two tags

 
  1. <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpiOczKmoPOuj3b113qancN9NDYSTU9hVoJ6-heyZBLWmlNl5XEs_cYfADVQPeyBJ4Rec6gB9RYtDxrQYCD4rOgm6VuIRBzZCMZXsh74z_OsYFlZSPxBep4NESnDnrlx3L9I_6_aILCX6H/" border="0"/></a> 
</div>

ADDING JAVASCRIPT CODE

  1. Search for </body> tag
  2. place bellow code before it and Save Template.
    <script src='http://widgets.way2blogging.org/blogger-widgets/w2b-ysmileys-for-bloggercomments.js' type='text/javascript'></script>

Need Help ? If you need further help regarding this tutorial or regarding this blog then just leave your comment on ASK QUESTION page on my blog. I will be happy to answer your queries shortly.

Socialize This Post
SOCIALIZE IT →
SHARE IT →

 

Copyright © 2013 All Rights Reserved By. Khizer Ishtiaq