Tutorial : Circle Grid //Tipo 1 ♥ Part3

Este es un efecto Amigas  combinado con  Mini Circle Grid ,bueno primero les dejo la

Vista previa 

TUTORIAL EFECTO AMIGAS MINI 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>

/** 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 AVATAR AMIGA);
}
.minicicle-img-2 {
 background-image: url(URL DE LA IMAGEN AVATAR AMIGA);
}
.minicicle-img-3 {
 background-image: url(URL DE LA IMAGEN AVATAR AMIGA);
}
.minicicle-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;
}
.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: 0px;/*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

<marquee behavior="alternate" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5">
<div class="minicicle-grid">
     <li>
      <div class="minicicle-item minicicle-img-1">
       <div class="minicicle-info">
        <h3>Nombre</h3>
        <p>BLOG:<a href="Url de blog">Nombre de blog</a></p>
       </div>
      </div>
     </li>
     <li>
      <div class="minicicle-item minicicle-img-2">
       <div class="minicicle-info">
         <h3>Nombre</h3>
        <p>BLOG:<a href="Url de blog">Nombre de blog</a></p>
       </div>
      </div>
     </li>
     <li>
      <div class="minicicle-item minicicle-img-3">
       <div class="minicicle-info">
         <h3>Nombre</h3>
        <p>BLOG:<a href="Url de blog">Nombre de blog</a></p>
       </div>
      </div>
     </li>
    </div></marquee>

Si quieren agregar mas amigas solo tienes hacer lo siguiente :
Debajo de :

.minicicle-img-3 {
 background-image: url(URL DE LA IMAGEN AVATAR AMIGA);
}

Agregas :

.minicicle-img-4 {
 background-image: url(URL DE LA IMAGEN AVATAR AMIGA);
}
.minicicle-img-5 {
 background-image: url(URL DE LA IMAGEN AVATAR AMIGA);
}

y asi ,la cantidad que desees solo cambias el numero 5 a 6 luego 7 ...
Luego despues de </li>
Agregas :

<li>
      <div class="minicicle-item minicicle-img-4">
       <div class="minicicle-info">
         <h3>Nombre</h3>
        <p>BLOG:<a href="Url de blog">Nombre de blog</a></p>
       </div>
      </div>
     </li>
<li>
      <div class="minicicle-item minicicle-img-5">
       <div class="minicicle-info">
         <h3>Nombre</h3>
        <p>BLOG:<a href="Url de blog">Nombre de blog</a></p>
       </div>
      </div>
     </li>

No olvides los numeritos cambiar :3
Bueno y si no quieres que este en desplazamiento solo borra los siguiente codigos :

<marquee behavior="alternate" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5">

y el ultimo codigo

</marquee>

Listo :3 aw aw aw toy cansada ;u; ¡ falta la ultima parte y tengo que hacer el tipo 2
Codigo:tympanus