How Add your Own Emoticons to your Blog

Many bloggers looking to add emoticons to your blog, but this depends on blogs bloggers help to put emoticons in their blogs but today I will teach you how to add your own emoticons to your blogs.

The following code is for the script we use to make the call emoticon to blog:

*/ function emoticonComentario() { if(!document.getElementById) {return;} // no soportado bodyText = document.getElementById('comments'); emoticon = bodyText.innerHTML; // <b style="color: red;">:)</b> :-) :-] emoticon = emoticon.replace(/:\)/g,'&lt;img src="<span style="color: #0b5394;">http://static.mobile9.com/bbcode/smileys/smile.gif</span>" /&gt;'); emoticon = emoticon.replace(/:-\)/g,'&lt;img src="<span style="color: #0b5394;">http://static.mobile9.com/bbcode/smileys/smile.gif</span>" /&gt;'); emoticon = emoticon.replace(/:-\]/g,'&lt;img src="<span style="color: #0b5394;">http://static.mobile9.com/bbcode/smileys/smile.gif</span>" /&gt;'); // <b><span style="color: red;">X(</span></b> emoticon = emoticon.replace(/X\(/g,'&lt;img src="<span style="color: #0b5394;">http://static.mobile9.com/bbcode/smileys/tongue.gif</span>" /&gt;'); // :cool: emoticon = emoticon.replace(/:cool:/g,'&lt;img src="http://static.mobile9.com/bbcode/smileys/wink.gif" /&gt;'); // :cry: emoticon = emoticon.replace(/:cry:/g,'&lt;img src="http://static.mobile9.com/bbcode/smileys/laugh.gif" /&gt;'); // :blaf: emoticon = emoticon.replace(/:blaf:/g,'&lt;img src="http://static.mobile9.com/bbcode/smileys/frown.gif" /&gt;'); // :winky: emoticon = emoticon.replace(/:winky:/g,'&lt;img src="http://static.mobile9.com/bbcode/smileys/thumbup.gif" /&gt;'); // :noo: emoticon = emoticon.replace(/:noo:/g,'&lt;img src="http://static.mobile9.com/bbcode/smileys/blush.gif" /&gt;'); // :twisted: emoticon = emoticon.replace(/:twisted:/g,'&lt;img src="http://static.mobile9.com/bbcode/smileys/byebye.gif" /&gt;');

 What is in blue corresponds to the URL of the emoticon, that's where you put the URL of your emoticon (in the first part of the code you have to repeat the URL of the image 3 times, from now on you'll just have to put the URL only once).

What is in red corresponds to the code to be used in comments to display the emoticon.

Then save the file in a text editor (eg Notepad) with extension Js and upload it to a hosting like Dropbox or Google Sites, there give you the URL and you'll have to paste before </ body> following the following structure.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='URL of File .JS' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

 With this we will have ready the emoticons but now we need to show a list of emoticons that readers can use them.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='divspoiler'>
<img onclick='if (this.parentNode.nextSibling.childNodes[0].style.display != &apos;&apos;) { this.parentNode.nextSibling.childNodes[0].style.display = &apos;&apos;; } else { this.parentNode.nextSibling.childNodes[0].style.display = &apos;none&apos;;}' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFgk72GWnsGBZPExzStse4M293jl83kqH8uyCZj0lQj6FYPouo-UOt0ghzM8ppJ9EKMC-y7b_5ekKzHeLf18svK46Jz3DgOmrQjQevG2bkVQNE4bdRJCyDGNrwYNMtDJOyoypG_emnsI/s1600/Sin+t%C3%ADtulo-1.png'/>
</div><div><div class='spoiler' style='display: none;'>
<div class='comment-content' id='bc_0_1MC'>
<img src='http://static.mobile9.com/bbcode/smileys/smile.gif'/> :) <img src='http://static.mobile9.com/bbcode/smileys/tongue.gif'/> X( <img src='http://static.mobile9.com/bbcode/smileys/wink.gif'/> :cool: <img src='http://static.mobile9.com/bbcode/smileys/laugh.gif'/> :cry: <img src='http://static.mobile9.com/bbcode/smileys/frown.gif'/>  :blaf: <img src='http://static.mobile9.com/bbcode/smileys/thumbup.gif'/> :winky: <img src='http://static.mobile9.com/bbcode/smileys/blush.gif'/> :noo: <img src='http://static.mobile9.com/bbcode/smileys/byebye.gif'/> :twisted: <img src='http://static.mobile9.com/bbcode/smileys/clapping.gif'/>:D <img src='http://static.mobile9.com/bbcode/smileys/wow.gif'/> :oops: <img src='http://static.mobile9.com/bbcode/smileys/help.gif'/> :? <img src='http://static.mobile9.com/bbcode/smileys/devil.gif'/> :F
<img src='http://static.mobile9.com/bbcode/smileys/wub.gif'/> :alaba: <img src='http://static.mobile9.com/bbcode/smileys/cry.gif'/>:lpmqtp: <img src='http://static.mobile9.com/bbcode/smileys/thumbdown.gif'/> :idiot:</div>

</div></div>
</b:if>

What this highlighted in green is the URL of the emoticon and what is in pink is the code of the emoticon.

The above code WILL NEED paste it below

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

 With this we have finished the tutorial and you will ready your emoticons, I hope they have been helpful.