Are you a blogger of Google Blogger? If yes, then have you been ever seen graphical emoticon as well WordPress blog in any Google Blog yet? I know many of the bloggers who do blogging with Google Blogger and I can tell that most of them are going to answer "No". Because Google has not included this graphical emoticon featured in their Blogger service. Btw, it only their matter they do or not in the future. I’ve been using the Google Blogger service since 2009 and I started this blog since 2010. Since then I was just searching for this issue uncountable time till the last day. But every time I failed earlier.
Now I’m going to share those Script and Method how to get that. Ready to see? Let’s see below... ;)
1. Login to your Google Blogger account.
2. Go to Dashboard>Select Your Blog which you want to show up the graphical emoticon.
3. Then Go to Design>Edit HTML> never forgot to check Expand Widget Templates check box.
4. Find the </head> code with CTRL+F and then paste the below Script before . You can choose SAVE TEMPLATE or can wait for the next step.
<!--Smile Emoticon Script Start-->
<script type="text/javascript">
//<![CDATA[
if(typeof document.getElementsByClassName !== 'function') {
document.getElementsByClassName = function(clsName){
if(!clsName)
return [];
var retVal = [];
var elements = document.getElementsByTagName("*");
var expr = new RegExp('(^| )' + clsName + '( |$)');
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className))
retVal.push(elements[i]);
return retVal;
}
}
//]]>
</script>
<!--Smile Emoticon Script End-->
5. Again, scroll down the mouse and find </body> code with CTRL+F then paste the below Script before </body>.
<!--Smile Emoticon Code Start-->
<script type="text/javascript">
//<![CDATA[
// add smileys to following classes:
var clss = ["post-body", "comment-body", "comment-body-author", "recent-comment-body"];
for (var x=0 ; x < clss.length; x++ )
{
var d = document.getElementsByClassName(clss[x]);
for(var i=0;i<d.length;i++){
var htm = d[i].innerHTML;
htm = htm.replace(/(>|\s|^)(:\)(\s|<|$))/g, '$1<img alt=":-)" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_smile.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\)(\s|<|$))/g, '$1<img alt=";-)" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_wink.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(:\((\s|<|$))/g, '$1<img alt=":-(" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_sad.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(:D)(\s|<|$)/g, '$1<img alt=":-D" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_biggrin.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(:p)(\s|<|$)/gi, '$1<img alt=":-P" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_razz.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":mrgreen:" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_mrgreen.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":twisted:" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_twisted.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":arrow:" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_arrow.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":shock:" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_eek.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":evil:" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_evil.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":idea:" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_idea.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":oops:" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_redface.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":roll:" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_rolleyes.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":cry:" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_cry.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":lol:" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_lol.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt="?" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_confused.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":-O" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_surprised.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":-x" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_mad.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":-|" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_neutral.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt="8)" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_cool.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":!:" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_exclaim.gif" class="emoticon" />$3');
htm = htm.replace(/(>|\s|^)(;\()(\s|<|$)/g, '$1<img alt=":?:" src="http://i905.photobucket.com/albums/ac252/Shaonbd2020/BloggerShaon/Emoticons/icon_question.gif" class="emoticon" />$3');
d[i].innerHTML = htm;
}
}
//]]>
</script>
<!--Smile Emoticon Code End-->
6. You can now finally choose SAVE TEMPLATE.
7. Refresh your blog post and enjoy! :D
Caution: Don't use hyphen "-" sign with any emoticon code if your wish to see graphical view!
Good day! Be well and take care. :)
