Delicious LinkedIn Facebook Twitter RSS Feed

Sección comentarios en Blog Blogger cambio de posición y diseño de imagen desde plantilla

Actualización de este tema: Sustituir "Comentarios".

Este tema es muy sencillo si seguís los pasos,y queda muy vistoso,podéis ver un notable cambio del modelo básico que puede ofrecer una plantilla,a las grandes posibilidades que tenemos al poder mostrar tanto "el numero de comentarios"(con tamaño editable),como poner la imagen que queramos "gif",que pondremos según el diseño del blog y que indicará mas visualmente cual es la sección para comentar en un blog.

Pasos:

1ºEste paso se hace por que si no se hace,salen los comentarios arriba del post y abajo del post " 2 veces ", si lo borramos solo salen en un lado como debe quedar,vamos a nuestra plantilla "Edición html" y "expandimos artilugios"... localizamos con las teclas de nuestro teclado "Control+F"buscamos lo siguiente: <span class="post-comment-link"> "Incluido este código y hasta: </span> ¡Lo borramos! ,(Son unos 10-12 renglones "cuidado no borrar más,ver imagen).2ºAhora una vez borrado esa pequeña parte:Buscamos ahora: <b:includable id='post' var='post'> justo detrás "Si no hay espacio damos a Enter",ponemos el siguiente código:
<span class='post-comment-link'>
<
b:if cond='data:blog.pageType != "item"'>

<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 <b:else/>
<
data:post.numComments/> </b:if></a>
</b:if>
</b:if>
</span>

3ºAhora buscamos: ]]></b:skin> y justo "antes" ponemos:
.comment-link {
font-size: 150%;
background: url( "URL de la Imagen que se quiera" ) no-repeat top right;
height: 50px;
width: 53px;
text-align: center;
float: right;
margin: 5px 0 0 0;
padding:5px 2px 0 5px;
}

4ºDamos a vista previa,y nos aseguramos que no hay errores y guardamos.
* Los valores de tamaño del numero de comentarios "font-size: 150%;"podéis ajustarlos para el efecto deseado,y en:background: url( "URL de la Imagen que se quiera" ) ,hay ponemos entre los paréntesis la dirección de la imagen que queramos(una vez modificado se previsualiza la plantilla y se guarda).

-Estas son algunas imagenes para poner:

*Aquí dejo las "url" o direcciones de algunas imagenes que están muy bien para este motivo,para ver la animación,tamaño y la calidad de la imagen pulsar sobre el enlace de cada imagen,una vez elegida la direccion de imagen copiar y pegar sobre el código anterior "entre los parentesis ("AQUI LA URL DE LA IMAGEN") y comillas:Ejemplo:background: url( "http://www.gifmania.com/email/buzonesrojos/bnm.gif" )

Imagen

Url de la Imagen
http://www.gifmania.com/email/buzones/mailh.gif
http://www.gifmania.com/email/buzones/cartab.gif
http://www.gifmania.com/email/buzonesmarillos/buzon2.gif
http://www.gifmania.com/email/buzonesrojos/bnm.gif
http://www.gifmania.com/email/buzonesazules/O_mail01.gif
http://www.gifmania.com/email/cartas/981.gif
http://www.gifmania.com/email/cartas/animai44.gif
http://www.gifmania.com/email/cartas/val008.gif
http://www.gifmania.com/email/cartas/roule-env.gif
http://www.gifmania.com/email/cartas/email.gif
http://www.gifmania.com/email/cartas/correo6b.gif
http://www.gifmania.com/email/cartas/teroi.gif
http://www.gifmania.com/email/cartas/mailme2.gif

0 comments:

Post a Comment