¿Sabías qué?

En su juventud Walt Disney fue despedido del diario Kansas City Star, según indican “por su falta de creatividad“. Años más tarde la compañía Disney compró la ABC, dueña de este diario.

Walt Disney siempre decía:

“Prefiero entretener a la gente con la esperanza de que aprendan algo que enseñarles con la esperanza de que se entretengan“.

Walt Diney

❤Imágen sepsi del dia

Ultimo Anime Disponible

La última y más renovada entrega de sailor moon ya está disponible en el blog para ver directo y/o descargar la serie completa, no te pierdas sailor moon con una nueva calidad de animación muy superior, nuevos soundtrack que te harán apegarte más a la historia de Naoko Takeuchi

Consejo del dia

C-Box en la cabecera



  Hola gente bonita! les voy a traer un Tutorial a pedido de Ana en el C-box, y bueno les voy a enseñar a como poner el Cbox en la cabecera principalmente, bueno básicamente si seguimos estos pasos podemos poner lo que se nos ocurra en la cabecera del blog pero en esta ocasión prefiero centrarme en el Cbox.


Creando el CBOX


1Paso) Antes que nada tenemos que crear un C-box



2Paso) Después nos dirigimos a 'Look &Feel'' Colors and Font
y editaremos allí los colores de nuestro CBOx, puedes hacerlo como mejor te parezca
el Cbox de mi cabecera está transparente, para quitar algunos colores, simplemente borra el código del color.


3Paso) Las medidas, vamos a Look & Feel otra vez y elejiremos la opcion de Layout Options
en ella abajo vienen las medidas, Width: Anchura Height Altura 
Form Height: Es la parte en donde escribiremos antes de enviar el mensaje, déjalo así.
Mensajes: No. of Message to display: (Numero de mensajes que enseñar en el Cbox)



4Paso) Una vez terminado todos estos pasos, lo que haremos será ir a la pestaña 'Publish' y copiar nuestro código.




  Bien ahora puedes simplemente crear un nuevo Widget, de html y ponerlo junto a tus widgets.. O ponerlo en la cabezera.

                          CBOX en la cabecera 
                                              Versión 1

 Lo que haremos será ir a Plantilla, Editar plantilla en Html y apretaremos Ctrl+F en el buscador escribiremos:


<div id='header'> a veces viene como <div id='header1'> pero por lo general este código viene escrito como <div id='header'> cualquier duda me la dejas aquí si te a costado encontrarlo.




Bueno justo debajo de </b:section>  pegaremos el siguiente código:

<div style='position:absolute; top:150px;left:100px;background: #000; padding: 3px; width: 180px; height: 250px; background: url() no-repeat;'>
AQUI PEGA EL CÓDIGO DE TU CBOX GENERADO ANTERIORMENTE
</div>

Parámetros
Top: (Define que tan alto del top de tu página irá el Cbox, mientras mayor sea el numero más abajo de la cabecera irá, mientras menor el numero más pegado al top irá.)
LEFT: (Define que tan a la izquierda de tu pantalla irá, mientras menor sea el número más apegado a la izquierda estará, mientras mayor sea el numero más alejado de la pared izquierda irá)
Width: (Define el ancho )
Heigth: (Define la altura)

Puedes ponerle un Background en medio del parentesis, fijate que sea del tamaño de tu Cbox, o puedes dejarlo tal cual y probar el siguiente ejemplo que te daré. 


Cbox en la cabecera circular


                                           Versión2
Los créditos de esta manera circular son de wanaseoby Pero yo les enseñaré a como ponerlo en la cabecera. es el primero de este Preview


Lo que haremos entonces será

Apretamos Ctrl+f y ponemos en el buscador:  ]]></b:skin> 
y justo arriba pegaremos el siguiente código: 



.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .ch-thumb { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: absolute; box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5); -webkit-transform-origin: 95% 40%; -moz-transform-origin: 95% 40%; -o-transform-origin: 95% 40%; -ms-transform-origin: 95% 40%; transform-origin: 95% 40%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ch-thumb:after { content: ''; width: 8px; height: 8px; position: absolute; border-radius: 50%; top: 40%; left: 95%; margin: -4px 0 0 -4px; background: rgb(14,14,14); background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); box-shadow: 0 0 1px rgba(255,255,255,0.9); } .ch-info { position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #c9512e url(http://pastelpatterns.com/small/smallpattern-11.png); box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05); } .ch-info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 18px; margin: 0 60px; padding: 22px 0 0 0; height: 85px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: #333; width: 80px; height: 80px; background: rgba(255,255,255,0.3); border-radius: 50%; color: #fff; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 24px; margin: 7px auto 0; font-family: 'Open Sans', Arial, sans-serif; opacity: 0; -webkit-transition: -webkit-transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; -moz-transition: -moz-transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; -o-transition: -o-transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; -ms-transition: -ms-transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; -webkit-transform: translateX(60px) rotate(90deg); -moz-transform: translateX(60px) rotate(90deg); -o-transform: translateX(60px) rotate(90deg); -ms-transform: translateX(60px) rotate(90deg); transform: translateX(60px) rotate(90deg); -webkit-backface-visibility: hidden; } .ch-info p a:hover { background: rgba(255,255,255,0.5); } .ch-item:hover .ch-thumb { box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -o-transform: rotate(-110deg); -ms-transform: rotate(-110deg); transform: rotate(-110deg); } .ch-item:hover .ch-info p a{ opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); }.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(http://25.media.tumblr.com/tumblr_mcq4chpZRN1qfqm2lo1_500.jpg); background-position:50% 50%; background-size:450px; } .ch-info { position: absolute; background: url(http://25.media.tumblr.com/tumblr_lyjn8soO2W1ro1s33o1_500.jpg) 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-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; }


Ahora buscaremos <div id='header'> y justo abajo de </b:section> pegaremos el siguiente código.
copia y pega el código de tu cbox en 'CODIGO DEL CBOX' no lo olvides! :o


<div style='position:absolute; top:150px;left:100px;background: #000; padding: 3px; width: 180px; height: 250px; background: url() no-repeat;'><ul class="ch-grid">
<li><div class="ch-item">
<div class="ch-info">
<p>
<center>
<div style="margin-top:50px; width:270px;background:url(http://imageshack.us/a/img4/1336/q9bd.jpg); border-radius:10px;">
<br/>
CODIGO DEL CBOX
</div>
</center>
</p>
</div>
<div class="ch-thumb ch-img">
</div>
</div>
</li>
</ul></div> 

Cbox en la cabecera circular

versión 3



Los créditos de esta manera circular son de Wanaseoby Pero yo les enseñaré a como ponerlo en la cabecera. es el primero de este Preview


Lo que haremos entonces será

Apretamos Ctrl+f y ponemos en el buscador:  ]]></b:skin> 
y justo arriba pegaremos el siguiente código:

.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(http://25.media.tumblr.com/tumblr_m7qa9yxlUR1r5ei3ho1_500.jpg);
background-position:50% 50%;
background-size:500px;
}
.ch-info {
 position: absolute;
 background: url(http://25.media.tumblr.com/tumblr_lyjn8soO2W1ro1s33o1_500.jpg) 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;
}


Ahora buscaremos <div id='header'> y justo abajo de </b:section> pegaremos el siguiente código.
copia y pega el código de tu cbox en 'CODIGO DEL CBOX' no lo olvides! :o

<div style='position:absolute; top:150px;left:100px;background: #000; padding: 3px; width: 180px; height: 250px; background: url() no-repeat;'><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/>
CODIGO DEL CBOX</div>
</center>
</div>
</div>
</li>
</ul></div>



    Eso es todo de momento si buscas tutoriales buenísimos te recomiendo la página de WANASEOBY ALLÍ ENCONTRARÁS LO QUE NECESITES, LO MALO ES QUE NO ESTÁ EN ESPAÑOL :( saludos! ^^

A U T H O R - B O X ~ 書かれました

C-Box en la cabecera fue escrito por Akari Ackerman el dia 20 noviembre 2013 y 0 personas han comentado

¿Que piensas de este articulo?

Haznos saber tu opinión ¡Comenta!

 

0 comentarios :

Publicar un comentario

Sé feliz inspirate y escribe una bonita respuesta ♥..( ◕ ᴥ ◕ )