Como modificar el cuadro de comentarios de mi blog
El formulario de Blogger de comentarios es la única sección de blogs de
blogspot que todavía irrita a los usuarios en gran cantidad, porque no los
pueden modificar o no tienen algún tutor que les explique cómo hacerlo. Este
widget es un JavaScribt y es compatible para todos los navegadores. El tutorial de
hoy le ayudará a crear un botón muy hermoso la cual tiene las funciones de
ampliarse y contraerse, como también mostrar el formulario de comentarios, la
cual se va a activar y esconderse cuando le dan un clic. Nosotros vamos a usar
funciones simples de jQuery para habilitar un botón y que sea mostrado, luego
oculte todas las secciones div que sujetan la caja de comentarios.
¿Cómo funciona?
El uso de este widget es muy fácil de usar, cuando se lo instale en su blog, usted podrá observar una gran diferencia al anterior cuadro de comentarios que tenía en su blog de Blogger, cuando un usuario quiere dejarte un comentario, lo único que necesitan hacer es dar un clic en el botón, luego se va a expandir y ahí pueden dejar su comentario, pero esta función tiene buenas ideas, porque también les va a mostrar las fotos de las personas que comentaron y una foto adicional de usted en dibujo. Solo miren la imagen y se darán cuenta de lo que estoy diciendo.
El uso de este widget es muy fácil de usar, cuando se lo instale en su blog, usted podrá observar una gran diferencia al anterior cuadro de comentarios que tenía en su blog de Blogger, cuando un usuario quiere dejarte un comentario, lo único que necesitan hacer es dar un clic en el botón, luego se va a expandir y ahí pueden dejar su comentario, pero esta función tiene buenas ideas, porque también les va a mostrar las fotos de las personas que comentaron y una foto adicional de usted en dibujo. Solo miren la imagen y se darán cuenta de lo que estoy diciendo.
Instalar en blogger
La guía de instalación es extremadamente simple. He mantenido los pasos lo más claro posible. Sólo tienes que copiar y pegar los códigos y nada más.
1.- Ir a Blogger> Plantilla
2.- Haga una copia de seguridad de su plantilla
3.- Haga clic en Edición de HTML
4.- Haga clic en Continuar
5.- Haga clic en Expandir plantillas de artilugios
6.- Justo debajo de <head> pega el siguiente código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
La guía de instalación es extremadamente simple. He mantenido los pasos lo más claro posible. Sólo tienes que copiar y pegar los códigos y nada más.
1.- Ir a Blogger> Plantilla
2.- Haga una copia de seguridad de su plantilla
3.- Haga clic en Edición de HTML
4.- Haga clic en Continuar
5.- Haga clic en Expandir plantillas de artilugios
6.- Justo debajo de <head> pega el siguiente código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
7. Ahora busca este código, ]]></b:skin> y justo encima de ella pegue el siguiente
código CSS.
h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
- Para cambiar el ancho del botón puedes editar
width: 518px por
el ancho que usted quiera.
- Para cambiar el color, tamaño de fuente, tipo de letra del texto, para el
mensaje "Haga clic aquí para añadir
un comentario!" Edite la parte resaltada de color amarillo del código.
8. Luego busque este código:
<b:includable id='comment-form' var='post'>
9. Justo debajo debe pegar el siguiente código:
<h3 class='trigger'>Haga
clic aquí para añadir un comentario</h3>
<div class='toggle_container'>
<div class='block'>
<div class='toggle_container'>
<div class='block'>
Luego busca este código </b:includable> y justo arriba
de el pega este código:
<p style=' line-height:0px;
font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a
href='#'
style='color:#CAC8C8;'><i>Blogger</i></a></p>
</div>
</div>
</div>
</div>
Vea la imagen de abajo para ver que ha seguido los pasos correctamente.
10. Guarde su plantilla y listo eso es todo
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo saber
Ahora abra su blog de Blogger para
ver sus cambios, a sus visitantes les encantara hacer un comentario con esta
nueva función.
Cualquier pregunta no duden en hacérmelo saber
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
9 comentarios: