Add Yahoo Smiley Emoticons Above Blogger/BlogSpot Comment Form

Add Yahoo Smiley Emoticons Above Blogger/BlogSpot Comment Form
If you have already enabled the comment-form feature in your blog*spot blog, then it would be better to add a list of smilies too, which can be used by the readers while commenting.

The comment-form with smileys, will look like this:

Add Yahoo Smiley Emoticons Above Blogger/BlogSpot Comment Form

Or you can see it in action [and leave a smiley-comment too], at the bottom of this post !

To add these smileys, follow these steps:

STEP #1
First log in to Blogger
Then go to Layout -> click on “Edit HTML” tab, and click on “Expand Widget Templates” tick-box.

Now find this code :

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

Now right IN-BETWEEN those two lines, add all these lines:

<div style=’-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86′>
<b>
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif’ width=’18’/> :))
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif’ width=’18’/> ;))
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif’ width=’18’/> ;;)
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif’ width=’18’/> 😀
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif’ width=’18’/> 😉
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif’ width=’18’/> :p
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif’ width=’22’/> :((
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif’ width=’18’/> 🙂
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif’ width=’18’/> 🙁
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif’ width=’18’/> :X
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif’ width=’18’/> =((
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif’ width=’18’/> 😮
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif’ width=’20’/> :-/
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif’ width=’18’/> :-*
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif’ width=’18’/> 😐
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif’ width=’24’/> 8-}
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif’ width=’31’/> :)]
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif’ width=’44’/> ~x(
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif’ width=’30’/> :-t
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif’ width=’18’/> b-(
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif’ width=’18’/> :-L
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif’ width=’34’/> x(
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif’ width=’30’/> =))
</b>
</div>

STEP #2

Now find this code in the template:

</body>

And just BEFORE it, add this line:

<script src=’http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/smiley.js’ type=’text/javascript’/><noscript><a href=”https://bloggerstop.net” target=”_blank”><span style=”font-size: x-small;”>Add Smilies</span></a></noscript>

Finally save the template.

OPTIONAL WORK:
Although the required javascript file has already been uploaded and linked by me in the code above (in RED), but as a backup, download and save this file on your PC:
Download this File:

Smiley.js ( As a zipped file )

And upload the file (smiley.js) to OpenDrive

Then copy the DIRECT LINK (streaming):

Add Yahoo Smiley Emoticons Above Blogger/BlogSpot Comment Form

And you may use this direct-link instead of the one used in the code above.

That’s it !
Now you can see smileys below your posts…

Leave a Reply

589 Comments on "Add Yahoo Smiley Emoticons Above Blogger/BlogSpot Comment Form"

Notify of
avatar
Sort by:   newest | oldest | most voted
Anonymous
Guest

Just trying it out ! 😀 :X =))

View Comment
Cool - This Thing Rocks !
Guest
Cool - This Thing Rocks !
asd
Guest
Zain
Guest

😉 Nice !!

View Comment
Anonymous
Guest

:)) so cool :-/

View Comment
Sarathganesh
Guest

:)) I’M ALSO TRYING OUT!

View Comment
Anonymous
Guest

da 🙂

View Comment
Sarathganesh
Guest

Hey your widget is not working!!!
it only displays the symbols,
come on divya!!!

View Comment
Divya Sai
Guest

Dude this is working perfectly fine, and all the icons are clearly visible,

You know what, the images are hosted and linked directly from the INTERNET’s top site – Yahoo!
They won’t be displayed only when the servers at Yahoo will crash !

View Comment
Sharifuddin Ibn Suhaimi
Guest

i had really dificult to create this..i cannot do it..i was done find the code…but does’nt have..why?

View Comment
Divya Sai
Guest

Hi Sharifuddin

In your blog, I have seen this in the comments section:
<h4 id='comment-post-message'>Catat Ulasan</h4>

Now right AFTER THIS, add the FIRST code,
then follow the instructions given above to add the second code…

(that means add the second code BEFORE </body>)

View Comment
Anonymous
Guest
De Bronnetjes
Guest

Hi Divya Say

I can’t find the first code you subscribe or is it me?

Hope you will help me out as I’m busy to make a blog for our trip to Australia within 2 weeks.

And maybe you have some more usefull tips regarding my blog

Many thanks allready ,Markus from the netherlands

View Comment
Divya Sai
Guest

You should have enabled the comment-form system in your blog, to complete this hack.

Pls read here:
embedded comment-form in your blogger

After doing the above hack, write any small post, to see the comment-form in action. Then try this “Smilies hack”

Regards
Sai

View Comment
De Bronnetjes
Guest

I couldn’t find the excact code in the embedded-form blogger that was required so I used a similar .
But I received an Error on the above of my blogger site 🙁

View Comment
Divya Sai
Guest

Welcome again Robin,

I have checked your blog’s source code,
so you have to find this in the template:

<h4 id='comment-post-message'>Een reactie plaatsen</h4>

Just below that add the first code,
and then follow the instructions given above to add the second code…..tell me if it works or not !

Regards
Sai

View Comment
De Bronnetjes
Guest

Hi Sai

Sorry to disturb but I can’t find the words you mentioned ,maybe it’s me ,cause my english is not that well as I am from the netherlands.
Don’t know if this is a good idea but can I send you the HTML from my blogspot so you can have a look at it and maybe fix my problem.
Thanks for your time so far

Regards Markus

View Comment
Divya Sai
Guest

Well your english is perfect….it is just the coding work that makes us crazy sometimes 🙂
Anyways…..it’s Ok..you can send me your blog’s template…i’ll check it and tell you where exactly you have to add the code

View Comment
De Bronnetjes
Guest

Hi Sai

I’ve tried to send my HTML template by your contact form but it said there are to many characters.
So used this comment form but received the error
Your HTML cannot be accepted: PHP, ASP, and other server-side scripting is not allowed.
I hope you can make something out of this link?
http://www.blogger.com/html?blogID=4161779286131422473

View Comment
About Me
Guest

😀 thanks

View Comment
wpDiscuz