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 )
(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(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: 5px;/*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 :
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 codigoPara 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&autoplay=1&hl=en_US&color1=DACDBE&color2=DACDBE" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/7LG7puaC1CM?version=2&autoplay=1&hl=en_US&color1=C9B29F&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&autoplay=1&hl=en_US&color1=DACDBE&color2=DACDBE" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/7LG7puaC1CM?version=2&autoplay=1&hl=en_US&color1=C9B29F&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>
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
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
por dios!!que chulo!!
ResponderEliminarsaludos~