Slider

espacios slider









23 dic. 2013

Tutorial: efecto {Box date}



Hola a todos, que tal se encuentran? hoy les traigo un tutorial que encontré y me pareció muy bonito, espero que a vosotros también
¡Comencemos!


Así es como quedaría este efecto

Antes de comenzar !
- Ve a Diseño /Entradas del blog/ Editar
Allí edita lo que este marcado 
(Lo que NO esta marcado NO lo toques)


Ahora si podemos comenzar
- Primer paso: ve a plantilla / Editar html
- Busca la siguiente línea:
<div class='post-footer'>

Encontraras DOS líneas, SOLO nos interesa la segunda 
- Tercer paso: una vez encontrado la línea necesaria, pega debajo de ella lo siguiente:

<center>
<script type="text/javascript">

numquotes = 4;
var quotes = new Array(numquotes);
quotes[0]="<img class='icon' src='URL ICON'/>";
quotes[1]="<img class='icon' src='URL ICON'/>";
quotes[2]="<img class='icon' src='URL ICON'/>";
quotes[3]="<img class='icon' src='URL ICON'/>";
var rand = Math.floor(Math.random()*numquotes);
document.write(quotes[rand]);
</script>
  <br/>
  <a href="URL LINK"><img class='social' src='URL PIXEL'/></a>
  <a href="URL LINK"><img class='social' src='URL PIXEL'/></a>
  <a href="URL LINK"><img class='social' src='URL PIXEL'/></a>
  <a href="URL LINK"><img class='social' src='URL PIXEL'/></a>
</center>
Edita lo marcado:
URL ICON: Sera el icon que aparece primer, el tamaño debe ser de 100x100px!
URL LINK: Son los links de tus redes sociales!
URL PIXEL: Seran los iconitos sociales, puedes colocar gifs a elección!

- Cuarto paso: Buscamos ahora lo siguiente
]]></b:skin>
Arriba pega el código CSS:


.post-footer { /* BOX FLOTANTE */
background: #FFEFE8; /* FONDO */
padding: 7px;
top: 0px;
left: -140px;
width: 100px;
border-radius: 3px 0 0 3px; /* BORDES REDONDEADOS */
border: 1px dashed #FFBDC1; /* BORDE */
border-right: 8px solid #FFBDC1; /* BORDE DERECHO */
position: absolute;
overflow: hidden;
font-size: 9px; /* TAMAÑO DE LETRA */
font-family: arial; /* TIPO DE LETRA */
text-transform: uppercase;
}
.post-footer a{
background: #A3D9C4; /* FONDO DE LINKS */
color: #FFEFE8; /* COLOR DE LINKS */
}
.post-footer a:hover{ /* LINKS {hover} */
background: #FA7FA2;
color: #FFEFE8;
}
.post-footer:hover .icon{
border: 5px double #A3D9C4; /* BORDE DEL ICON {hover} */
}
.social {opacity: 0.50;}
.social:hover {opacity: 1;}
.icon {
width: 92px;
border: 5px solid #FFBDC1; /* BORDE DEL ICON */
padding: 0px;
}

Edita lo marcado
Presiona Vista Previa y listo 
espero que les guste este efecto, besotess 

Este tutorial pertenece a : THE CIRCUS

7 comentarios: