Incluir emoticons animados nos novos comentários do Blogger

Vamos mostrar como adicionar emoticos parecidos ao do MSN nos comentários do blog, mas para usar isso é necessário usar os comentários incorporados as postagens, ou seja, na mesma página das postagens. Para ativar isso entre em configurações > comentários, procure por Posição do formulário de comentários e escolha a opção: Postagem abaixo incorporada.

Seguir @DicashotOficial

Atenção leitor:

O DicasHot recomenda que você, leitor, antes de mais nada, faça um backup do seu template, antes de prosseguir, para evitar quaisquer transtornos, caso algo saia errado, por que existem alguns casos de pessoas que fazem as modificações no template e acaba algo não dando muito certo, por esse motivo, seja prudente nesta parte...

1º passo: Incluir CSS

Acesse o painel do Blogger, vá no menu “modelo”, entre na edição HTML do seu template, não precisa marcar a opção “expandir modelos de widgets” e procure pela tag: ]]></b:skin> e cole o seguinte código logo ACIMA dela:


/* Emoticons comentarios - DicasHot
--------------------------------------------*/
.emoticonsmiley {
    background: none repeat scroll 0 0 #FFFFFF !important;
    font-size: medium !important;
    padding: 10px !important;
    text-align: left !important;
    font-weight:bold !important;
    font-size:11px !important;
    border:1px solid #333;
}
img.smiley {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

2º passo: Incluir emoticons e símbolos no HTML

Neste segundo passo, vamos incluir os emoticons e seus respectivos símbolos acima do formulário de comentários para que os seus visitantes possam usar cada emoticon.

Acesse o painel do Blogger, vá em “Design”, entre na edição HTML do seu template, clique em “expandir modelos de widgets” e localize a seguinte linha:

<b:include data='post' name='threaded-comment-form'/>

e cole o seguinte código logo ACIMA dela:

<!-- Emoticons Inicio-->
<b:if cond='data:blog.pageType == "item"'>
<div class='emoticonsmiley'>
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>  
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>  
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>  
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>  
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>  
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>  (
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>  )
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>  
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='smiley' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
</div>
</b:if><!-- Emoticons fim -->