Hola, amores, otro martes mas compartiendo cosas chulas con vosotras! hoy traigo un tutorial muy muy sencillo, que me apuesto los cordones de mis zapatillas XD a que seguro que os encanta...
La semana pasada os traje un carrusel de últimos post del blog en forma horizontal, sin embargo, hoy os voy a enseñar como instalarlo en forma vertical para la barra lateral del blog,tal y como se ve en la imagen de abajo. También podéis ver el demo aquí
Además, es muy fácil de aplicar porque ¡Charaaaaaannnn! no tenéis que tocar el codigo html de la plantilla, y sé que a muchas de vosotras os chifla esta idea porque muchas estáis comenzando y no os atrevéis a toquetearla mucho...
Por cierto... todos estos post tienen que ver con que me lo habéis pedido muchas de vosotras en el cuestionario que os deje hace un par de semanas,así que si necesitáis algún post o ayuda con vuestro blog no dudéis en pasar por el y rellenarlo...¡vuestros deseos son ordenes para mí!
-Iremos a Diseño - Añadir un gadget - HTML/Javascript y allí pegamos el siguiente código:
<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:0px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:240px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:240px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:60px;
overflow: hidden;
background:#2C79C1;
}
#spylist li a {
text-decoration:none;
color:#fff;
font-size:12px;
height:10px;
overflow:hidden;
margin:0px 0px;
padding:5px 0px 5px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:9px;
color:#000;
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:9px;
color:#000;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
jQuery.noConflict();
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 = 260;
cellspacing = 6;
borderColor = "#000000";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#000";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#000";
icon2 = " ";
numposts = 10;
home_page = "URL DE VUESTRO BLOG";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://2cd2e6bd6df053a80ac331ad9c3223fc430652d4.googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/ULTIMAS%20ENTRADAS%20EFECTO%20DESLIZANTE.js' type='text/javascript'></script>
</div>
<span><a href="http://www.creaypersonalizatublog.com/"> ¡Lo quiero en mi blog!</a></span>
Ahora vamos a ver los puntos que debéis modificar en el código para personalizar el gadget.
Lo que vemos remarcado en color rosa es el tamaño del ancho del gadget,debemos modificarlo dependiendo del ancho que tenemos en nuestra barra lateral del blog.
En color amarillo nos encontramos el color de fondo que tiene el gadget,lo modificaremos según las tonalidades de nuestro blog.
En color morado el color,tamaño de las letras y font del gadget.
En celeste y ojo! porque es el punto mas importante,debemos escribir la url del blog.
en esta parte del código podemos modificar la rapidez con la que se va deslizando el gadget,4000 serian 4 seg. si queremos que sean 5 seg seria 5000 y así sucesivamente.
y ya esta! estaría listo y perfectamente instalado en vuestro blog!
Me voy despidiendo...y nos vemos el jueves! besitos!
¿Lo vas a instalar?¿Te gusta este tipo de tutoriales?Déjame el enlace de tu blog si lo instalas!
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure