Tutorial:Slider cute // Tipo 1 ♥


Hola ,hoy les traigo un slider ¡ Muy bonito les gustara   Aqui les dejo una imagen y la vista previa de como queda ,(hace tiempo que no uso la vista Previa jiji   También pienso hacer tutorial de eso) Bueno aqui esta:







Si lo quieren sigan los pasos :
Este slider es mayormente para ponerla en la cabecera :3
Bueno para colocarlo
Para Plantilla Basica o Blogger: Ir a Diseño/Añadir gadget/HTMLJavacript y pegas el siguiente codigo
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo donde lo desees  (No lo probee aun en una plantilla clasica pero creo que si debe funcionar n.n )
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )

<style>
.cr-container{
 width: 600px;/*Ancho del slider*/
 height: 400px;/*Altura del slider*/
 position: relative;
 margin: 0 auto;
 border: 20px solid #FAC7C7;/*Border del slider 20 Tamaño solid Tipo FAC7C7 Color*/
 box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
 font-style: italic;
 width: 150px;/*Ancho de  1 2 3 4*/
 height: 30px; /*Altura de 1 2 3 4*/
 cursor: pointer;
 color: #fff;/*Color de letra de  1 2 3 4*/
 line-height: 32px;
 font-size: 24px;/*Tanaño de Letra de  1 2 3 4*/
 float:left;
 position: relative;
 margin-top:350px;
 z-index: 1000;
}
.cr-container label:before{
 content:'';
 width: 34px;/*Ancho de los botones 1 2 3 4*/
 height: 34px;/*Altura de los botones 1 2 3 4*/
background: #FAC7C7;/*Color de fondo de los botones 1 2 3 4*/
 position: absolute;
 left: 50%;
 margin-left: -17px;
 border-radius: 50%;/*Bordes redondeados*/ box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
 z-index:-1;
}
.cr-container label:after{
 width: 1px;
 height: 400px;
 content: '';
 background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
 background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
 position: absolute;
 bottom: -20px;
 right: 0px;
}
.cr-container label.cr-label-img-4:after{
 width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
 color: #68abc2;/*Color de letra 1 2 3 4 Hover*/
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
background: #A9E2C7;/*Color de fondo 1 2 3 4 Hover*/
}
.cr-container input{
 display: none;
}
.cr-bgimg{
 width: 600px;/*Ancho de Imagenes*/
 height: 400px;/*Altura de Imagenes*/
 position: absolute;
 left: 0px;
 top: 0px;
 z-index: 1;
}
.cr-bgimg{
 background-repeat: no-repeat;
 background-position: 0 0;
}
.cr-bgimg div{
 width: 150px;
 height: 100%;
 position: relative;
 float: left;
 overflow: hidden;
 background-repeat: no-repeat;
}
.cr-bgimg div span{
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0px;
 left: -150px;
 z-index: 2;
 text-indent: -9000px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
 background-image: url(URL DE LA PRIMERA IMAGEN);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
 background-image: url(URL DE LA SEGUNDA IMAGEN);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
 background-image: url(URL DE LA TERCERA IMAGEN);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
 background-image: url(URL DE LA CUARTA IMAGEN);
}
.cr-bgimg div:nth-child(1) span{
 background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
 background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
 background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
 background-position: -450px 0px;
}
.cr-container input:checked ~ .cr-bgimg div span{
 -webkit-animation: slideOut 0.6s ease-in-out;
 -moz-animation: slideOut 0.6s ease-in-out;
 -o-animation: slideOut 0.6s ease-in-out;
 -ms-animation: slideOut 0.6s ease-in-out;
 animation: slideOut 0.6s ease-in-out;
}
@-webkit-keyframes slideOut{
 0%{ left: 0px; }
 100%{ left: 150px; }
}
@-moz-keyframes slideOut{
 0%{ left: 0px; }
 100%{ left: 150px; }
}
@-o-keyframes slideOut{
 0%{ left: 0px; }
 100%{ left: 150px; }
}
@-ms-keyframes slideOut{
 0%{ left: 0px; }
 100%{ left: 150px; }
}
@keyframes slideOut{
 0%{ left: 0px; }
 100%{ left: 150px; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
 -webkit-transition: left 0.5s ease-in-out;
 -moz-transition: left 0.5s ease-in-out;
 -o-transition: left 0.5s ease-in-out;
 -ms-transition: left 0.5s ease-in-out;
 transition: left 0.5s ease-in-out;
 -webkit-animation: none;
 -moz-animation: none;
 -o-animation: none;
 -ms-animation: none;
 animation: none;
 left: 0px;
 z-index: 10;
}
.cr-titles h3{
 position: absolute;
 width: 100%;
 text-align: center;
 top: 50%;
 z-index: 10000;
 opacity: 0;
color: #A9E2C7;/*Color de la letra del titulo*/
 text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 -webkit-transition: opacity 0.8s ease-in-out;
 -moz-transition: opacity 0.8s ease-in-out;
 -o-transition: opacity 0.8s ease-in-out;
 -ms-transition: opacity 0.8s ease-in-out;
 transition: opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
 font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
 font-size: 70px;/*Tamaño de la Letra*/
 display: block;
 letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
 letter-spacing: 0px;
 display: block;
background: #FAC7C7;/*Fondo del subtitulo*/
 font-size: 14px;
 padding: 10px;
 font-style: italic;
 font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
 opacity: 1;
}
@media screen and (max-width: 768px) {
 .cr-container input{
  display: inline;
  width: 24%;
  margin-top: 350px;
  z-index: 1000;
  position: relative;
 }
 .cr-container label{
  display: none;
 }
}
</style>
<div style="position: absolute; margin-top: -150px; right: 10px;">
<section class="cr-container">  
    <input checked="" class="cr-selector-img-1" id="select-img-1" name="radio-set-1" type="radio" />
    <label class="cr-label-img-1" for="select-img-1">1</label>
 
    <input class="cr-selector-img-2" id="select-img-2" name="radio-set-1" type="radio" />
    <label class="cr-label-img-2" for="select-img-2">2</label>
 
    <input class="cr-selector-img-3" id="select-img-3" name="radio-set-1" type="radio" />
    <label class="cr-label-img-3" for="select-img-3">3</label>
 
    <input class="cr-selector-img-4" id="select-img-4" name="radio-set-1" type="radio" />
    <label class="cr-label-img-4" for="select-img-4">4</label>
 
    <div class="clr">
</div>
<div class="cr-bgimg">
     <div>
      <span>Slice 1 - Image 1</span>
      <span>Slice 1 - Image 2</span>
      <span>Slice 1 - Image 3</span>
      <span>Slice 1 - Image 4</span>
     </div>
     <div>
      <span>Slice 2 - Image 1</span>
      <span>Slice 2 - Image 2</span>
      <span>Slice 2 - Image 3</span>
      <span>Slice 2 - Image 4</span>
     </div>
     <div>
      <span>Slice 3 - Image 1</span>
      <span>Slice 3 - Image 2</span>
      <span>Slice 3 - Image 3</span>
      <span>Slice 3 - Image 4</span>
     </div>
     <div>
      <span>Slice 4 - Image 1</span>
      <span>Slice 4 - Image 2</span>
      <span>Slice 4 - Image 3</span>
      <span>Slice 4 - Image 4</span>
     </div>
    </div>
<div class="cr-titles">
     <h3><span>TITULO 1</span><span>Subtitulo Contenido</span></h3>
     <h3><span>TITULO 2</span><span>Subtitulo Contenido</span></h3>
     <h3><span>TITULO 3</span><span>Subtitulo Contenido</span></h3>
     <h3><span>TITULO 4</span><span>Subtitulo Contenido</span></h3>
    </div>
   </section>
</div>
150:Si aumentas subira mas ariba el gadget y si disminuyes el numero bajara el gadget
10:Si aumentas se ira mas a la izquierda y si disminuyes se ira mas a la derecha 
right: Puedes cambiar por "  left   " que aora estara en el lado izquierdo y en ese caso el 10  sera lo contrario de lo que dije antes :3
Listo ,mucho codigo no?  el codigo es de tympanus alli lo tienen solo paginas web ,yo lo estoy pasando para bloggers para que la puedan usar   es un poco dificil  y cansa 


10 comentarios :

  1. *O* Oh por dios, que hermoso! <3
    Veré si lo pongo en mi blog, obviamente con tu créditos correspondientes Lunita, Gracias por el tuto :3

    ResponderEliminar
  2. Genial!!!Me ha encantado pienso en ponerlo en mi próximo diseño pero antes una pregunta....No se le puede poner links?Me encantaría tenerlo como cabeceramenu estaría bueno!BESOS!

    ///Larita Itzumiki/// (todocreadoparati)

    ResponderEliminar
    Respuestas
    1. Probare si es que se puede :3 un rato ,te aviso en tu blog n.n

      Eliminar
    2. Lo siento lo intente pero no sale con enlace u-u ¡ Capas luego encuentre algo para que se pueda poner con enlace n.n¡

      Eliminar
    3. Ok!Gracias luna!Esto se puede reemplazar para poner como cabecera no?Porque no sé si las pc con las que he probado para ponerla como cabecera no me funcionan es como que no es compatible alguna plantilla con la cual se puede usar que hayas usado tu??Besos!

      Eliminar
    4. o.o no sale el slider? aw pero debes usar una cabecera no importa tranparente pero de una altura buena que sea casi mismo tamaño del slider owo
      Mi plantilla es Travel

      Eliminar
  3. muy lindo, podrias hacer un slider de las entradas ?

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥