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)
   </Group>
  • 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)
]]></b:skin>
  • 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

- - 6 Comentarios
Tag

Comentarios (6)

  1. Hola:Me parece un gadget estupendo,quisiera implementarlo en mi blog pero mi plantilla no tiene
    ¿Cómo puedo hacerlo?Gracias

    ResponderEliminar
    Respuestas
    1. Hola:Me parece un gadget estupendo,quisiera implementarlo en mi blog pero mi plantilla no tiene Group
      ¿Cómo puedo hacerlo?Gracias

      Eliminar
    2. OK, tu plantilla es una plantilla personalizada seguramente... Busca la siguiente linea

      <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

      Eliminar
    3. Eres muy amable,muchas gracias pero tampoco me sirvió.Un saludo

      Eliminar
    4. SI 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!!

      Mira 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

      Eliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar