Tutorial : Circle Grid //Tipo 1 ♥ Part2

Uf  me duele mi espaldita ;u; por tanto estar en la computadora ,bueno les traigo la siguiente parte >.< ¡ aqui la 


TUTORIAL DE MINI CICLE GRID
Para Plantilla Basica o Blogger: Ir a Plnatilla/Editar HTML / Presionas CTRL+F y colocas en la cajita que te aparecio ]]></b:skin> al encontrar colocas el siguiente codigo antes de ]]></b:skin>
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo antes de </style>
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )

/** Mini Cicle Grid **/
.minicicle-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow:
  inset 0 0 0 16px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);/*Tamaño de la transparencia del circulo blanco*/

 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}
.minicicle-img-1 {
 background-image: url(Url de la imagen Principal 1);
}
.minicicle-info {
 position: absolute;
 background:rgba(2112042470.8);/*Color de fondo al pasar el cursor*/
 width: inherit;
 height: inherit;
 border-radius: 50%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 -webkit-backface-visibility: hidden;
}
.minicicle-info h3 {
color: #fff;/*Color de la letra*/
text-transform: uppercase;
letter-spacing: 2px;
font-size: 11px;
margin: 0 10px;
padding: 15px 0 0 0;
height: 15px;
 font-family: 'Open Sans', Arial, sans-serif;
text-shadow:  0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); /*Color de sombra en el texto*/}
}
.minicicle-info p {
color: #fff;/*Color de texto*/
padding: 10px 5px;
font-style: italic;/*Font del texto*/
margin: 0 10px;
 font-size: 12px;/*Tamaño del texto*/
opacity: 0;
 -webkit-transition: all 1s ease-in-out 0.4s;
 -moz-transition: all 1s ease-in-out 0.4s;
 -o-transition: all 1s ease-in-out 0.4s;
 -ms-transition: all 1s ease-in-out 0.4s;
 transition: all 1s ease-in-out 0.4s;
}
.minicicle-info p a {
 display: block;
 color: #fff;/*Color del texto*/
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;/*Tamaño del texto*/
 letter-spacing: 1px;
 padding-top: 4px;
 font-family: 'Open Sans', Arial, sans-serif;/*Font del texto*/
}
.minicicle-info p a:hover {
 color: #fff222;/*Color del texto al pasar el cursor*/
}
.minicicle-item:hover {
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,0.1),
  0 1px 2px rgba(0,0,0,0.1);
}
.minicicle-item:hover .minicicle-info {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}
.minicicle-item:hover .minicicle-info p {
 opacity: 1;
}
.minicicle-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}
.minicicle-grid:after,
.cicle-item:before {
 content: '';
    display: table;
}
.minicicle-grid:after {
 clear: both;
}
.minicicle-grid li {
 width: 100px;/*Ancho del circle*/
 height: 100px;/*Altura del circle*/
 display: inline-block;
 margin: 5px;/*Separacion de los circle*/
}
Personaliza:
Para personalizar el fondo al pasar el cursor es este codigo
 background:rgba(2112042470.8);/*Color de fondo al pasar el cursor*/
El codigo 2112042470.8 algunos no saben que es , y les digo que es un color con opacidad medio transparente ,les esplico :
Alli escogen cualquier color que gusten
Yo escojo el rosado y para cambiar 
2112042470.8 por el color rosado pero con opacidad ago lo siguiente 
vamos donde dice R G B que lo puse en cuadro rojo lo remplazo en 211 por 255 204 por 196 y 247 por 196
0.8 :Opacidad
y queda asi :
background:rgba(255,196,1960.8);/*Color de fondo al pasar el cursor*/
Y lo guardan y veran que ahora el fondo sera el color que eligieron pero con opacidad 
Si es mucho problema entonces hagan lo siguiente : 
El codigo rgba(2112042470.8de 
 background:rgba(2112042470.8);/*Color de fondo al pasar el cursor*/
lo cambian por 
 background:#FFC4C4;/*Color de fondo al pasar el cursor*/
y lo cambian por el color que deseen .
Si quieren que sea con una imagen el fondo lo cambian ese codigo asi:
 background-image: url(Url del fondo);
Bueno y por ultimo pueden borrar este codigo si es que no le gusta la sobra del Texto 
text-shadow:  0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); /*Color de sombra en el texto*/
Personaliza el Tamaño Del circle
Si quieren que sea mas grande el circulo solo aumente los numeros y si lo quieren mas pequeños disminuye los numeros:
width: 220px;/*Ancho del circle*/
 height: 220px;/*Altura del circle*/
Listo ahora sigamos con lo ultimo :
Para Plantilla Basica o Blogger: Ir a Diseño/Añadir gadget/HTMLJavacript y pegas el siguiente codigo
Para Plantilla Clasica o Blogskin: Ir a su plantilla y pegar donde lo desee el  codigo
Escojan el que mas les guste :
EFECTO AUTORA 1
<div class="minicicle-grid">
     <li>
      <div class="minicicle-item minicicle-img-1">
       <div class="minicicle-info">
        <h3>Autora</h3>
        <p>BLOG:<a href="Url del blog">Nombre de blog</a></p>
       </div>
      </div>
     </li></div>
EFECTO AUTORA 2

 <div class="minicicle-grid">
<li><div class="minicicle-item minicicle-img-1">
       <div class="minicicle-info">
        <h3><a href="Url del blog">Nombre de blog</h3></a>
    <p>Mini Informacion</p>
       </div>
      </div>
     </li></div>
EFECTO REPRODUCTOR
<div class="minicicle-grid">
     <li>
      <div class="minicicle-item minicicle-img-1">
       <div class="minicicle-info">
        <h3>Musica</h3>
        <br>
        <center><object width="30" height="25"><param name="movie" value="http://www.youtube.com/v/7LG7puaC1CM?version=2&amp;autoplay=1&amp;hl=en_US&amp;color1=DACDBE&amp;color2=DACDBE" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/7LG7puaC1CM?version=2&amp;autoplay=1&amp;hl=en_US&amp;color1=C9B29F&amp;color2=DACDBE" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="30" height="25"></embed></object></center>
       </div>
      </div>
     </li>
    </div>
Mas informacion sobre el reproductor clic aqui al final esplica como personalizarlo los colores y mas .
Tambien pueden colocar otro codigo de otro reproductor solo borras 
<object width="30" height="25"><param name="movie" value="http://www.youtube.com/v/7LG7puaC1CM?version=2&amp;autoplay=1&amp;hl=en_US&amp;color1=DACDBE&amp;color2=DACDBE" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/7LG7puaC1CM?version=2&amp;autoplay=1&amp;hl=en_US&amp;color1=C9B29F&amp;color2=DACDBE" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="30" height="25"></embed></object>
y lo colocas dentro de <center>AQui tu reproductor </center>

PARA PONER CIRCLE EN LA CABECERA
Bueno como saben si quieren ponerlo en la cabecera este efecto vayan a este tutorial :
http://www.lunany-kawaii.com/2013/04/tutorialponer-gadgets-en-la-cabecera.html
y donde dice Aqui tu codigo de tu gadget lo remplazan por el codigo que les dije que lo pusieran en un gadget HTMLJavacript

Bueno eso es todo :3 seguire con la siguiente parte ♥
Codigo : tympanus

1 comentario :

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