17 de octubre de 2012

Gadget de "Entradas Populares" con imágen y un buen efecto

Hola a todos, hoy vamos a aprender a colocar un gadget de "Entradas Populares" con imágenes incorporadas y un lindo efecto que lo acompaña.

Hace rato que no hacía una entrada, anduve con algunos problemas y contratiempos. Hoy vengo con algo sencillo, fácil de colocar.

Como siempre, primero les muestro un ejemplo y luego les explico cómo se hace. Tengan en cuenta que en mi ejemplo no van a salir imágenes casi porque a mis entradas no les agrego ninguna. Sepan que si pensamos en hacer SEO eso está muy mal(en este caso este es un blog en el que no estoy interesado en posicionarlo, sino simplemente compartir ciertas herramientas y conocimientos con quien lo necesite), hay que agregar imágenes y colocarle una descripción y usar el atributo alt, si no saben de lo que estoy hablando les explico de manera muy breve: agregar este atributo mejora en gran medida el posicionamiento de nuestras imágenes en el resultado de búsqueda en Google Images, y por ende tendríamos más visitas en nuestro blog ya que a Google le gustan las imágenes y más si tienen esta descripción ¿cómo se agrega? muy fácil, con este código:

<img src="URL DE LA IMAGEN" alt="DESCRIPCION"/>


Bien, ahora si les muestro el ejemplo:

-->
Bien, si les gustó entonces abren un gadget HTML/Javascript y colocan lo siguiente dentro:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://TUBLOG.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>


Bien, ahora donde dice TUBLOG lo reemplacen por la url del blog de ustedes y un poquito más arriba donde dice 10 lo reemplazan por el número de entradas que quieren que muestre el gadget.

Terminamos, espero que les haya sido de utilidad, ¡Saludos!.

No hay comentarios:

Publicar un comentario