Emoticonos en los comentarios

Nuevos emoticonos para formulario de comentarios





  RECOPILADO DEL BLOG - EL ESCAPARATE DE ROSA

[1] En nuestro panel de Blogger nos situamos en Edición HTML.

[2] Marcamos ahora la casilla de "Expandir plantillas de artilugios".

[3] Localizamos esta línea de código:

<p><data:blogCommentMessage/></p>

[4] Justo debajo, pegamos este código:

<div style=' width: 370px; text-align: left; border: 2px solid #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; '>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEPTdo1Ce6xT-iloK2Sp7D1KSbkdaVoKpV-W3HKd1hHWQySxCo7iYnKoODJ85TR2x3cZyaPNQycgqFQDXpmf_13m2FPuUcg8Z97BeDDDvcF2FeEqGnG_ZThrDs40wQFfD1O6SkSLL9xA/s800/emoticon-0100-smile.gif'/> :a

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixTBQjbpolHwdHvg3NnzVgR_5lb8RPCO7asfeydxXkVH2BdW3ETrFOrB0AbWiviLm3bcUoJGIhEuVIrbw-pk_WNX_AWyj__UEY0MAxFEGfKflFObHZPknwc42VFf7r29TVfEgUYov8ws/s800/emoticon-0101-sadsmile.gif'/> :b

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0a7NVRlQJ7irk77YMRxhHIwsZKIqAoR34AjFeNuTJay_vL_gVJJ6iyeOWfdQdaVwwXavaj_EuTJrmApPsuWA_IUSRu5RWQqeo0xfRHNZOSO_KITe7FvwOHOS53-LIC5ZeRSfXnfzfltM/s800/emoticon-0102-bigsmile.gif'/> :c

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEbBnvGNdvdhN1P1yGmvGaQTgGREFAk0LYLbQp3LrBCF7oY7iCyYIBCPy0b03PbxZEH10f22ESPKT3QQf9mcMERVlcb5YwQFpgIBApZ-QBvzNhRmH1NlitHzidh-0nyVhS72fJpPsXGQ/s800/emoticon-0105-wink.gif'/> :d

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Ldg8bydTDtHLfqlCBdg2etcgHjQdSFToPYkqKhWrJMcnhdqDO0zf2rhR5q5KDkUh-NZMjQ0nMaUZwGPkipovUPO2oCe3hkOHsdUE-MRZxPRqglwABWJFAEL9u0kVPcCgxVEUg14fgGo/s800/emoticon-0104-surprised.gif'/> :e

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwpB6EtqvzoN4FJBNUBalznzXGMweeaV9tBACPx-wGyfQAmNHt8FAGF43cvJ8Nq1NsNN1EPgmii_zL-bsOcb4Dw7J1n3SQ9WQiZ6fE7t-5YApE3AaQlbGdzbIa1RtTuQVuP9FlGAmhbNw/s800/emoticon-0106-crying.gif'/> :f

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPVzwIn2uQJRR_mFTGJyqYp25xVoPRV95LixUHKiqCe0TPBLMGrxnx_r2udP9191bYe5AGjB-H51m1tchzdBhOP-oaDFro7gWHh04nqtGrDllXagk9PQVMfmkOH_1jRi0HytGuupnPZF8/s800/emoticon-0109-kiss.gif'/> :g

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pjUBg90Wo-XZ0re76moCugqb2NG6THbp7CtcjOqfYdVAZn0biKeWc7xGOu1zRGHnR5-niclM2l9L_jj8dAw2gqAiMf96G0-zRb3MZGB9UOaA0jZPzex3mXJ8uFO8NvmqnAGEM4hZGaw/s800/emoticon-0111-blush.gif'/> :h

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitJ8BgtXvfyM1tr_RIJ9iOEAk3BdrzPKkC4ENvpXCbvV8WlH1Mp_s_H8PufiI4sFARQBdOvKqdl_TDoFk6zx9Bov7owMHPVpQi54FtajJSn-apoAJvvuoI94JyL8zi7mZCFLtUZrXINOs/s800/emoticon-0110-tongueout.gif'/> :i

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYIS_oT4oRlvWMyiGn7dmNGb67TEAE1CfxzdsDZZxOitlN2EtKYsdU0ceCy7-g-swm5BZCb3hF_Y8SaVPlD3RemL7fLtwna0Qll-b-vuYe9ioXg3g0doQitw8UFnHINQzdosXc6qXwhc/s800/emoticon-0126-nerd.gif'/> :j

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrPkdh_H8Sy6jJR3EEt15nCYEsmQ47a7jRSD8Mw6TbD86mIWwX3MENd1LAImDjxPthL4jN_qDX36zTpshBT7crQU7SZG7qhlWb-bgKWiutJzCXcND6sqIFbNMp_4hkG1oIoZb8aAnqS0s/s800/emoticon-0103-cool.gif'/> :k

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh07MbYzTL2Zdtv1yFU_3HmIB9p8zT1HnDSENeoYLPYNewxBjEJKM0rnBip6Cm3DXFJF84w_nGdjMReajhPKhakRJiv8TqARuO3eaqGlujP-0-h-BBQDPxymFH80JGbh5sDY_WSVCKHdSk/s800/emoticon-0130-devil.gif'/> :l

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iOuZgtf1WxNGQxL1GeLfHN2qaLKfQUTzbcpaK1FpJWR7xqt76VyaPWwGNe6uqu5-YjJ4BJnoc6nrP0_CSuyfUJp9dH3LV__YPWe6sv6LaeAfhYc6tn5XrJyS7ikY5Old0FuTZ9yD4bo/s800/emoticon-0133-wait.gif'/> :m

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMGNsHJ_JMcDadF4vu_CGPZflXZtVbSbfUXfcYQnbVzeEqj6A_gT8erb8WM7O2T81Ntg1tJhODrI9gE6AES0C5X0coL7Kay-AotB7m2r_YDvmdPnEnWosEA9e3CS4Dfw7Zbe1k7nHUR8/s800/emoticon-0137-clapping.gif'/> :n

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUaHPceIKBECVz2wTCPIRJZD0hwL1vj1QBcmny8FObGtpHkeO8zzFqMrTCeqj-4z8Rp4oD9q3TbWlSW0d3MNAWT0-N5c3kngCCPJ-Iy67T-gjUksMrD5ey5SVuffKPk2G-xXtnZOm0wkE/s800/emoticon-0136-giggle.gif'/> :o

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy15rSwkOIdVv_MMWNCGZeJW6rRDTfYo7QtGFvyKHAuL8Q4R4ve8ErttewNX_vaBuSBqlJPx7b2FbyGOjrHUx4jSjjhUiConzoSYGqVMvoCHRTcsyKUmkB3nJsI3LZoUBAGxLRcnQuk1g/s800/emoticon-0141-whew.gif'/> :p

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFFYH_FHs0oRzmrLjvLznKHG6BxCGHJbYuJ8H_0LwRgNNwOvguid_T2IE_s9wHzfxAEaQ5whDeuZOvtH2fgLbPCSSPKdx-F0qRUWpCOZvWu-gs5-o0EcqOrJ_MnRZprRCx5aaTKsnApX0/s800/emoticon-0148-yes.gif'/> :q

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Czdu3j0vwemMKHwXqOcRsfCdXbYbnGT6yAieWQmzluSb3NXvxbf7SKrMEbf9HCJzOd93kdGiCykaHnBSuUVhKTjCqcFMcUsSbgqUAUIaNEZaMvHAbdzMia7gibhHsi2O7p8eMQvnanc/s800/emoticon-0149-no.gif'/> :r

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO01krlRBSwwIOpiUNhFOBiSAZIjFKbQ71y0X2G05BNV0zrfIWp777ZI5_rVTUYDu1W9zP3X9g0iXfTzj-sx_J8iSVVWFt8U1gMmIwHIIoKVQxzeuEs7k00vdhC6RWP52WRzs3i400Cag/s800/emoticon-0178-rock.gif'/> :s

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8FS4K3XvRfZuwqzdsVAza10zcnZI8jYWcAq1gIbWtPu3ZgOfbx92dqnz5L8CpV8ENOHVWJt9XQCwi30dnWepzCAhntpva4110RsjcHXH61QHm-dpMFnk8MCLq0YbgaPDf328bFjF7yu0/s800/emoticon-0155-flower.gif'/> :t
</div>

[5] Guardamos los cambios y ya podemos comprobar que sobre el formulario de comentarios estarán los emoticonos y sus símbolos correspondientes.

Una vez incluida la imagen con los emoticonos, vamos a ver como incluir en la plantilla el código (script) que hará posible el usar los emoticonos en los comentarios.

[5] Localizamos la etiqueta </body> en nuestra plantilla (casi al final del código de la misma) y, justo sobre ella, pegamos el script:

<script type='text/javascript'>

//<![CDATA[
a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'Author-comment-body' , 'comment-body') {
_str = b.item(i).innerHTML.replace(/:j/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYIS_oT4oRlvWMyiGn7dmNGb67TEAE1CfxzdsDZZxOitlN2EtKYsdU0ceCy7-g-swm5BZCb3hF_Y8SaVPlD3RemL7fLtwna0Qll-b-vuYe9ioXg3g0doQitw8UFnHINQzdosXc6qXwhc/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrPkdh_H8Sy6jJR3EEt15nCYEsmQ47a7jRSD8Mw6TbD86mIWwX3MENd1LAImDjxPthL4jN_qDX36zTpshBT7crQU7SZG7qhlWb-bgKWiutJzCXcND6sqIFbNMp_4hkG1oIoZb8aAnqS0s/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh07MbYzTL2Zdtv1yFU_3HmIB9p8zT1HnDSENeoYLPYNewxBjEJKM0rnBip6Cm3DXFJF84w_nGdjMReajhPKhakRJiv8TqARuO3eaqGlujP-0-h-BBQDPxymFH80JGbh5sDY_WSVCKHdSk/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iOuZgtf1WxNGQxL1GeLfHN2qaLKfQUTzbcpaK1FpJWR7xqt76VyaPWwGNe6uqu5-YjJ4BJnoc6nrP0_CSuyfUJp9dH3LV__YPWe6sv6LaeAfhYc6tn5XrJyS7ikY5Old0FuTZ9yD4bo/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMGNsHJ_JMcDadF4vu_CGPZflXZtVbSbfUXfcYQnbVzeEqj6A_gT8erb8WM7O2T81Ntg1tJhODrI9gE6AES0C5X0coL7Kay-AotB7m2r_YDvmdPnEnWosEA9e3CS4Dfw7Zbe1k7nHUR8/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUaHPceIKBECVz2wTCPIRJZD0hwL1vj1QBcmny8FObGtpHkeO8zzFqMrTCeqj-4z8Rp4oD9q3TbWlSW0d3MNAWT0-N5c3kngCCPJ-Iy67T-gjUksMrD5ey5SVuffKPk2G-xXtnZOm0wkE/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy15rSwkOIdVv_MMWNCGZeJW6rRDTfYo7QtGFvyKHAuL8Q4R4ve8ErttewNX_vaBuSBqlJPx7b2FbyGOjrHUx4jSjjhUiConzoSYGqVMvoCHRTcsyKUmkB3nJsI3LZoUBAGxLRcnQuk1g/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
_str = _str.replace(/:q/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFFYH_FHs0oRzmrLjvLznKHG6BxCGHJbYuJ8H_0LwRgNNwOvguid_T2IE_s9wHzfxAEaQ5whDeuZOvtH2fgLbPCSSPKdx-F0qRUWpCOZvWu-gs5-o0EcqOrJ_MnRZprRCx5aaTKsnApX0/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>");
_str = _str.replace(/:r/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Czdu3j0vwemMKHwXqOcRsfCdXbYbnGT6yAieWQmzluSb3NXvxbf7SKrMEbf9HCJzOd93kdGiCykaHnBSuUVhKTjCqcFMcUsSbgqUAUIaNEZaMvHAbdzMia7gibhHsi2O7p8eMQvnanc/s800/emoticon-0149-no.gif' alt='' class='smiley'/>");
_str = _str.replace(/:t/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8FS4K3XvRfZuwqzdsVAza10zcnZI8jYWcAq1gIbWtPu3ZgOfbx92dqnz5L8CpV8ENOHVWJt9XQCwi30dnWepzCAhntpva4110RsjcHXH61QHm-dpMFnk8MCLq0YbgaPDf328bFjF7yu0/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>");
_str = _str.replace(/:s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO01krlRBSwwIOpiUNhFOBiSAZIjFKbQ71y0X2G05BNV0zrfIWp777ZI5_rVTUYDu1W9zP3X9g0iXfTzj-sx_J8iSVVWFt8U1gMmIwHIIoKVQxzeuEs7k00vdhC6RWP52WRzs3i400Cag/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");

_str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEPTdo1Ce6xT-iloK2Sp7D1KSbkdaVoKpV-W3HKd1hHWQySxCo7iYnKoODJ85TR2x3cZyaPNQycgqFQDXpmf_13m2FPuUcg8Z97BeDDDvcF2FeEqGnG_ZThrDs40wQFfD1O6SkSLL9xA/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixTBQjbpolHwdHvg3NnzVgR_5lb8RPCO7asfeydxXkVH2BdW3ETrFOrB0AbWiviLm3bcUoJGIhEuVIrbw-pk_WNX_AWyj__UEY0MAxFEGfKflFObHZPknwc42VFf7r29TVfEgUYov8ws/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0a7NVRlQJ7irk77YMRxhHIwsZKIqAoR34AjFeNuTJay_vL_gVJJ6iyeOWfdQdaVwwXavaj_EuTJrmApPsuWA_IUSRu5RWQqeo0xfRHNZOSO_KITe7FvwOHOS53-LIC5ZeRSfXnfzfltM/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEbBnvGNdvdhN1P1yGmvGaQTgGREFAk0LYLbQp3LrBCF7oY7iCyYIBCPy0b03PbxZEH10f22ESPKT3QQf9mcMERVlcb5YwQFpgIBApZ-QBvzNhRmH1NlitHzidh-0nyVhS72fJpPsXGQ/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Ldg8bydTDtHLfqlCBdg2etcgHjQdSFToPYkqKhWrJMcnhdqDO0zf2rhR5q5KDkUh-NZMjQ0nMaUZwGPkipovUPO2oCe3hkOHsdUE-MRZxPRqglwABWJFAEL9u0kVPcCgxVEUg14fgGo/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwpB6EtqvzoN4FJBNUBalznzXGMweeaV9tBACPx-wGyfQAmNHt8FAGF43cvJ8Nq1NsNN1EPgmii_zL-bsOcb4Dw7J1n3SQ9WQiZ6fE7t-5YApE3AaQlbGdzbIa1RtTuQVuP9FlGAmhbNw/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPVzwIn2uQJRR_mFTGJyqYp25xVoPRV95LixUHKiqCe0TPBLMGrxnx_r2udP9191bYe5AGjB-H51m1tchzdBhOP-oaDFro7gWHh04nqtGrDllXagk9PQVMfmkOH_1jRi0HytGuupnPZF8/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pjUBg90Wo-XZ0re76moCugqb2NG6THbp7CtcjOqfYdVAZn0biKeWc7xGOu1zRGHnR5-niclM2l9L_jj8dAw2gqAiMf96G0-zRb3MZGB9UOaA0jZPzex3mXJ8uFO8NvmqnAGEM4hZGaw/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitJ8BgtXvfyM1tr_RIJ9iOEAk3BdrzPKkC4ENvpXCbvV8WlH1Mp_s_H8PufiI4sFARQBdOvKqdl_TDoFk6zx9Bov7owMHPVpQi54FtajJSn-apoAJvvuoI94JyL8zi7mZCFLtUZrXINOs/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>")
b.item(i).innerHTML = _str;
}
}
}

//]]>

</script>

[6] Guardamos cambios.

Nota:

Para cambiar el diseño del rectángulo (div) donde van incluidos los emoticonos sobre el formulario, lo haremos en la primera línea del código:

<div style=' width: 370px; text-align: left; border: 2px solid #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold;'>

width: 370px; Cambiamos el ancho del recuadro.

text-align: left; Alineación, en este caso a la izquierda.

border: 2px solid #0084ce; Grosor, aspecto y color del borde.

background: #FEF9EA; Color de fondo del rectángulo-contenedor.

padding: 10px; Distancia de los emoticonos (contenido) al borde.

color:#0084ce; Color del texto (los símbolos).

font-weight:bold; Fuente en negrita.

Ponerle fondo a enlace comentarios

Una de las cosas muy importante en un blog, es que nuestras visitas encontren donde comentar. Podemos resaltar cambiando el diseño del enlace a comentarios.

Enlace a comentarios con imagen en la parte superior del post

[1] Iremos en nuestro panel a la pestaña de "Edición HTML" y tendremos que marcar la casilla de expandir las plantillas de artilugios.

[2] Localizamos ahora el código que corresponde a nuestro enlace de comentarios:

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

</b:if>
</b:if>
</span>

Una vez localizado el código tendríamos que transportar el código de donde está a donde vamos a mostrar los comentarios dentro de la imagen, es decir, copiarlo, guardarlo en el blog de notas por ejemplo, y eliminar el original.

[3] Localizamos ahora la parte del código de la plantilla donde vamos a pegar el código anterior. Podríamos colocarlo en distintos sitios dependiendo de donde queremos mostrarlo, por ejemplo justo después de esta línea estaría bien:

<b><b:includable id="post" var="post"></b:includable></b>

[4] Modificaremos lo necesario en ese código para eliminar el texto del enlace y mantener únicamente el número de comentarios ya quedará mucho mejor para mostrarlo dentro de una imagen.

Hay que suprimir las etiquetas </data:top.commentlabel><y "<data:top.commentlabelplural>"

Colocamos entonces una líneas en el CSS, siempre antes de ]]>, para añadir los atributos del enlace y conseguir así el formato que queremos (imagen de fondo, fuente, dimensiones, márgenes, bordes, etc.):

.comment-link {
font-size: 150%;
background: url(http://img368.imageshack.us/img368/2623/comentabe7.png) no-repeat top right;
height: 50px;
width: 53px;
text-align: center;
float: right;
margin: 5px 0 0 0;
padding:5px 2px 0 5px;
}

Fuente : El escaparate de Rosa