How Made Round and Augmented Avatars in Blogger

I've always tried to have a good design in my comments and now with the new nested comments CSS inadequacies all I had in my comments but thank God the CSS is wonderful and I've slowly been rebuilding and between those Rebuilding this the increase in size the avatar and change it so that by default is 36 * 36px and square but with a bit of CSS can be increased to 50px and put it round.

With the hack today I present the avatars remain as follows:

To add this trick WILL NEED paste before]]> </ b: skin> the following:

.avatar-image-container,
.avatar-image-container img{
 max-width:50px !important;
 width:50px !important;
 max-height:50px !important;
 height:50px !important;
 padding: 0 !important;
 border:0px;
}

With the above code will increase the size of the avatar to 50px, clarification you can increase even more the size of the avatar but it is highly recommended.

Now if you want round avatars paste before]]> </ b: skin> the following:

.avatar-image-container,
.avatar-image-container img {
 max-width: 50px !important;
 width: 50px !important;
 max-height: 50px !important;
 height: 50px !important;
 padding: 0 !important;
 border: 0px;
 -webkit-border-radius: 999px;
 -moz-border-radius: 999px;
 border-radius: 999px;
}

.avatar-image-container{
 border:3px solid #fff !important;
 -webkit-box-shadow: 0 1px 2px #BBB;
 -moz-box-shadow: 0 1px 2px #BBB;
 box-shadow: 0 1px 2px #BBB;
}

As time is very easy, I hope this little trick pleases you and use it.

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.