Show / Display Skype Emoticons In Blogger Comment Form








skype-in-Blogger 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:

  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/AVvXsEjXv0iFo81HJ-p8QTAYLNeVpD3YsORW1yMLu6VQKvwVG5dw0Aqv6Z2bQfIqOi0_m5C-mj1Vfv5PiYamgmPKcqvC262uLvf_Avw409ixyAQGUWHmm1nU4LEyafcbPDmzTrwkLZpTRW96ZHI/s800/emoticon-0100-smile.gif'/> :a
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QmBV9D2a3zSURTFYJwzvpa4I5p1eLgGCdqsImVFAgrXd5XXa3MvOBsHqcZmxIKdANkZ0m_heH9wIxY28s3BCdoMpSSy40hDqIZhHChoQ8UTL8LXPBYkY02cFFGyH70545QcNl8bBtEA/s800/emoticon-0101-sadsmile.gif'/> :b
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCih_n2x9IioP5iN9nCKL0KrQFAwJ8hNnf8MzwYnghWG_I6fpryKXHlFNiP29Lc4yJ73RpYS4O98Tz6bjXJSmMcbrReCba8fmhHGjfz8yF15OenQsFm-NV_NL1UboAiQ2FMNKNJR-uxHk/s800/emoticon-0102-bigsmile.gif'/> :c
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC7T97f8tvoEllEW9Fm3ZRVeh_ZQIJ0P04Z3MIU9rfAlImjfOBPc1Rj7GrZMRm8yIkIxPzPfgkSatCzdpHPhp3-JZJRE8mEsIa1xmZsURelw4CzRvAvA3ggYD7pRW42RPs3sOXq3Yvm3E/s800/emoticon-0105-wink.gif'/> :d
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYFuHifST0oSOO60ARCf7wYZAdH_ta-5oiW1FrnrR9FnmhxUV44rk3cjvW85IqLnahDr6zLnV0DXBtAJQAOr0-7_eOIMqaDwuF2H1eFMqS6Cup723jnVOy5goIERnrp40MSclzd8g2yN8/s800/emoticon-0104-surprised.gif'/> :e
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIyu81PorTi3Cs9A27HCbsJwLxS9EinyqMjN58A29i332c7i-yWwPZOeckszdXUW2XJ35chZ18QF-6DOqFMmuzi8C44tPlDriJm6AO-PzE5wXJqsKWn7jkP5JSbGxA-YXHFTiyygeEzJ0/s800/emoticon-0106-crying.gif'/> :f
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji_6pAaNy8fkDKuj1_7-z5ORMmGHvtQtMgiABKuLNfKUDNjO6ErJpzK8q_s_DVU_yvy7ia0q3Z_rhJWtoO5KfVJz_Acr4MJ_5X0jY6FDlpRwSRMXsrhFWZuZDmpw1jyLOTk_hlA3N0ao0/s800/emoticon-0109-kiss.gif'/> :g
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTxOOO2G27gSWcR2t2w68589KyQLyXSzrzpXvHE3NNmSQRhlC2wxFYsdmbEojXkgycsLWLhGyeFlzMBIG5jSLPukbY3DjiqbaYB5FE_30LDjh1nChkmQKtVcyYS2EDgegTzIz7RHSTjSQ/s800/emoticon-0111-blush.gif'/> :h
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLi37S1GET4HiXtxLtOFqSdY43hGzT8ish5ZYxuAHujC-8TXkNDWPo45n0s5Hh-tpBTlmXMBjRJu_0ySfP_w4gZ_mAxSHSxtVbDC94sZZWDqbfEM8YPh5_kXgpXC0TZNWHfKJvGs0BTUg/s800/emoticon-0110-tongueout.gif'/> :i
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdA614kvut77H1K1zsCXduHrhjdwKHsVKjbQjItXiWAjAW_eIQJq5_z2Nbv3s_d4l_UdkbPZQ44-KTBwWHNDul9K7_bLAkvKCZL38cPB4vRbloZcXhWgThrzquis3fow11P5ocG9L5Vo8/s800/emoticon-0126-nerd.gif'/> :j
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnnkleHX6LJd0UODeqq2-7O69AhuWCr0XhxjCmrTdy_DXa5XHHRXnIm97SenNRJaMOPJyfOiSIdqZuEMEi9A2Dyl4M3fxmBfgpf5bkYDbFH6Bnz5vNKXxp7b3kbZ8x8AjhH3tOshBNiQI/s800/emoticon-0103-cool.gif'/> :k
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZj1Pw1vytxAXM61WrS9o3PXXT3R1_kZauEOSaFQuF-rfjByFL1Nv5I_mHXUnChUzrgxrL8K8gn6zwprZGYAKUZ_MO0D0I4DtOhgUHN10KN9mDeOcsEXi1vmeFs1qSm9FhK2bpdOWJes/s800/emoticon-0130-devil.gif'/> :l
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqwTQ-BUf2odkCcUa6S5RY_duhl9dadZiw5gbF75L9YNB9t9qcZizfdX3S2dg9Cx3pU7SHKeq8nLi2ZAB48xNgPSVNDc6argyO-oZpz_gGvJkGMZH7etKul3pZGwPoQzkI_t4cYDkd7uQ/s800/emoticon-0133-wait.gif'/> :m
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9sJWu8jwDO2Sw4XILE0A2c96vmRq4FNe2DhjyopqqHqjY2SIAT80rhawXwxaWuea7lA9uASg6A1AITybf9KjarcySP92kB6-3cL03Q0u-o34p_b6TJT34XnGdWaHMOreMaad8kFksF1A/s800/emoticon-0137-clapping.gif'/> :n
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikYIZX1KPQ2wwAR1mfCpRjVrOLMEeTStDO_QOvmfsh5XoBEgOoW-pi6q9qStUAqH5exJJScitqi_xCFOc-1VI7fVTZHJJOaSusvPecuw2VmDjpIsI6YhfePxQNZUcinxTBTuafACDtw1c/s800/emoticon-0136-giggle.gif'/> :o
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFHUO4YMTZnTM4zwc8gnyw5WQLltpso7Uc-yIaHRlxejkasNpXJUAT7cK0AHep5vbiOfaFI-_eXNDDKJXl0toaLM8GSB-6ObXdp_fHReEWPf_cTNSsksEzN-dINwZLmKScv7P1la35wE/s800/emoticon-0141-whew.gif'/> :p
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ErI6i8Y_Yme2XSD9I0BRrCi6MlZfwJeoczV1TLvXuDOro7bXoOQbBN3d9ZC3BpSSnGIZ8se0fMm5zJ5zQ4QhD7NgyIcM1B2HrPanU7immhziWbn4q9vtz_M14z_xkU_1_o9XzTrQLaA/s800/emoticon-0148-yes.gif'/> :q
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcAlFvS3lBqaZKzkDC2a9iLMSrOcv_TrMIapP5KeAGybJUaBHyq8y8Uc9eFvnQw57hlWFwwJOpxpr2eNVLEOEJbomRsxMVmFAZOJppLIhpypcTM-ziiIXoJyllLNBI60wrTCG27l_I34w/s800/emoticon-0149-no.gif'/> :r
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiozUpjojo5tP27qP-q8XVT9RSBxSVI5t5rhcu8OaW7ZfJKT-QVJwo6tvxsd6H6CzkTD6lAlTI_eDBBrkrRdbMaKFBtwVcHVB_BcW69baa0MC9smLmO4cYCcrHeWOs9foq_eNgvJhmU_6A/s800/emoticon-0178-rock.gif'/> :s
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-AOF34UA08Ebrll-WdHRamI97H9ZUgbozF-BZTSle5m6CyvUEy7MARr5KiMIByqwasZpF_t228ZrVFUxRwTpcAi1m2WwMoyftY9NMoIuokI-knkROATrC-JovgseG8bPu-xtX0R8PokI/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/AVvXsEjdA614kvut77H1K1zsCXduHrhjdwKHsVKjbQjItXiWAjAW_eIQJq5_z2Nbv3s_d4l_UdkbPZQ44-KTBwWHNDul9K7_bLAkvKCZL38cPB4vRbloZcXhWgThrzquis3fow11P5ocG9L5Vo8/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnnkleHX6LJd0UODeqq2-7O69AhuWCr0XhxjCmrTdy_DXa5XHHRXnIm97SenNRJaMOPJyfOiSIdqZuEMEi9A2Dyl4M3fxmBfgpf5bkYDbFH6Bnz5vNKXxp7b3kbZ8x8AjhH3tOshBNiQI/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZj1Pw1vytxAXM61WrS9o3PXXT3R1_kZauEOSaFQuF-rfjByFL1Nv5I_mHXUnChUzrgxrL8K8gn6zwprZGYAKUZ_MO0D0I4DtOhgUHN10KN9mDeOcsEXi1vmeFs1qSm9FhK2bpdOWJes/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqwTQ-BUf2odkCcUa6S5RY_duhl9dadZiw5gbF75L9YNB9t9qcZizfdX3S2dg9Cx3pU7SHKeq8nLi2ZAB48xNgPSVNDc6argyO-oZpz_gGvJkGMZH7etKul3pZGwPoQzkI_t4cYDkd7uQ/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9sJWu8jwDO2Sw4XILE0A2c96vmRq4FNe2DhjyopqqHqjY2SIAT80rhawXwxaWuea7lA9uASg6A1AITybf9KjarcySP92kB6-3cL03Q0u-o34p_b6TJT34XnGdWaHMOreMaad8kFksF1A/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikYIZX1KPQ2wwAR1mfCpRjVrOLMEeTStDO_QOvmfsh5XoBEgOoW-pi6q9qStUAqH5exJJScitqi_xCFOc-1VI7fVTZHJJOaSusvPecuw2VmDjpIsI6YhfePxQNZUcinxTBTuafACDtw1c/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFHUO4YMTZnTM4zwc8gnyw5WQLltpso7Uc-yIaHRlxejkasNpXJUAT7cK0AHep5vbiOfaFI-_eXNDDKJXl0toaLM8GSB-6ObXdp_fHReEWPf_cTNSsksEzN-dINwZLmKScv7P1la35wE/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:q/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ErI6i8Y_Yme2XSD9I0BRrCi6MlZfwJeoczV1TLvXuDOro7bXoOQbBN3d9ZC3BpSSnGIZ8se0fMm5zJ5zQ4QhD7NgyIcM1B2HrPanU7immhziWbn4q9vtz_M14z_xkU_1_o9XzTrQLaA/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:r/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcAlFvS3lBqaZKzkDC2a9iLMSrOcv_TrMIapP5KeAGybJUaBHyq8y8Uc9eFvnQw57hlWFwwJOpxpr2eNVLEOEJbomRsxMVmFAZOJppLIhpypcTM-ziiIXoJyllLNBI60wrTCG27l_I34w/s800/emoticon-0149-no.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-AOF34UA08Ebrll-WdHRamI97H9ZUgbozF-BZTSle5m6CyvUEy7MARr5KiMIByqwasZpF_t228ZrVFUxRwTpcAi1m2WwMoyftY9NMoIuokI-knkROATrC-JovgseG8bPu-xtX0R8PokI/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:t/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiozUpjojo5tP27qP-q8XVT9RSBxSVI5t5rhcu8OaW7ZfJKT-QVJwo6tvxsd6H6CzkTD6lAlTI_eDBBrkrRdbMaKFBtwVcHVB_BcW69baa0MC9smLmO4cYCcrHeWOs9foq_eNgvJhmU_6A/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXv0iFo81HJ-p8QTAYLNeVpD3YsORW1yMLu6VQKvwVG5dw0Aqv6Z2bQfIqOi0_m5C-mj1Vfv5PiYamgmPKcqvC262uLvf_Avw409ixyAQGUWHmm1nU4LEyafcbPDmzTrwkLZpTRW96ZHI/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QmBV9D2a3zSURTFYJwzvpa4I5p1eLgGCdqsImVFAgrXd5XXa3MvOBsHqcZmxIKdANkZ0m_heH9wIxY28s3BCdoMpSSy40hDqIZhHChoQ8UTL8LXPBYkY02cFFGyH70545QcNl8bBtEA/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCih_n2x9IioP5iN9nCKL0KrQFAwJ8hNnf8MzwYnghWG_I6fpryKXHlFNiP29Lc4yJ73RpYS4O98Tz6bjXJSmMcbrReCba8fmhHGjfz8yF15OenQsFm-NV_NL1UboAiQ2FMNKNJR-uxHk/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC7T97f8tvoEllEW9Fm3ZRVeh_ZQIJ0P04Z3MIU9rfAlImjfOBPc1Rj7GrZMRm8yIkIxPzPfgkSatCzdpHPhp3-JZJRE8mEsIa1xmZsURelw4CzRvAvA3ggYD7pRW42RPs3sOXq3Yvm3E/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYFuHifST0oSOO60ARCf7wYZAdH_ta-5oiW1FrnrR9FnmhxUV44rk3cjvW85IqLnahDr6zLnV0DXBtAJQAOr0-7_eOIMqaDwuF2H1eFMqS6Cup723jnVOy5goIERnrp40MSclzd8g2yN8/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIyu81PorTi3Cs9A27HCbsJwLxS9EinyqMjN58A29i332c7i-yWwPZOeckszdXUW2XJ35chZ18QF-6DOqFMmuzi8C44tPlDriJm6AO-PzE5wXJqsKWn7jkP5JSbGxA-YXHFTiyygeEzJ0/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji_6pAaNy8fkDKuj1_7-z5ORMmGHvtQtMgiABKuLNfKUDNjO6ErJpzK8q_s_DVU_yvy7ia0q3Z_rhJWtoO5KfVJz_Acr4MJ_5X0jY6FDlpRwSRMXsrhFWZuZDmpw1jyLOTk_hlA3N0ao0/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTxOOO2G27gSWcR2t2w68589KyQLyXSzrzpXvHE3NNmSQRhlC2wxFYsdmbEojXkgycsLWLhGyeFlzMBIG5jSLPukbY3DjiqbaYB5FE_30LDjh1nChkmQKtVcyYS2EDgegTzIz7RHSTjSQ/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLi37S1GET4HiXtxLtOFqSdY43hGzT8ish5ZYxuAHujC-8TXkNDWPo45n0s5Hh-tpBTlmXMBjRJu_0ySfP_w4gZ_mAxSHSxtVbDC94sZZWDqbfEM8YPh5_kXgpXC0TZNWHfKJvGs0BTUg/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>")
                b.item(i).innerHTML = _str;
            }
    }
}
//]]>
</script>


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