[TUTORIALES]Cbox en la cabecera---By:dayi!

////ACTUALIZANDO TUTORIALES////

*Esta tutorial se actualizo,El  29 de diciembre del 2013*

Hello!Como estan?Bueno yo aqui con ganas de cambiar el tema del blog,en vez que sea de hyunseung que sea de algun anime,no pienso cambiar los colores y nada de eso..solo el tema!!Pero bueno,hago esta entrada hoy por que quizas el lunes(nooooo!!!)Este ocupada---notan?digo eso y no lo cumplo---Pues hoy les traigo una tutorial que se que les gustara....es sobre el cbox de la cabecera!Es un efecto raro,pero llamativo para cualquier blog...Les aviso que sera un poquito largo,asi que cuidado con los codigos..empecemos:

1.Primero vamos a plantilla>>>ediccion HTML>>>(recuerda abrir tus pestanas)>>>y buscas esto: </style>

Abajo de </style> pega esto:

.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: 320px;
 height: 320px;
 display: inline-block;
 margin: 20px;
}
.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);

 -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{
 background-image: url(URL PORTADA);
background-position:50% 50%;
background-size:500px;
}
.ch-info {
 position: absolute;
 background: url(URL FONDO) D9E8FC;background-position:50% 50%;
 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-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;
}

EDITA:

Donde dice"URL PORTADA"Hay pondras las portada de tu cbox..por ejem:"una imagen editada"

Donde dice:URL FONDO:hay pondras la url del fondo de tu circulo!por ejem:"yo tengo la misma foto"

2.Ahora vamos a Diseno>>>Anadir un gadget>>>HTML/javacrisp y pegas esto:

<div style="font-weight: normal; position: absolute; margin-top: -790px; right: 110px;"><ul class="ch-grid">
<li> <div class="ch-item ch-img">
<div class="ch-info">
<center>
<div style="margin-top:80px; width:270px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnaecBV7hpiXwhOIerjjZ3ZSOqz4T5pCD89EBWkj9a8Rs1zdtVfsKUFWXI0nkoE-ltydKJey6qXnbVlaLaUJuLu-OX7JjkaaO-A93FqLXDn6jNtOp2zhLHubVtpIP5JN-HdMVAEXxMuHGP/s1600/bodybg.gif); border-radius:10px;">
<br/>
AQUI CODIGO DE TU CBOX
</div>
</center>
</div>
</div>
</li>
</ul></div>

NOTAS Y EDITA:

Donde dice:AQUI CODIGO DE TU CBOX"hay pondras ese codigo,en ese espacio!

790:Mientras mas lo aumentes mas subira,si lo disminuyes ser ira mas abajo.(cuidado y no borres el signo -)

110:si lo aumentas ira a la izquierda,si disminyes ira a la derecha.

De preferencia las medidas de tu cbox"Width:200xHeight:200"

Guardas y ya!

Vieron es facil y rapido!

Espero que les guste^^

Deja tu comentario!

Les dejo besos de cherryT.O.P

Att:Lee rae mi{dayi}

"POR FAVOR DAR CREDITOS SI USA O DAS USO DE ESTE TUTORIAL,YA QUE SE ME HIZO ALGO DIFICIL HACERLO...TE LO PIDO DE FAVOR,DA CREDITOS..."