Chira Sathi

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! :>

Kindly have a look at the demo first,

Live Demo

Follow These Steps:

Go to Blogger > Layout > Edit HTML
Check the “Expand Widget Templates” box
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/AVvXsEi2Ly-sa1kbrfkcfrBTzfMUghu7of2Vjj3QayNKcSRXPsZeRy0StmKX9S_mCCTTo6v1S_gHI41LCzidYri0emJQC3Y_UmKTIiOyAFQmGYPaqxPYGEu8GdWPZa0IKaP_v4XruBxLLZOUr80/s800/emoticon-0100-smile.gif'/> :a
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx01dZIqH8z0WVXz6B7WlQx8tlSCSJhtR8bmBzqzJ6rySCLmN3m0iKGARDaabDv9BC_4pDlRHLJuXaWazZ4jVD1mtHYlpn9KvHFF5zd1-ENv6LQ-sKV1B3ZIKGrs4hB05EwypcHhMKlsc/s800/emoticon-0101-sadsmile.gif'/> :b
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjZIKxKi8s8MKC_Tq0ZkXv3sxQKgmBTqv9FgvqKjGHbBPzyIC55lA7OP8WZpM-0sJM5UseVxhjb1NePzbINY2E2AoKveO1I4yp7B3uXynd3TRemrcrkWJgArUhEuC0QZFO_oUcydUZ2-U/s800/emoticon-0102-bigsmile.gif'/> :c
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiibr8FsBo25tmksGC7FMsm__DF6WccvmIFgh5e06kkp6sj9Xx9a3X9FXqDv2qIK1U2ADam2Lqs12eIzsvaJh9QqVgEqToJ5oaokIryp37WI9yl7i6oIRPQFCD5ZrHRCoPtlDA5J_35VPw/s800/emoticon-0105-wink.gif'/> :d
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKHuNOeCMfVR3ibvoDJ_wcuVbeAT-MnkdveE_Ek9RZZtKAhL-ciybQMY-KAmxsCfT4gyn6FrtKA9-l2hRlu_sN_iaYQie19kItuktFs-WFsOkWWoy3RTXQi1zBPiRs1Z3ZXCrNdgGQUTg/s800/emoticon-0104-surprised.gif'/> :e
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBUDNv4Yj4ZvpDXXOzpnTFb2QzHMzX_6jlW84w2pxj4ZzG3_EWG_kqb_-F3L5WjzZb8A7-OHmtJoWNZ05dVYGLannea56r4I7YuDiJEBmCWLUs8eJINsgiERCMLlMWKoGnGJuxFne5D2k/s800/emoticon-0106-crying.gif'/> :f
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjHweyXwAo7ZWJ0ybB2MJA_7tQmMs4zDFJg4fshpNa9jDhBLSbn0SQYSAL6ZVz4gQvsUKYOrIvq2iMyzf8Sj7EVmF2wDxW7uE81ZajzfJz4LFmcP8LI-71UzpzRO3Wi0Oro42og8g7ytM/s800/emoticon-0109-kiss.gif'/> :g
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfnVVUhqDyNCWD19RNPhlBp5qkEhnDsTjO2Jkhm8BhuYBCxtkfPqKqoTMEJP68sZ0ERBod_IYekPRrCiQw0t_66cs_7-q7yVumCaSUgrq-2pm_Zzz5wgY7ujDFwdnTjTConiLmldwbLOY/s800/emoticon-0111-blush.gif'/> :h
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif8Vp8kv3eQPtq0LTBrqprsdXsL3NcleGdkTWEmALT10qaASEIVfgcXiNzmSUF3pHoJremExfja_7RnlM_nAL_utqSeR8-hdqRrSFnDAOY67vp8MrI6D4SPo-pRa1uro4O97UjHeGfoJ8/s800/emoticon-0110-tongueout.gif'/> :i
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgblXtmrXS1c1B4jGxW3fMo0yLJb2MKPf04-Yryw6V7ygqJ0LnBfZbzYsTpNP_D_786LGNhZU03BWRzDWzqRgTjGURlIUVpYS3aLe-uwNyfUKfS_xBxlfArzTS8gsj6DZ26FRQ-f9IJA2s/s800/emoticon-0126-nerd.gif'/> :j
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyxaWkPySMtOFcXZOrAwMp5V-2YfFUXWSpk2S0M7aXSQzUIQmUvPYiiF61BKocoN9KysFJ-2-VgZ4liMj-F3IQzmmzbxB2xmWW4ls7Ee7ICXKlxSadjLo6xpfe8GWh9h7zcWtkEQbIjUg/s800/emoticon-0103-cool.gif'/> :k
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBMIXPrT3U0rWVKk8xWES_XOSN11_ScDkgxVya9M8eQlFCmBWASdmJKBVuVMlVIewtpCWhwy1k5jp9SyLNy4GR9W-Mn6Ta5LfDbCY4AIUyVTgsRIA2OfTr6SudCsLcHwQhyphenhyphen_9pr8GYrf0/s800/emoticon-0130-devil.gif'/> :l
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVzjceFbJHxd09hN5eEVqWECHqy2HlI088m0Zu1wa9cl96-ZDGMUtqQb3HEjaaYo45M9YT5mnYMeWZEVqAicBek23w04GRj6hUmoTonPgwMWMhJF1MhSGILrxzw0qjyNQyzYTVcjoN-so/s800/emoticon-0133-wait.gif'/> :m
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2TxI85bJMN1Z9SUaotE9V1g_Vt-Tj6vUQXtFHQxJ5PwCXRhdDT9HEULqHh1K365JwilBGWc0WAcIVChfryMKaiBTTsa72Tfl0RGkwt5j9EpB7BqndW7EMZ3Rkk64WRiUH-iVedIskM6s/s800/emoticon-0137-clapping.gif'/> :n
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitt-qXB7D-1UMojrvGT3RSp4nJDX_W931Whllzxeyep2HLUqo8YKPJsTWOIXSrHJRZqmLo7ZT0fiQrYVXn8RCZs7WHYNPLPREiSfyUe3HApaztgXOZVffbDnvyJ26BbUukA8oQK9ySKlg/s800/emoticon-0136-giggle.gif'/> :o
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV-h08BdOHzoDmv877Wi6cN3OTvD7RGYBYA5yKwSq0Sks6hz2VFtBq-sh0vpLqZrNPJHt5Inc6gGO_Rrzdqpowy6sIx4t3OCciLTQvSzNKf0bBUNaa87cmlETLpIJi03rPAzx43ViWSGs/s800/emoticon-0141-whew.gif'/> :p
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJMXqmq9_hgKuIqwqeROeJLk7JaEtX-AHS_RDN-BCL9VWe_EA4UzKoATq5Vzr0AxL7_hQhdh85RlguQUgCxxlV16Ijy-h_ArlFnDCi8y8-VZDf-D-VlGJIcVeMzP0nmjhThG6Yt0-Cdwo/s800/emoticon-0148-yes.gif'/> :q
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigB8pFsznrGQLGbd6ScWALmvXDo66zwha2F-77W7L71torTcN_5tJiLdxFEvWVx2aGROjCqEGnCqrIu3XPvGgrnDSpAkV-03Eee1ziI3aVRNyq3ILokOAFpUnyfMrW4IB9hlc4fjNFFYI/s800/emoticon-0149-no.gif'/> :r
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinEm8JiFecPjeQuMzN_M1WzC0uo3PsRlZpeL_fqqg-dIrh_lRNTHDt-W_YAyolVxkDz3FzgvJZTX8V1lODfx7WjaBMDhLlFOSKginkWwCcNkpbqf1Uw3HL8j8J69QqZyHRlmc1aN974Gc/s800/emoticon-0178-rock.gif'/> :s
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguxaeWw-GWHZ3tdrGhSvFpzqKt6BNEYrd4oArHDnDnUC3Ao0JKvyM5SsXI_hdmabpQseKlEn7n3WS468ulMHZU3izuk0hLFBI3EL7C2uOxPZMlBcI9_6vwJFYpgO3hrdSQ1MONmavIJ5E/s800/emoticon-0155-flower.gif'/> :t
</div>

Save your template and view your blog to see a rectangular block of emoticons as shown below,
skype-emoticons-above-blogger comment form

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/AVvXsEgblXtmrXS1c1B4jGxW3fMo0yLJb2MKPf04-Yryw6V7ygqJ0LnBfZbzYsTpNP_D_786LGNhZU03BWRzDWzqRgTjGURlIUVpYS3aLe-uwNyfUKfS_xBxlfArzTS8gsj6DZ26FRQ-f9IJA2s/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyxaWkPySMtOFcXZOrAwMp5V-2YfFUXWSpk2S0M7aXSQzUIQmUvPYiiF61BKocoN9KysFJ-2-VgZ4liMj-F3IQzmmzbxB2xmWW4ls7Ee7ICXKlxSadjLo6xpfe8GWh9h7zcWtkEQbIjUg/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBMIXPrT3U0rWVKk8xWES_XOSN11_ScDkgxVya9M8eQlFCmBWASdmJKBVuVMlVIewtpCWhwy1k5jp9SyLNy4GR9W-Mn6Ta5LfDbCY4AIUyVTgsRIA2OfTr6SudCsLcHwQhyphenhyphen_9pr8GYrf0/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVzjceFbJHxd09hN5eEVqWECHqy2HlI088m0Zu1wa9cl96-ZDGMUtqQb3HEjaaYo45M9YT5mnYMeWZEVqAicBek23w04GRj6hUmoTonPgwMWMhJF1MhSGILrxzw0qjyNQyzYTVcjoN-so/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2TxI85bJMN1Z9SUaotE9V1g_Vt-Tj6vUQXtFHQxJ5PwCXRhdDT9HEULqHh1K365JwilBGWc0WAcIVChfryMKaiBTTsa72Tfl0RGkwt5j9EpB7BqndW7EMZ3Rkk64WRiUH-iVedIskM6s/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitt-qXB7D-1UMojrvGT3RSp4nJDX_W931Whllzxeyep2HLUqo8YKPJsTWOIXSrHJRZqmLo7ZT0fiQrYVXn8RCZs7WHYNPLPREiSfyUe3HApaztgXOZVffbDnvyJ26BbUukA8oQK9ySKlg/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV-h08BdOHzoDmv877Wi6cN3OTvD7RGYBYA5yKwSq0Sks6hz2VFtBq-sh0vpLqZrNPJHt5Inc6gGO_Rrzdqpowy6sIx4t3OCciLTQvSzNKf0bBUNaa87cmlETLpIJi03rPAzx43ViWSGs/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:q/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJMXqmq9_hgKuIqwqeROeJLk7JaEtX-AHS_RDN-BCL9VWe_EA4UzKoATq5Vzr0AxL7_hQhdh85RlguQUgCxxlV16Ijy-h_ArlFnDCi8y8-VZDf-D-VlGJIcVeMzP0nmjhThG6Yt0-Cdwo/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:r/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigB8pFsznrGQLGbd6ScWALmvXDo66zwha2F-77W7L71torTcN_5tJiLdxFEvWVx2aGROjCqEGnCqrIu3XPvGgrnDSpAkV-03Eee1ziI3aVRNyq3ILokOAFpUnyfMrW4IB9hlc4fjNFFYI/s800/emoticon-0149-no.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguxaeWw-GWHZ3tdrGhSvFpzqKt6BNEYrd4oArHDnDnUC3Ao0JKvyM5SsXI_hdmabpQseKlEn7n3WS468ulMHZU3izuk0hLFBI3EL7C2uOxPZMlBcI9_6vwJFYpgO3hrdSQ1MONmavIJ5E/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:t/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinEm8JiFecPjeQuMzN_M1WzC0uo3PsRlZpeL_fqqg-dIrh_lRNTHDt-W_YAyolVxkDz3FzgvJZTX8V1lODfx7WjaBMDhLlFOSKginkWwCcNkpbqf1Uw3HL8j8J69QqZyHRlmc1aN974Gc/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Ly-sa1kbrfkcfrBTzfMUghu7of2Vjj3QayNKcSRXPsZeRy0StmKX9S_mCCTTo6v1S_gHI41LCzidYri0emJQC3Y_UmKTIiOyAFQmGYPaqxPYGEu8GdWPZa0IKaP_v4XruBxLLZOUr80/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx01dZIqH8z0WVXz6B7WlQx8tlSCSJhtR8bmBzqzJ6rySCLmN3m0iKGARDaabDv9BC_4pDlRHLJuXaWazZ4jVD1mtHYlpn9KvHFF5zd1-ENv6LQ-sKV1B3ZIKGrs4hB05EwypcHhMKlsc/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjZIKxKi8s8MKC_Tq0ZkXv3sxQKgmBTqv9FgvqKjGHbBPzyIC55lA7OP8WZpM-0sJM5UseVxhjb1NePzbINY2E2AoKveO1I4yp7B3uXynd3TRemrcrkWJgArUhEuC0QZFO_oUcydUZ2-U/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiibr8FsBo25tmksGC7FMsm__DF6WccvmIFgh5e06kkp6sj9Xx9a3X9FXqDv2qIK1U2ADam2Lqs12eIzsvaJh9QqVgEqToJ5oaokIryp37WI9yl7i6oIRPQFCD5ZrHRCoPtlDA5J_35VPw/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKHuNOeCMfVR3ibvoDJ_wcuVbeAT-MnkdveE_Ek9RZZtKAhL-ciybQMY-KAmxsCfT4gyn6FrtKA9-l2hRlu_sN_iaYQie19kItuktFs-WFsOkWWoy3RTXQi1zBPiRs1Z3ZXCrNdgGQUTg/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBUDNv4Yj4ZvpDXXOzpnTFb2QzHMzX_6jlW84w2pxj4ZzG3_EWG_kqb_-F3L5WjzZb8A7-OHmtJoWNZ05dVYGLannea56r4I7YuDiJEBmCWLUs8eJINsgiERCMLlMWKoGnGJuxFne5D2k/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjHweyXwAo7ZWJ0ybB2MJA_7tQmMs4zDFJg4fshpNa9jDhBLSbn0SQYSAL6ZVz4gQvsUKYOrIvq2iMyzf8Sj7EVmF2wDxW7uE81ZajzfJz4LFmcP8LI-71UzpzRO3Wi0Oro42og8g7ytM/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfnVVUhqDyNCWD19RNPhlBp5qkEhnDsTjO2Jkhm8BhuYBCxtkfPqKqoTMEJP68sZ0ERBod_IYekPRrCiQw0t_66cs_7-q7yVumCaSUgrq-2pm_Zzz5wgY7ujDFwdnTjTConiLmldwbLOY/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif8Vp8kv3eQPtq0LTBrqprsdXsL3NcleGdkTWEmALT10qaASEIVfgcXiNzmSUF3pHoJremExfja_7RnlM_nAL_utqSeR8-hdqRrSFnDAOY67vp8MrI6D4SPo-pRa1uro4O97UjHeGfoJ8/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>")
                b.item(i).innerHTML = _str;
            }
    }
}
//]]>
</script>

6. Save your template and view the beautiful change! :D

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

How did you find it?

I made it as simple as it could be and I hope it will add an extra sweet flavor to your blogs. The codes for the emoticons are made easy so that readers could easily use an emoticon of their choice. You can increase the number of emoticons and can also customize the look and feel of the rectangular box of emoticons that will appear above the comment form. I wrote this in hurry so if you have any questions just drop me a hi! :>>

Probably we all love to know how many times a file on our website is downloaded. You can observe that I track all my downloads whether its templates, icons, buttons or any other blogger resource. This helps me know how popular that particular file is. Many questioned us about the script we use to track our files and today we would share every detail on how we actually track downloads on Blogger.

Live Demo

How To Track Downloads in Blogger?

I use Dstats service for tracking number of downloads. The method is simple. There are two steps which are,
Inside your posts simply paste the code below. Replace PASTE-FILE-LINK-HERE with the link of your file you want readers to download. And replace Image URL OF Download Button with the Image Link of your Download button.

<a href="http://dstats.net/download/PASTE-FILE-LINK-HERE"><img src="Image URL OF Download Button" border="0"/></a>
<p>Downloads:<a href='http://dstats.net/download/PASTE-FILE-LINK-HERE'></a>
<script type='text/javascript' src='http://dstats.net/dstatsjs.php?file=PASTE-FILE-LINK-HERE'></script>
<script type='text/javascript'>document.write(dsCounter);</script></p>

Grab these Download Buttons.

You can use the following Download buttons from dryicons Simply right click an image and select “Copy Image Location” and this will give you the Image URL for the button.