[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(http://4.bp.blogspot.com/-D02-ZXrZuVU/TulVh1l88UI/AAAAAAAACWU/ktMgYgBnbN0/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..."

23 comentarios:

  1. dayi eta muy lindo, pero... y si yo lo quiero en la sidebar como lo hago?

    ResponderEliminar
    Respuestas
    1. A pues es super facil,solo cambias el segundo codigo^^es decir sigues el primer paso y luego al siguiente codigo le quitas esto:

      style="font-weight: normal; position: absolute; margin-top: -790px; right: 110px;">

      y ya!!
      espero que te sirva!
      si tienes otra duda hazmelo saber*O*
      saludos!

      Eliminar
  2. Muy buen tuto ;) y el nuevo tema esta muy kawaii >.<

    Muchos Saludos y Besos!!

    ResponderEliminar
  3. esta liiiindo *o*.... la pereza me consume lo praticare para un blog de pruebas ^^ gracias muy buen tuto~♥

    ResponderEliminar
  4. wwwoooow
    muy mono l cbox en la cabeCeRa :DDD
    100pre eh adorado ese truco solo que no me gusta colocar un cbox
    porque siento que todos comentan hay menos en las entradas ¬¬

    ResponderEliminar
    Respuestas
    1. Uhh yo lo pongo por ponerlo..pero tienes razon..
      saludos!

      Eliminar
  5. amo este tuto me gustaria probarlo en un proximo diseño :D

    ResponderEliminar
  6. Muy lindo y extraño!! jajajaja me encanta!

    ResponderEliminar
  7. ooohh que hermoso tu new diseñoooo!!
    se ve mas colorido!!
    adoro cuando se ve muy colorido =)

    ResponderEliminar
  8. Buen tutorial! Verdaderamente me preguntaba cómo hacían eso del cbox! Pero no sé si quedará bien en mi blog xD Estuve buscando efectos y he colocado algunos xD
    Saludos! :D

    ResponderEliminar
  9. No encuentro el style en mi plantilla :_
    Sabés cómo hacer para colocar otro tipo de gadgets en la cabecera?

    ResponderEliminar
    Respuestas
    1. bueno pues solo copia el segundo codigo y pegalo en un gadget!!y ya!
      y lo editas!

      Eliminar
    2. Aún no puedo con el gadget solo :(

      Eliminar

Puedes dejar cualquier tipo de comentario(*≧m≦*)Pero si el comentario no es de gusto del blog sera borrado..
No insultes.
No spam(;¬_¬)
Si tienes algo que decirme privado:
dayi123466@gmail.com