En este tutorial veremos como agregar un gadget con entradas con mas comentarios, con un estilo de las Entradas Populares que ya hemos visto en un tutorial realizado hace unos meses atrás. Esto permitirá a tus usuarios ver que entrada es mas popular a la hora de ver sus comentarios.
Entradas Populares Tutorial original
Antes de comenzar veremos una demostracion:
Demo
Comencemos:
- Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML>>
- Paso 2: Buscamos la siguiente linea (Ctrol + F)
- Paso 3: Justo debajo de </Group> pegamos la siguientes lineas
<Group description="Most Commented" selector=".tb-comentarios">
<Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
<Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
<Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
<Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
<Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
</Group>
- Paso 4: Todavia en la plantilla buscamos la siguiente linea (Ctrol + F)
- Paso 5. Justo encima de ]]></b:skin> pegamos la siguiente linea CSS
.tblogger-comentarios {
padding: 3px 10px;
background: #fff;
color: #000;
font-size: 10px;
float: right;
}
.tb-comentarios ul {
padding: 0px !important;
font-family: Century Gothic, sans-serif;
}
.tb-comentarios ul li {
list-style-type: none;
padding: 10px;
color: #555;
margin-top: -10px;
}
.tb-comentarios ul li a {
color: #444;
font-weight: bold;
text-decoration: none;
font-size: 11px;
}
.tb-comentarios ul li img {
float: left;
margin: 0px 5px 0px 0px;
width: 60px;
height: 60px;
}
.tb-comentarios:nth-child(3n+0) {
background: $(most.commented.background1);
width: 100%;
}
.tb-comentarios:nth-child(4n+0) {
background: $(most.commented.background2);
width: 95%;
}
.tb-comentarios:nth-child(5n+0) {
background: $(most.commented.background3);
width: 90%;
}
.tb-comentarios:nth-child(6n+0) {
background: $(most.commented.background4);
width: 85%;
}
.tb-comentarios:nth-child(7n+0) {
background: $(most.commented.background5);
width: 80%;
}
- Paso 6: Guardamos los cambios realizados en nuestra plantilla.
Ahora agregaremos nuestro gadget que mostrara las entradas con mas comentarios
- Paso 7: Vamos a Blogger>>Diseño>>Añadir un Gadget>>HTML/Javascript
- Paso 8: Dentro de nuestro Gadget HTML/Javascript pegamos el siguiente código Javascript
Agregar Entradas con mas Comentarios Simples
<script type="text/javascript">
function stripTags(s,n)
{
return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
var i;
for (i = 0; i < feed.count ; i++)
{
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="tb-comentarios"><ul><li style="margin-bottom: 10px"><div class="tblogger-comentarios">' + postComments + " Comentarios" +"</div>" + "<a href="+ postURL + '">' + postTitle + "</a>" + '</li></ul></div>';
document.write(postList);
}
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://tutorialesblogger.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://tutoriales-blogger.info">Añadir Gadget!!</a></span>
Agregar Entradas con mas Comentarios con Imagen y un Resumen
<script type="text/javascript">
function stripTags(s,n)
{
return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
var i;
for (i = 0; i < feed.count ; i++)
{
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="tb-comentarios"><ul><li style="margin-bottom: 10px"><div class="tblogger-comentarios">' + postComments + " Comentarios" +"</div>" + "<a href="+ postURL + '">' + postTitle + "</a>" + '</li></ul></div>';
document.write(postList);
}
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://tutorialesblogger.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://tutoriales-blogger.info">Añadir Gadget!!</a></span>
Solo debes cambiar la URL de htpp//:Tutorialesblogger.blogspot.com por la URL de tu blog
y NumberofPosts=5 por las entradas que quieras mostrar
Hola:Me parece un gadget estupendo,quisiera implementarlo en mi blog pero mi plantilla no tiene
ResponderEliminar¿Cómo puedo hacerlo?Gracias
Hola:Me parece un gadget estupendo,quisiera implementarlo en mi blog pero mi plantilla no tiene Group
Eliminar¿Cómo puedo hacerlo?Gracias
OK, tu plantilla es una plantilla personalizada seguramente... Busca la siguiente linea
Eliminar<b:skin><![CDATA[/
Justo debajo, pega el codigo
<Group description="Most Commented" selector=".tb-comentarios">
<Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
<Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
<Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
<Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
<Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
</Group>
Coméntame si te sirvio!!
Saludos
Eres muy amable,muchas gracias pero tampoco me sirvió.Un saludo
EliminarSI tu blog es el localizar recursos. Lo raro es que estoy viendo tu plantilla en modo de "Ver código de fuente" y te aparece la etiqueta group!!
EliminarMira así te tendría que aparecer
http://1.bp.blogspot.com/-XAolucYzYOc/VB7YNQPEE3I/AAAAAAAABwQ/814Fxn1fB9w/s1600/Sin%2Bt%C3%ADtulo-1.png
Dime si aparece
Este comentario ha sido eliminado por el autor.
ResponderEliminar