2008-11-22

Embedded Blogger Smileys


Smiley was first created by Harvey Bell. He was a freelance artist and his creation adds a more human element in today's blogging world. This simple script lets you add facial expressions along with your comment as Blogger itself doesn’t give us a way of doing such things. You can now add some Smileys to your comment form.

Before I go into more detail, in order to make smileys work you must have a new comment form installed. If you don't have one yet, please read this article.

Go back to Layout> Edit Html. Look for Expand Widget Templates box and check the box.

Search for the following lines:-
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<h3><a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a></h3>
</b:if>
</b:if>
</p>
</b:if>


Remove and replace with these lines:-
<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
</b:if>
<b:if cond='data:post.embedCommentForm'>
<h3>Please don&#39;t spam me!</h3>
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 400; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #cccccc; height:80'>
<b>
<table><tr>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :)) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;)) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :(( </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :) </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :( </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X </td></tr>
<tr>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =(( </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/ </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-* </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :| </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-} </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)] </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-( </td>
<td><img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L </td>
</tr></table>
</b>
</div>
<b:include data='post' name='comment-form'/>
<b:else/>

</b:if>
</p>
</b:if>


Move down to the bottom of your template, search for the closing body tag </body>. Then, place this code immediately right before it.
<script type='text/javascript'>
a = document.getElementsByTagName(&#39;LABEL&#39;); if(a) { for(i=0; i &lt; a.length; i++) {
_str = a.item(i).innerHTML.replace(/:\)\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>&quot;); _str = _str.replace(/:d/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>&quot;);
_str = _str.replace(/\;\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>&quot;);
_str = _str.replace(/:p/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>&quot;); _str = _str.replace(/:\(\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>&quot;); _str = _str.replace(/:\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>&quot;);
_str = _str.replace(/:\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>&quot;);
_str = _str.replace(/:\|/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>&quot;);
_str = _str.replace(/\=\)\)/ig,&quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>&quot;)
a.item(i).innerHTML = _str; } } a = document.getElementById(&#39;comments&#39;); if(a) { b =
a.getElementsByTagName(&quot;DD&quot;); for(i=0; i &lt; b.length; i++) { if
(b.item(i).getAttribute(&#39;CLASS&#39;) == &#39;comment-body&#39;) { _str =
b.item(i).innerHTML.replace(/:\)\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>&quot;); _str = _str.replace(/:\)\]/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>&quot;); _str = _str.replace(/;\)\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>&quot;); _str = _str.replace(/;\;\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>&quot;);
_str = _str.replace(/:d/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>&quot;);
_str = _str.replace(/\;\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>&quot;);
_str = _str.replace(/:p/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>&quot;); _str = _str.replace(/:\(\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>&quot;); _str = _str.replace(/:\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>&quot;);
_str = _str.replace(/:\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>&quot;);
_str = _str.replace(/:x/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>&quot;);
_str = _str.replace(/=\(\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>&quot;); _str = _str.replace(/:\-\o/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>&quot;); _str = _str.replace(/:-\//gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>&quot;);
_str = _str.replace(/:-\*/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>&quot;); _str = _str.replace(/:\|/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>&quot;); _str = _str.replace(/8-\}/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>&quot;); _str = _str.replace(/~x\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>&quot;); _str = _str.replace(/:-t/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>&quot;); _str = _str.replace(/b-\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>&quot;); _str = _str.replace(/:-\L/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>&quot;); _str = _str.replace(/x\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>&quot;); _str = _str.replace(/\=\)\)/ig,&quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>&quot;)
b.item(i).innerHTML = _str; } } } a = document.getElementById(&#39;comments&#39;); if(a) { c =
a.getElementsByTagName(&quot;DD&quot;); for(i=0; i &lt; c.length; i++) { if
(c.item(i).getAttribute(&#39;CLASS&#39;) == &#39;owner-Body&#39;) { _str =
c.item(i).innerHTML.replace(/:\)\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>&quot;); _str = _str.replace(/:\)\]/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>&quot;); _str = _str.replace(/;\)\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>&quot;); _str = _str.replace(/;\;\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>&quot;);
_str = _str.replace(/:d/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>&quot;);
_str = _str.replace(/\;\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>&quot;);
_str = _str.replace(/:p/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>&quot;); _str = _str.replace(/:\(\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>&quot;); _str = _str.replace(/:\)/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>&quot;);
_str = _str.replace(/:\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>&quot;);
_str = _str.replace(/:x/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>&quot;);
_str = _str.replace(/=\(\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>&quot;); _str = _str.replace(/:\-\o/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>&quot;); _str = _str.replace(/:-\//gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>&quot;);
_str = _str.replace(/:-\*/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>&quot;); _str = _str.replace(/:\|/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>&quot;); _str = _str.replace(/8-\}/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>&quot;); _str = _str.replace(/~x\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>&quot;); _str = _str.replace(/:-t/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>&quot;); _str = _str.replace(/b-\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>&quot;); _str = _str.replace(/:-\L/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>&quot;); _str = _str.replace(/x\(/gi, &quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>&quot;); _str = _str.replace(/\=\)\)/ig,&quot;<img alt='' class='smiley' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>&quot;)
c.item(i).innerHTML = _str; } } }
</script>



And you're done! You can now express your emotions and let all your feelings out :wink: Please spread the word if you value what you find in this site. Let me know if you find any errors and do leave some comments.
Note - This tutorial is meant to explain how to add Smileys to your embedded comment form only.

5 comments:

Manchester United said...

:))

Boffill said...

I had a trouble installing this. I got an error message saying "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag". Can you help me out with this one?

Is said...

Leave a post here with your link :cool:

Is said...

Dear Visitors,

The above JS script is no longer working. You may need to host the said script to other free host. As you know, starting this year, Google has ceased the operation of the Google Page Creator product.Visit www.iskandar30.co.cc/smileysver1.js to get the script. :cheesy:

Barbara Fournival said...

:D

Post a Comment

1. Comments posted must be accompanied by names or pseudonyms.
2. Anonymous posting and those containing profanities will be rejected.
3. Comments are moderated due to spam problems. I have to approve the comment before it will show up.

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L