Insert Animated Smileys/Emoticons In Your Blogger Comments

As you all know Blogger comments lack some basic functionality like emoticons, and this is a must have functionality which attract visitors and compel them to post comment and use emoticons. So today i will show you in this tutorial how to insert facemood smileys/emoticons in your blogger comment system, so that users can easily use them while posting comments. This tutorial was inspired by blogtariff therefore all credits to owner.

Demo

Click Here for Live Demo

Here we go...

Step 1. First of all backup your template like always (Recommended)

Step 2. Go to Dashboard > Template > Edit HTML > Proceed > Tick Expand Widget Template.

Step 3. Press Ctrl+F (to run search command) and find </body> in your template and paste this code before </body>

<!--PremiumStuffGuru-smileys-->
<script src='http://dl.dropbox.com/u/58752515/javascript/smileys-premium-stuff-guru-blogspot-com.js' type='text/javascript'/>
<!--PremiumStuffGuru-smileys-->

Step 4. Now search <b:loop values='data:post.comments' var='comment'> and just add this piece of code above <b:loop values='data:post.comments' var='comment'> as shown in screenshot.

<div id='smileys'>

Step 5. After you have added above code, just scroll down little bit and you will see </b:loop> and just add </div> after </b:loop> as shown in screenshot.

Step 6.Now search for <data:blogTeamBlogMessage/> and paste below code after it. (you may find this code multiple times, so keep choose the first and if you can't see 'Show Emoticons' link above comments, than try to use another one until you see the result).

<script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons /<a href="http://premium-stuff-guru.blogspot.com">Add Emoticons</div></a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Show Emoticons</div></a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg24gp1EHb-AhKZAOGxk9YUDwTnprrsteGc7J9dQmq68HcWHCcyWOC9k9fQhP1A3BOnW4qXXGbzpJhjqmPISTgNlnJZq432u2hYe02E0cl7EJeVH55P7BQvSIAjATeBpQucOu3cJ-dpokfd/h120/premium-stuff-guru.blogspot.com(3).gif'/>:)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQA3CwO6L2Dxd2OsJG-5AEWB_QOZ0DRnfhqOdpsjSNflBXllDVuVqmZ731z9KjwSTTLrO-mGkPAbxkpNfio9kf2p2eXHBS_D9LoBQxzoYL7RTOHlfByIdqU42mpWmmu7GDK2AFdrX9ubmG/h120/premium-stuff-guru.blogspot.com(8).gif'/>:(
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgclBI8smQpMw34jF_4sDUkSil3NCpL8OJDJxpPD4if_vTHgphyVqbhGPbtfF4Jkg4osvHUlJTE3DiUOj80WB1INOpaF23HwxavofQHpMIQGgRvL2lEbBoQE_AGE4swqtzLFfHvPds1Atqt/h120/premium-stuff-guru.blogspot.com(16).gif'/>:d
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBHOKdSHvELscTHIDvNLK1lYhrzyOswK5LC8IDPaHMMOjfvOZLsuMH0dKQ8w4HXfZKMr0rg-JTXdx27N-Rq_w8sx2rInW5U9LOceD-xt6T2AHzsB9e4gbvaje8FcUkp9lSwl5QvfL8TLv5/h120/premium-stuff-guru.blogspot.com(14).gif'/>:p
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Glk1RdDAIbWBaJ8taeHyO0gY5jQ8-b4nVyCTT1AkHSdUn2Z_JcD8YA0rl0UJIxqXz0-T3Q4ilGE6apfj2rLkOQ3rVMoyLl1by17F_kX1z9_GZZEBwNEg3qitIdWKAXD98vqBRVhT82_k/h120/premium-stuff-guru.blogspot.com(4).gif'/>;)
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn8RnWuUpKMhJoQ_8tBXYXWtECql1i084Ts91aqAlPq8wkrFv1u8U-C1G-rgnnEWPsSsF-SO8cEcL3t0VxSZr3EDmJsT48FTgUOaowpbIyUZYy8wd0hIxNClrwIV6Jg9FgWD-jPYDgv14X/h120/premium-stuff-guru.blogspot.com+%282%29.gif'/>:thumbup
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNNSbQ_b7FRbBEppdTAcR5Avkl0yi9bIt0gw4AedB0eSMe24L9eShEAwTAa1_OE38mRb2PYW3ql22LfqWB308MpMC0rWzhMpQfsakFFtP7ussD5A1m9w27rF3DzjRmBbactjToLgkaaOKT/h120/premium-stuff-guru.blogspot.com(19).gif'/>:clapping
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1QPplQKYEnOFgVTtymcAUhwECEWdAmXPniBZeV3k1-lLLjcABenVJUmxCmNIa5EzazYQxrVQhLb6sB09euAnvxXbNaXsyHtr8hscOZThcflyLRpk38ku2A4n2W3AlxdJL-3dBbpW_am7u/h120/premium-stuff-guru.blogspot.com(6).gif'/>:kiss
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisUQzweCaHTZcpxKXnt5cGRqTnpaiGIMJjNTHTmwa32oBk0_1q5xUqajjFIuEpOJkQtu-ek4U0qEAfqRYHvnQTANdyiBUynO8XMIgNQSgJ4WVHGW3i5AUA2RG3juiQN3VB5SOUA5yW66nM/h120/premium-stuff-guru.blogspot.com(18).gif'/>:a
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6XhNv6Bu76MinEynokZvpLwo6odg5W781YiXaG2FM-zHyT9krHL6P87KlnM9NCKJE34F9XnVcsC6f0Db11h4qOX6f0YS4mp0Wi3P9DEARg6XqRmAOYutmMEMkePkC8Ugo928V0xk2yE5u/h120/premium-stuff-guru.blogspot.com(1).gif'/>:b
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxV8CwyyGaegCaEL-T4vtFOS6toK5k9v5-Zmfe_tfRnFLxt63GFA2aXU0QChMw0r1om3XWst_wNVNv955_hmV7swYgsAw3t2bMRca84TsD5ecdhyphenhyphencRxDlPYH6m8kNFetgs2SKbPoflctKX/h120/premium-stuff-guru.blogspot.com(5).gif'/>:c
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUhN-GbpOpk3sNh6hJpNholyBHXRIEh4gqNsHz5l3_aeQXE8oi7G5MCp6IblxU_jTBknn_STGhA_34K-sL7h8SS5zoekwrHed-2TrXhN1o8WJT5Wyg3_XYwiqXZr0yVEO8z4tuSDCE4cuA/h120/premium-stuff-guru.blogspot.com(9).gif'/>:e
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWwbLI6YNGCtyzV7HJ2wYxxgxmBOT8I_9zsje85wXzntx2OkqcF6VmFSP8BANSTkjIXBmPTAXQvKoxQ6rdF3nG7GW6NhH8fNqu_C-20VqlogjTZo5axj9Nnc34hN5n_0NMhAcOGC-7EC5m/h120/premium-stuff-guru.blogspot.com(10).gif'/>:f
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLqj-nTf4z2m6X1vxM9O5rwxe6S4brJii5yoD0JF3LkCARurKE8DlQDcYRm7qzWNAAtDkDQr_rpcvwqHJ2iEAOT_ApvAUZ0HUfuSAjDVK-QMQiPKlOQOAdIHxjy29X25kCYnkYgvcWA8xj/h120/premium-stuff-guru.blogspot.com(11).gif'/>:g
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs2nie3DW2kRmkk-a84TwCb_XTyEOodO9UQ3n0GW_-12Kno1B9LMeBzdwpqxc0d7GKjv5dL3B5gO8pQj4yX1Htv0vLzkDf4X7yx8xeh-Aq-0dycvDi07Xg4AOAm4f21Js6q9DaBXEqGUGz/h120/premium-stuff-guru.blogspot.com(13).gif'/>:h
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvyQTpmwXUHJf9kEqzLQk3IG856fvesalbta0sbJW3J_7B65Eu2SusNKsHqn_AIr4VgXVzXMrDBd1JytUHCi9riVX4Bre80MO6_FaprE_yGIw1zvBi8xAk-ByeQcekcRB9UpkCuov_vm16/h120/premium-stuff-guru.blogspot.com(12).gif'/>:i
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs2nie3DW2kRmkk-a84TwCb_XTyEOodO9UQ3n0GW_-12Kno1B9LMeBzdwpqxc0d7GKjv5dL3B5gO8pQj4yX1Htv0vLzkDf4X7yx8xeh-Aq-0dycvDi07Xg4AOAm4f21Js6q9DaBXEqGUGz/h120/premium-stuff-guru.blogspot.com(13).gif'/>:j
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs3Uvl6hOR3tNGccz2aFRjW01EeRhbEB7uE0_ZKhKZYfB96qw73LMUzgo2th-RmuCDT84GZd0qefpiMQO60tdPt5wA8z2Oo_dDGuGSH-y-myv0q317vH2tD3_n95-yXM1HD1xg-PTxxSh7/h120/premium-stuff-guru.blogspot.com(15).gif'/>:k
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrcjvQlv86zGkULtIT_joSlvzq7gaLIHQj7g68deEWrZS9mcP4ZfuVu6gbe5jUC1l1MNLBhK-ZbLjltbGX2HoPayst_j0UheZ4hR8DyUGlpCXliPUi_HrThefmC8BBP0iFBNc7lsOvYwPj/h120/premium-stuff-guru.blogspot.com(17).gif'/>:l
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtvjDYV6B7VgIPiiYM6YKIw8-4IaImJmJenV_XMAg1KNzQE4Bcz5O7BcACk8AvB-p3LKa1iH7A23LMxobkXwK4K4VPUVcBhK6PumaehSeKbpAg0SYEcLrHLxH3kFbah0ooxNpkterdkp6V/h120/premium-stuff-guru.blogspot.com(20).gif'/>:m
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn8RnWuUpKMhJoQ_8tBXYXWtECql1i084Ts91aqAlPq8wkrFv1u8U-C1G-rgnnEWPsSsF-SO8cEcL3t0VxSZr3EDmJsT48FTgUOaowpbIyUZYy8wd0hIxNClrwIV6Jg9FgWD-jPYDgv14X/h120/premium-stuff-guru.blogspot.com+%282%29.gif'/></div></a></span>
</div>

Step 7. Finally find ]]></b:skin> and paste this code before ]]></b:skin>

.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;width:400px;}
.emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}

Step 8. Save your Template, That's it!

Have to say?

Don't forget to leave your comments, as it means a lot for me.

Premium Stuff Guru

Sunday, October 14, 2012