Add Facemoods Emoticons To Your Blogger Comments

Here are some amazingly funny emoticons compatible with your Blogger comments - also with threaded commenting system! If you want to know how to add them, just follow the next steps:

DEMO

Step 1.

Go to Dashboard - Template - Edit HTML - Proceed

...and select Expand Widget Template (don't forget to make a backup)

Step 2. Search (using CTRL + F) for this code:

• For previous commenting system: 

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

• For threaded comments:

<div class='post-footer-line post-footer-line-3'>

Step 3. Add the below code just above it

(for threaded comments, add the code after):

<b:if cond='data:blog.pageType == "item"'>
<div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-1BfgBR5j8q9uolwkATupK44Aw1pvM7TL34qE5BvFp9gI69DCbg0Zqcc0k50OhAMCN-argSmPjCZdmBgeIaoG6gdvGGUT6l0hMwgejvy6TUZ6UC0AjBWrGAdMUoqyoDSmz8vX5t74-OLC/s1600/helplogger.blogspot.com(1).gif'/> :a
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBDNEsDGy5tbrG3JxUFgFR4YZ8gNz6l9QRjnZCnSUokDAa5OOYFM7fxyw_EtDI-IT5xeJ7k_PDOdamxXy5dCoi3ewUiPz71IHOfSU43ZGPvpYW82QjgvSJEajAscnFwdF_xIbEetj1NMy/s1600/helplogger.blogspot.com+(2).gif'/> :b
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO9Z8PIAZv2HwPOaLID2_k2ARSNUrhpKq2AGdtsa1O6iEs6bCoIkCk7NVAW0Z2Hc8z3_fRodsqgCBYG5Y6zDQdCEx7JoC9cyvDpwLYvp5ltICk8GSVPYN6qaVSVMusMOgADJMTdf0cts-N/s1600/helplogger.blogspot.com(3).gif'/> :c
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9l6fSiuVKp17Edto9YrYCfcgHUP7rLX9HIrTA-PEA7qTuDIBU4cZ1-KpsB0qRdALDMJSfICDVzVbdCn2dDg9_kcdiRRVg9k996JLTcvuTHJNdqibB0IDzLtEub0w-wAJOt_rJD1m6MrB4/s1600/helplogger.blogspot.com(4).gif'/> :d
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2Su7R17r1c7NIWkanqZLyBcNPesddtmDTn6NiAoJZbUh0irFhKoVFWpUo-1KKeo8Xpqmr02lf1onHq5sHmIaRi4ybrN9FwnG1FnVD2u1CvlUnR4pdsKgFiUBVUnQLZI-fSCVfHgvb-4m/s1600/helplogger.blogspot.com(5).gif'/> :e
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABmyJthRduqYDuxC-ecN2e-8MJdUjNwFNXLxtfIvNXwdcB9UVxS3gOkDQgdot466Ou1Kspje9YLuNOo6UrpxUj-rIb5GONUjrVdUFGqJ0AtVbJjKY5KxZdA_kXdb3jcAroer6qBoYc25b/s1600/helplogger.blogspot.com(6).gif'/> :f
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfHkcoe7Fobf_0nAr-Ho8fzPVU22qy3GXS6lHyzqJsB-Aeo6FXzrZfC2JhIuFESvo32sB09x2BlCVa0ieNGEt0XVaLSSzRstGyiLGxHU6wHQQ-wSkAHjz0aQUyV_77AHkk1yTWAxDLbt3K/s1600/helplogger.blogspot.com(7).gif'/> :g
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipZX3kTdAIGYr2sDMF6m6oOOx_PcOC_3Q8O3tIS1xAXV27CvamuSozn0cb-D-C660jZCXXL7F_ZqCpfcw27bab4_YdAxmNL_WZkmEPGF76xfGlYqITiIZ5jt7GVZQ5UYTVU7ZjNcb1hR9t/s1600/helplogger.blogspot.com(8).gif'/> :h
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUbC40JZ9YEkfFcoJGC97g7kXkA-hOfIMNOdsLrP3DXfh72BINptWC2rarJy0E7coOAdlkrjPxv5WyE6wOdZKIwuVO0YvLZdNQFoPJEMlsmO_Ng5GTG2qK9-JXQnVIhnpwp8SM79999zM/s1600/helplogger.blogspot.com(9).gif'/> :i
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDT2jeArMxLYfanWO5-mz94iHwXQ-c5zB74smeMlcCFiNh-pF6cWpOOFUwkJGh3qwqW-abOaRAfZROnUiHpnmuQf39eYGxT1kKPSqHFuLo8CCuhGrWYg3NkQH8Oiei19cSPHpFB9xGQUcp/s1600/helplogger.blogspot.com(10).gif'/> :j
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvviijLITqHjiJo8ppNVY_MOlKhlH2De-0afxDpMJoQpkEDq6gvg-F2FyRbodcyHdfALoOdtVfP2IlQM87U59NdSamha6QuuwU_iNsMQpL5iTill1qeIsGy-xwCF2A3oFKooo_Bis-NOW5/s1600/helplogger.blogspot.com(11).gif'/> :k
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBT7P6n3PoEZk4POoroOooOTlpu9Y_gBi48O_o05pxUem6XxfcgOjaA6yNhwuetCILF5DC6qwBMdKx5tuB2WZ2Y3P_igwYwRANDmSthDU7kApJiM4PhyDbUAr4eGeA8O-Elb3RC6e8dFZr/s1600/helplogger.blogspot.com(12).gif'/> :l
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja7aQkdbpAWaanHaIyoNeJLL1E0jtMhZMbIt2POqal5org-Ah7k35Ycof9G0MSkI6Q-U8UMLOXly4aPvPF2owJwYeL88WJ3cGW5OnjcHy6noiP5p7jdHoS9OVmlspaq5C5lCRknz3SF61e/s1600/helplogger.blogspot.com(13).gif'/> :m
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUvMfe9kCHvU-QEx8VumAuQ6V4ngfcMude-tnDskYbZIjQwycAYz9iXFrRwgyZephVTe4kk2tEtdl4X8vS3jPmVIrLsADkHghf84lSkyuTrAvkGEQcR3H-qiJbu6NQeFPumMQEZM-ZbOCO/s1600/helplogger.blogspot.com(15).gif'/> :n
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKeym6DlmxxC1evUfwgPHIq9AvnJLHhYPfEySF_PlgYUnV7jRbmtS_Y2_7vLE2J3OdQbUYBNzD_LWwlyJNsSHofgIbjQW45I-cRfaOYUXb3DuNcikNGwPtSp45FIP-stqbGOeCkdxGuQSb/s1600/helplogger.blogspot.com(16).gif'/> :o
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_7tTQXQCCXCRo3mrXEwxU8fdedlzEz0f1WCOBPFm_wmaIOAjQWQ38zeSvErTvWnWCa2ZFa_EkrI1cmNnTdvJgL3SgqrhKKs6Ic4LG2Ug3Ce8dLdLx9Wxl3zPVZQSMsNr9_5raglX0xU_/s1600/helplogger.blogspot.com(14).gif'/> :p
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKEFb7g9gZJ84NBolBxJDRVPPfv_mCY1hlsK7U-EOKINRtOtFx7-JvqqgG6AXUKqY9Dvu430m-cyuVh7EcbAMmmcvcwI0ftDFKF8UivW5Au4cpVloA64sy1-D7vDiS76giAYZaC6grj2rj/s1600/helplogger.blogspot.com(17).gif'/> :q
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4bww5oGU8z_M839HCSoQ1xsJHtTdQ6r54xAEfSW33aqxPJERZ5DF9HPhzZYicmNS-skVhPcZKrMqX2z1VZLwY7ZCoJU-ClJDmPUAg611QuT2Uefcxj_Vv1ZrqeQdkoPuVRzHJuPMHzoRk/s1600/helplogger.blogspot.com(18).gif'/> :r
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixg1zzuoV_gIsUu4_pyBIk1gvMPIvcNaTS8KX-Eq4mH4PIQkhCrmOt87z4IkMcXMWdtYEOOjV0bk9LjC_uuOx8tDIhC-_ZXiR9SjFHXQcM_lwFFBpN8r3DRSt37nLwjdV6Erw5h4dmOxp/s1600/helplogger.blogspot.com(19).gif'/> :s
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEc1e-nm3vMEOXrkq97w8423nNePuPA6m6mLxhjvL7GFOoIfqTg0tX3QQaQwBQhp29QE5A-fb_3XNmsteQF4o6y-HOWLfqEfdQmZQ7k-B1D_cSXj0cOAjvqHAwtPROqqoQkGy2SzGQuTaN/s1600/helplogger.blogspot.com(20).gif'/> :t   <a href='http://helplogger.blogspot.com/2012/05/add-facemoods-emoticons-to-your-blogger.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a>
</div></b:if>

Step 4. Now search for this piece of code:

</body>

Step 5. And add the following code immediately above it:

• For previous commenting system:

<script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons.js"/>

• For threaded comments: 

<script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons threaded.js"/>

Step 6. Save the Template. Now, enjoy your comments!

How to Change Default Anonymous Avatar in Blogger Comments

In the last tutorial, I wrote about how you can change avatars size in blogger comments and in this simple tutorial, I will show you how to change or customize default avatar of anonymous commenters or Blogger users with no picture added on their profiles. After Blogger announced new feature of threaded comment, we can still customize it by adding a jQuery plugin to our template and replacing the default anonymous avatar found at this

URL http://img1.blogblog.com/img/anon36.png
and the one for blogger users http://img2.blogblog.com/img/b36-rounded.png

...with our own.

Step 1.

Go to Dashboard - Template - click on the Edit HTML button and then Proceed

...then select Expand Widget Template (don't forget to make a backup)

Step 2. Find (CTRL + F) this code in your template:

</body>

Step 3. Add the following code just above it:

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuJtBJW7G0oBFrskZ1b1J1SJT_3vP7hBw1kZKcbVOb66Ec4SWMxie0UgVzFByUuZAXycHeBUcyYhTEF9AFt9jHNPMXcF7IeXFSajoSK0gtvT_OMfawYh9lYa4VOAKdppEBMvRw6QrA7u8/s1600/default_avatar.gif&#39;)
.ssyby(&#39;blank&#39;)
</script>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6gVa6R9hoPO6SOroBwTUnyutJ5GpOl19kcR4wjb2teFDsmT5UtbIAgAJCu-lYfD6IiTJJ55-s22iaQo24U-aTU_xjQ9Q8f1J9aHC4UWJIv8nLk7hsuELFx0td0f5nXDGwQ7s2fwk0azE/s1600/blogger-user.png&#39;)
.ssyby(&#39;blank&#39;)
</script>

Step 4. Save the Template

How to change avatar:

For Anonymous users: Replace the code in red with the url address of your image
For Blogger users: Replace the URL in blue with your own.

You can choose one from these below (copy the url address):

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuJtBJW7G0oBFrskZ1b1J1SJT_3vP7hBw1kZKcbVOb66Ec4SWMxie0UgVzFByUuZAXycHeBUcyYhTEF9AFt9jHNPMXcF7IeXFSajoSK0gtvT_OMfawYh9lYa4VOAKdppEBMvRw6QrA7u8/s200/default_avatar.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivJely5M1g9tOE_5hABDfFgddt1BP7hWEUc0ZWLd22IlyHzSmf_mNkAfgiHggjHLcYXuH5je-kTdSxsRv9L_uS2AkUuecNBfkTdBjiT-NwvZvDDj15R5U2l4NTHUhNhBBm6FDR93RFhik/s1600/facebook.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWpLUT-J6BSbfChTaUFITkJ9DF82WUSMZyuaONlpy__FjJSpbYrYkKClSqF84uXCOEZCMhFh7Ss73ou8zEoDp_YoknOVvYRH9VdOJKrJZFMnyyiungiU3kyUdTw3wEAV4nvT5eF1P9ga0/s1600/anonymous3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1zeUIlJDWAnZ5MTzQm2fV3RegNsBB2wMwRJKL3eff59zvKaK_2-9VSFbSeufHtjk6JzA9y4VkQ88okDnosEX5O71xxC4Oyzo5i0P_D2_5KeKTWAkJwRzxDHgbqB-gMHvAcJe3jll9Xy66/s1600/blogger-user.png

That's it!
If you liked this post, please consider sharing it.