Many tutorials have already been published on how to display emoticons in BlogSpot comments but since unique content is what MBT always publishes, today we will learn on how to add a collection of cute Skype emoticons above Blogger comment form. The tutorial is as easy to understand as you can imagine! :>
Follow These Steps:
1 Go to Blogger > Layout > Edit HTML
2 Check the “Expand Widget Templates” box
3 Search for,
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
4 Just below it paste the code below,
<div style=' width: 370px; text-align: left; border: 2px solid #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; '>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxO4Avk0ZN_Qysffrze0eE0mH379weSwOV0rQIoQdkJVhRfOUHSXOEEA5UK_NSqmDKm8IU1skhYpGEhIDkryfDUgJ-bEdaC_3x0FofkrONQaTXzWKOYvJGF6sbKn6x_S_bf3_9V93BDlI/s800/emoticon-0100-smile.gif'/> :a
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-J0uKqDMHAXe45rkx2gYuJS8t5du8_wT4_zHym5mbU867czz2UikCAh7PmLZ7E9qngUyMcHIYnbNYKrkzK_ihrdrrAz4TOjr9MszlZ349O06A14PB4jor7WRQ2E0HIrtqBvC3rRXkT0/s800/emoticon-0101-sadsmile.gif'/> :b
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkyNoRVRrEoHt9u8kthpWcVIuEop5nFgFUIoGd-8qXU7UWnDbsNIwL5NfZVwZnrjAU-oWnZgJeXcVWsijjgJi9DjD6xVdKN0wv15WsQNDFQKauOT38CNLBPWeEAXFRy4UJgZrxIzJM4GU/s800/emoticon-0102-bigsmile.gif'/> :c
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgguQli0VIjjsk18VtPnQ_5it66wUr4gByWhVNNWqM0HOAHX5BIgRTuy2HnM_Qi_wSz_89VtWu-y-v50PEGCLAiSbRDXar4072O8wJoTy7nOKHYsuc_lGyh83L7av_o_fVUHsz_OgbGi8Q/s800/emoticon-0105-wink.gif'/> :d
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSktrnwyO2k2_cqmMBlKABMKZrIEIXQLEmeoJQrgyrYIUlwfFhioyZGMBSeKUydePaXBatwdF2edy1VmrE6oIjcqI91isO1toGl7iUFuXa6AOCu5an3NcFsTKOve0592PYN7TrcILSpC0/s800/emoticon-0104-surprised.gif'/> :e
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbwjZ-vuxYwYlBT1PSWjiWGZnaHDfU5ZND2pbuO2sWI3ilRsQzRsvYV74Oz-o7mJueKrOa-MjBPTWKd2ZmchkV496O-WqFaWsELjaBMRPfifQtOZSSMg7QZw1fWm-BqVkeSPX0z0HrzVE/s800/emoticon-0106-crying.gif'/> :f
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOH-9xLHvD-fvg5949s3DwwUZh6hDRwtNjfZ0ZQsHnU52M7l_IRi8oyuDJdeh9peP9GtZh31w0Goj-VklYF5b3etMzgXoUWjgqgV8o1WMB1BXsDl7UrL2YAIie7UT79ci1FVipLp1AAWs/s800/emoticon-0109-kiss.gif'/> :g
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifhPhtjj439HO_P3UAyaQGNe6AqTP3BcqkGz5npobAwyTcAzdN5n5Q_OwN_hRC_mgXrvTZ6Ig2b4eo1Vi9dkUgza_OQQ_GHgQj2VjgZLHWAmQwGjoSgk3vRQMqAKFs3ItKxdj9dL8y51o/s800/emoticon-0111-blush.gif'/> :h
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrVpizm8o9HcfBWZ9gCSXALLOIZYLTx3Zkgy3Z9hyphenhyphenTpYp0oh5odgduGvHJdqhWXevP1wKNv66OOK7rdk0BPC1g3bQiACLC_R2GWMXtFBFop1eOlfmUEqZyCSaatGTxFaw6TwYz4NAQvyw/s800/emoticon-0110-tongueout.gif'/> :i
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_zztZy_abWw-j9qybaL6ozVe-UcRhLGRjqFEA6oRc4FY8kZgNgmlifOLopCi3i-SqUSNfZHAw6CG22__JJy9y_j6ufE1BG-NRyCInNn2sImBu40_o0gzF9XHAMAgzxA11ZqqbbeRLhAI/s800/emoticon-0126-nerd.gif'/> :j
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg77GihuGOc6953BMu3wNVLyajxUwFG37KI2wunmMm8XOWz16sEgdBj7vtAaM27MUg63SS6nKpNJUbAjKFQ6Gz3ayRYLCopfbiLyssdwfZ9f19m3b5wmxHp7swsyH-n7bJgK-ety2OIFR4/s800/emoticon-0103-cool.gif'/> :k
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ayMD-z0-v8ZzRcWTg-MnTuDVDpfdiIRUT60GgYuUZo98mcxwRic4zGFA9q6ErwQmJ6HcqGgCJb6UtZRJCap-3r42mB14uTZrObAOkfyWRB8LJAWB-l1sXRyiJaxpsuASRYmfe0iAmfU/s800/emoticon-0130-devil.gif'/> :l
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuDdd-vHMc4x58CfBiC3uYxry_S4wopdYf8UOHU3hv63I0BQWIYbKpTGuK0NLRbQeIqF9BnbbkMBCkL8pd4_4QeAU2WHfYknQXiaBWvmDBY3e3mgDLfgpSLcH0qwN7SPtmgq_0AZtoew/s800/emoticon-0133-wait.gif'/> :m
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivax7kHU_34TSFbw8Mo_73uUtxThGqNOi5VJ5MqS_4qYfBlxekQ67mzOVwbwI8FbKF2_vaam4Pzm86Z7imx0nrPR4S88t5aG7mUggq1avOAVYHSX8PZ9K7MB6FJkO-EO3eaDhxhCXbkW8/s800/emoticon-0137-clapping.gif'/> :n
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-sPQHJ2y28bE_0SBNM63TgY1TrzexiCGmwlINHUKiJ-TYW5uPtnepN9cMCtITtjZo-wca8ke_1vL91-XIduQ8jvEp0yQh3yjzJDQI99wO_ZRQmyTbcijnQNf1zaNL3Te1mM7qin4Kjg/s800/emoticon-0136-giggle.gif'/> :o
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYASnUfLBZNNtogG121d9Q4B2zzQUUSTJp2t9o4fCbACcdRI2L1uX9bYN0dCGjKS4wHZot4fOrZ3TLPK293nPjfriKPHqkpO-NjVe7xRnfJ9q1rXhXnH5HkcOlx1fWLfFUKyotgmF0nU/s800/emoticon-0141-whew.gif'/> :p
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-rF7V-rBWrbeBkELyrgerUde8S54JLSqfW4WE1kenTR7WEOmd7nulbfOz6yeILklkgdMNjNJcUgQ5qPHrb1AGPdKNY7FcGGdfDjiEiF33I76_8axYAeyh3LWGuIQGz5zEomx5alloZzc/s800/emoticon-0148-yes.gif'/> :q
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8L8YRRGPzt4xeuleRwQkkhoG8U9TqbD1Zs2ga3F5nPxKKOvmPN6ONn8omKSAtM9sKdVbRH_Yi86aypNldO19so5MOMQrGxbkBG840gk98V0hbblxRosvkUkB2xg8H1VtGPEC1s5YTamU/s800/emoticon-0149-no.gif'/> :r
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGSt7dP6CF2h1DNN9RSMHihfWu0v3cstfoC2IEC4jc8zbAhyOGdTfegUX4xkbcedAKYe3bPLkocDh0oXBueQTanBzZO1WScLIqGYBG-4-cJQd01GSwuzHZ-fzGuFtYpfEBSP_oFlfKdI/s800/emoticon-0178-rock.gif'/> :s
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdX8D6miGz1lY2Hdlpwi9MMu7kwvMkF5HoN_XK6bNy573sEGfMI0TbCdQk4uXb8ghToxNaPwFh4xuAZTLNxTVzUTJvjMxK_IXacY0qfChuiRvcm42qkWvMXGsEWIJ6QITf8UP_8p5CVM/s800/emoticon-0155-flower.gif'/> :t
</div>
Save your template and view your blog to see a rectangular block of emoticons as shown below,
 |
POST A COMMENT |
Note:- To change the appearance of the rectangular block simply edit the code in bolded green colour
5.. Now find </body> and paste the code below just above </body>
Note:- You can also try adding the code below just above </head> instead.
<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'Author-comment-body' , 'comment-body') {
_str = b.item(i).innerHTML.replace(/:j/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_zztZy_abWw-j9qybaL6ozVe-UcRhLGRjqFEA6oRc4FY8kZgNgmlifOLopCi3i-SqUSNfZHAw6CG22__JJy9y_j6ufE1BG-NRyCInNn2sImBu40_o0gzF9XHAMAgzxA11ZqqbbeRLhAI/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg77GihuGOc6953BMu3wNVLyajxUwFG37KI2wunmMm8XOWz16sEgdBj7vtAaM27MUg63SS6nKpNJUbAjKFQ6Gz3ayRYLCopfbiLyssdwfZ9f19m3b5wmxHp7swsyH-n7bJgK-ety2OIFR4/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ayMD-z0-v8ZzRcWTg-MnTuDVDpfdiIRUT60GgYuUZo98mcxwRic4zGFA9q6ErwQmJ6HcqGgCJb6UtZRJCap-3r42mB14uTZrObAOkfyWRB8LJAWB-l1sXRyiJaxpsuASRYmfe0iAmfU/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuDdd-vHMc4x58CfBiC3uYxry_S4wopdYf8UOHU3hv63I0BQWIYbKpTGuK0NLRbQeIqF9BnbbkMBCkL8pd4_4QeAU2WHfYknQXiaBWvmDBY3e3mgDLfgpSLcH0qwN7SPtmgq_0AZtoew/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivax7kHU_34TSFbw8Mo_73uUtxThGqNOi5VJ5MqS_4qYfBlxekQ67mzOVwbwI8FbKF2_vaam4Pzm86Z7imx0nrPR4S88t5aG7mUggq1avOAVYHSX8PZ9K7MB6FJkO-EO3eaDhxhCXbkW8/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-sPQHJ2y28bE_0SBNM63TgY1TrzexiCGmwlINHUKiJ-TYW5uPtnepN9cMCtITtjZo-wca8ke_1vL91-XIduQ8jvEp0yQh3yjzJDQI99wO_ZRQmyTbcijnQNf1zaNL3Te1mM7qin4Kjg/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYASnUfLBZNNtogG121d9Q4B2zzQUUSTJp2t9o4fCbACcdRI2L1uX9bYN0dCGjKS4wHZot4fOrZ3TLPK293nPjfriKPHqkpO-NjVe7xRnfJ9q1rXhXnH5HkcOlx1fWLfFUKyotgmF0nU/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
_str = _str.replace(/:q/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-rF7V-rBWrbeBkELyrgerUde8S54JLSqfW4WE1kenTR7WEOmd7nulbfOz6yeILklkgdMNjNJcUgQ5qPHrb1AGPdKNY7FcGGdfDjiEiF33I76_8axYAeyh3LWGuIQGz5zEomx5alloZzc/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>");
_str = _str.replace(/:r/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8L8YRRGPzt4xeuleRwQkkhoG8U9TqbD1Zs2ga3F5nPxKKOvmPN6ONn8omKSAtM9sKdVbRH_Yi86aypNldO19so5MOMQrGxbkBG840gk98V0hbblxRosvkUkB2xg8H1VtGPEC1s5YTamU/s800/emoticon-0149-no.gif' alt='' class='smiley'/>");
_str = _str.replace(/:s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdX8D6miGz1lY2Hdlpwi9MMu7kwvMkF5HoN_XK6bNy573sEGfMI0TbCdQk4uXb8ghToxNaPwFh4xuAZTLNxTVzUTJvjMxK_IXacY0qfChuiRvcm42qkWvMXGsEWIJ6QITf8UP_8p5CVM/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>");
_str = _str.replace(/:t/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGSt7dP6CF2h1DNN9RSMHihfWu0v3cstfoC2IEC4jc8zbAhyOGdTfegUX4xkbcedAKYe3bPLkocDh0oXBueQTanBzZO1WScLIqGYBG-4-cJQd01GSwuzHZ-fzGuFtYpfEBSP_oFlfKdI/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");
_str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxO4Avk0ZN_Qysffrze0eE0mH379weSwOV0rQIoQdkJVhRfOUHSXOEEA5UK_NSqmDKm8IU1skhYpGEhIDkryfDUgJ-bEdaC_3x0FofkrONQaTXzWKOYvJGF6sbKn6x_S_bf3_9V93BDlI/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-J0uKqDMHAXe45rkx2gYuJS8t5du8_wT4_zHym5mbU867czz2UikCAh7PmLZ7E9qngUyMcHIYnbNYKrkzK_ihrdrrAz4TOjr9MszlZ349O06A14PB4jor7WRQ2E0HIrtqBvC3rRXkT0/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkyNoRVRrEoHt9u8kthpWcVIuEop5nFgFUIoGd-8qXU7UWnDbsNIwL5NfZVwZnrjAU-oWnZgJeXcVWsijjgJi9DjD6xVdKN0wv15WsQNDFQKauOT38CNLBPWeEAXFRy4UJgZrxIzJM4GU/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgguQli0VIjjsk18VtPnQ_5it66wUr4gByWhVNNWqM0HOAHX5BIgRTuy2HnM_Qi_wSz_89VtWu-y-v50PEGCLAiSbRDXar4072O8wJoTy7nOKHYsuc_lGyh83L7av_o_fVUHsz_OgbGi8Q/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSktrnwyO2k2_cqmMBlKABMKZrIEIXQLEmeoJQrgyrYIUlwfFhioyZGMBSeKUydePaXBatwdF2edy1VmrE6oIjcqI91isO1toGl7iUFuXa6AOCu5an3NcFsTKOve0592PYN7TrcILSpC0/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbwjZ-vuxYwYlBT1PSWjiWGZnaHDfU5ZND2pbuO2sWI3ilRsQzRsvYV74Oz-o7mJueKrOa-MjBPTWKd2ZmchkV496O-WqFaWsELjaBMRPfifQtOZSSMg7QZw1fWm-BqVkeSPX0z0HrzVE/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOH-9xLHvD-fvg5949s3DwwUZh6hDRwtNjfZ0ZQsHnU52M7l_IRi8oyuDJdeh9peP9GtZh31w0Goj-VklYF5b3etMzgXoUWjgqgV8o1WMB1BXsDl7UrL2YAIie7UT79ci1FVipLp1AAWs/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifhPhtjj439HO_P3UAyaQGNe6AqTP3BcqkGz5npobAwyTcAzdN5n5Q_OwN_hRC_mgXrvTZ6Ig2b4eo1Vi9dkUgza_OQQ_GHgQj2VjgZLHWAmQwGjoSgk3vRQMqAKFs3ItKxdj9dL8y51o/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrVpizm8o9HcfBWZ9gCSXALLOIZYLTx3Zkgy3Z9hyphenhyphenTpYp0oh5odgduGvHJdqhWXevP1wKNv66OOK7rdk0BPC1g3bQiACLC_R2GWMXtFBFop1eOlfmUEqZyCSaatGTxFaw6TwYz4NAQvyw/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>")
b.item(i).innerHTML = _str;
}
}
}
//]]>
</script>
6. Save your template and view the beautiful change. And enjoy
The Emoticons Will appear In Both Readers and Author’s Comments!
As you know the yahoo smileys tutorials has one disadvantage and that is that the emoticons appear only in readers comments and can not be displayed in author comments. In order to make the emoticons appear even in Authors comment block then simply replace the code in bolded red colour above (i.e Author-comment-body ) with the CSS class for blog owners customized comments. If you do not know how to do it then simply share your blog URL and I will let you know what code should you paste instead of Author-comment-body
If you find this article useful, please feel free to link to this page from your website or blog.
Posts
0 comments: