Entradas Recientes Animadas es una manera de presentar titulos actualizados para tus lectores.El efecto de deslizamiento suave que atrae a los lectores que generara mas clicks de los visitantes.Este gadget muestra tus articulos recientes y incluye una pequena foto, pero tiene el bono adicional un efecto animado que mueve suavemente atraves de las entradas.Hay un numero de grandes tutoeiales que te muestran como anadir este gadget para blogger con imagen pero muchos de ellos no son tan sencillos para los principiantes.
Ejemplo de Widget Animado de Entradas Recientes:
Chequea ejemplo en vivo en http://fixcd.blogspot.com/
Como instalar las entradas recientes animadas para blogger con imagen
Vamos a anadirlo..
Paso 1 Entra en tu cuenta de Blogger >>Da Click en Diseno >> y da click en Anadir un Gadget.
Paso 2. Despues de dar click en Anadir un Gadget una ventana se abrira
con una lista de gadgets, seleccione HTML/JavaScript de la lista dando click en la cruz azul del gadget.
Paso 3. Seleccione 'HTML/Javascript' y anada el codigo de abajo.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>Paso 4. Ahora da Click en guardar 'JavaScript' y todo esta finalizado.
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xHQyrO2uFsTRZWYJfrHk8rdjFLfPt2zJxGEPtqhgq7ygcC3FrwKXFWnA2f8VEqonTtahImhepuchOVTHOPgHpeZ2XQpJ8R-N1ooLXtdIigWpX70ehIOvhCgccgsVVzwx6rYyNMr4x2Fi/s1600/24work-blogspot-com.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgROilK9HgwzmTGyeS3TrxHXJpGOxLcKYwr6wYH4iebjvgoUoqgokvLV02JqIR4-zInEaV1HkPjq_Ulr_2ViB_WoabpNJ1MYjGd8okdoW_cUqAukPxPXt6LgBXEPe2_Kko8R7xySxjczIAe/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgROilK9HgwzmTGyeS3TrxHXJpGOxLcKYwr6wYH4iebjvgoUoqgokvLV02JqIR4-zInEaV1HkPjq_Ulr_2ViB_WoabpNJ1MYjGd8okdoW_cUqAukPxPXt6LgBXEPe2_Kko8R7xySxjczIAe/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgROilK9HgwzmTGyeS3TrxHXJpGOxLcKYwr6wYH4iebjvgoUoqgokvLV02JqIR4-zInEaV1HkPjq_Ulr_2ViB_WoabpNJ1MYjGd8okdoW_cUqAukPxPXt6LgBXEPe2_Kko8R7xySxjczIAe/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgROilK9HgwzmTGyeS3TrxHXJpGOxLcKYwr6wYH4iebjvgoUoqgokvLV02JqIR4-zInEaV1HkPjq_Ulr_2ViB_WoabpNJ1MYjGd8okdoW_cUqAukPxPXt6LgBXEPe2_Kko8R7xySxjczIAe/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgROilK9HgwzmTGyeS3TrxHXJpGOxLcKYwr6wYH4iebjvgoUoqgokvLV02JqIR4-zInEaV1HkPjq_Ulr_2ViB_WoabpNJ1MYjGd8okdoW_cUqAukPxPXt6LgBXEPe2_Kko8R7xySxjczIAe/s1600/noimage.png";
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://ciudadblogger.info/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com.js' type='text/javascript'></script>
</div>
da click enGuardar
Nota :Si tu plantilla ya tiene jquery no lo ponga de nuevo, solo copie debajo de jquery.
Html de arriba algunas cosas pueden ser reemplazadas :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
1. Direccion de Pagina Principal
home_page = “http://ciudadblogger.info/”;
2. Estilo
de la hoja de style/css, puedes cambiar :
(ancho)width : 220px;
(ancho)width:208px:
Personalize basado en tu Plantilla
y el Fondo
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xHQyrO2uFsTRZWYJfrHk8rdjFLfPt2zJxGEPtqhgq7ygcC3FrwKXFWnA2f8VEqonTtahImhepuchOVTHOPgHpeZ2XQpJ8R-N1ooLXtdIigWpX70ehIOvhCgccgsVVzwx6rYyNMr4x2Fi/s1600/24work-blogspot-com.jpg) repeat-x;
Personaliza los colores del background
3. Tamano Imagen
thumbwidth = 70;
thumbheight = 70;
Matchealo a tu gusto.
4. Cuantas Entradas Mostrar:
numposts = 10;
Basado lo que deseas mostrar.
0 comentarios:
Publicar un comentario