Tutorial : Circle Grid //Tipo 1 ♥ Part1

Hola a todas >w< ¡ Hoy les traigo un efecto que les gustara demasiado *¬* y hay varios tipos ,este es el primer tipo¡ Es un efecto muy util ,se puede usar de varias formas ,bueno estoy algo cansada por lo cual estoy haciendo por partes ,lo que me canso mucho es hacer la vista previa y tenia que modificar los codigos,y aumentar , Bueno les dejo la Vista Previa :

Vista Previa  

TUTORIAL DE MEDIO CIRCLE 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 )

Primero 

.ch-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;
}
.ch-img-1 {
 background-image: url(URL DE LA IMAGEN PRINCIPAL 1);
}

.ch-info {
 position: absolute;
 background:rgba(211, 204, 247, 0.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;
}
.ch-info h3 {
 color: #fff;/*Color de la letra*/
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 22px;
 margin: 0 30px;
 padding: 25px 0 0 0;
 height: 40px;
 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*/}
.ch-info p {
 color: #fff;/*Color de texto*/
 padding: 10px 5px;
 font-style: italic;/*Font del texto*/
 margin: 0 30px;
 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;
}
.ch-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*/
}
.ch-info p a:hover {
 color: #fff222;/*Color del texto al pasar el cursor*/
}
.ch-item:hover {
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,0.1),
  0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}
.ch-item:hover .ch-info p {
 opacity: 1;
}
.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}
.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;
}
.ch-grid:after {
 clear: both;
}
.ch-grid li {
 width: 220px;/*Ancho del circle*/
 height: 220px;/*Altura del circle*/
 display: inline-block;
 margin: 20px;/*Separacion de los circle*/
}

Personaliza:

Para personalizar el fondo al pasar el cursor es este codigo

 background:rgba(211, 204, 247, 0.8);/*Color de fondo al pasar el cursor*/

El codigo 211, 204, 247, 0.8 algunos no saben que es , y les digo que es un color con opacidad medio transparente ,les esplico :

Van a http://html-color-codes.info/codigos-de-colores-hexadecimales/

Alli escogen cualquier color que gusten

Yo escojo el rosado y para cambiar 

211, 204, 247, 0.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 y 204 por 196 y 247 por 196

0.8 :Opacidad

y queda asi :

background:rgba(255,196,196, 0.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(211, 204, 247, 0.8) de 

 background:rgba(211, 204, 247, 0.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

<div class="ch-grid">
     <li>
      <div class="ch-item ch-img-1">
       <div class="ch-info">
        <h3>Titulo</h3>
 <center><div style="margin-top: -5px;width: 150px;background:#fff; border-radius:10px;text-align:center;padding:15px;opacity:0.8;height: 70px; overflow-x: hidden; overflow-y: scroll;" scrolling="auto">
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto TextoCodigo de musica,codigo de imagen,emoticones,etc  </div></center>
        <p>Mi Blog<a href="Url del blog">Nombre del blog</a></p>
       </div>
      </div>
     </li></div>

150:Ancho de la cajita de texto
70:Altura de la cajita de texto
fff:Color de fondo de la cajita ,Si quieres un fondo de una imagen cambia background:#fff; por

background-image: url(Url del fondo);

El codigo

<p>Mi Blog<a href="Url del blog">Nombre del blog</a></p>

si no te gusta puedes borrarlo :3 o si quieres poner algo abajo como un reproductor cambialo por :

<p>Aqui tu reproductor o lo que desees </p>

   

Si desees poner un menu Has lo siguiente 

El siguiente codigo lo borras :

<div style="margin-top: -5px;width: 150px;background:#fff; border-radius:10px;text-align:center;padding:15px;opacity:0.8;height: 70px; overflow-x: hidden; overflow-y: scroll;" scrolling="auto">
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto TextoCodigo de musica,codigo de imagen,emoticones,etc  </div>

lo remplazas por El codigo de tu menu (Aw entienden? esta parte? si no la entienden esto del menu me avisan por el comentario para hacer una notita de como hacerlo)

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 ,ya ustedes verán que le agregan o que no ,como deseen :3
Codigo : tympanus

Bueno estare asiendo la siguiente parte de minicircle x3 ya que si lo hago junto se van a marear de tanto codigo x.x jiji :3 hay no puse emoticones por que si lo hago me faltara tiempo para continuar ♥