[TUTORIAL/HTML] Personaliza Título de los gadgets(1) | Todo lo básico | ClubKawaiiBlog

¡Hola Hola Kawaii's! 

Hoy vengo bien designeerr 7u7r
¿Cómo han estado? Espero que super bien por qué yo pues , salí ya de vacaciones
y a descansar :3
Me han cambiado de turno de escuela y pues tengo que rehacer tareas que 
es algo fatigoso que hacen mis vacaciones algo macabrosas D:
Aunque cada vez me va quedando menos tarea ,  y me dejo de atormentar con
que tengo que terminarla ..
últimamente me la he pasado haciendo plantillas , pero no las he usado aquí
así que pienso traer un diseño para descargar:D
Andaba buscando que tutorial traer aquí del HTML 
& pues busqué algo fácil y ...

Les traigo el tutorial de personalizar el título de los gadgets

De una forma fácil & Bonita ,
Además que te daré lo básico para su personalización ..

¡Empecemos! 

Para la personalización hay que añadir el CSS osea vayámonos a 

Plantilla -> Editar HTML -> Damos clik en cualquier lado de la cajita que hay 

Presionamos CTRL + F y nos aparecerá un recuadro dónde pondremos el 

siguiente código ; 

]]></b:skin>

Justo antes de ese código vamos a pegar este código ;

.sidebar h2{ /**Adornar el título del gadget*/background: #e3fcf8; /*Color de fondo*/border-top: 3px dashed #FFBAE6; /**Borde Superior**/border-bottom: 1px solid #FFBAE6; /**Borde Inferior**/border-left: 1px solid #FFEABA; /**Borde Izquierdo**/ border-right: 1px solid #FFEABA; /**Borde Derecho**/

} 

Lo único que queda es personalizar :
Morado Color  justo después del "#" Ponemos el color HTML que queremos en este ...
Aquí te dejo URL dónde encuentras código de colores en HTML *CLIK AQUÍ PARA IR*
Rojo TIPO DE BORDE Así vamos con el borde  Puedes modificar el tipo de borde ;

Amarillo tamaño de bordes en pixeles 


& ¡Listo espero le hayas entendido ewe
le damos guardar plantilla y sha UwU
 Es lo más básico hasta ahora
Nos vemos en el próximo tutoriaal Byeeee♥

Menu Vertical Cute&Kawaii Elegante (DESPLEGABLE&FLOTANTE)!♥

Hi!Kawaii's ¿Como han estado? Yo aqui ando xD *  Hoy les traigo un tutorial de Poner un Menu Vertical . Es muy facil ! Su nombre lo dice es desplegable :-Lo quitas & Lo pones Facilmente ;3
Aparte es Flotante  ! Lo podran utilizar para subsecciones ¿NO?:P Ami me parece mejor asi o cada quien su gusto ... Es este ; 

Esta Elegante como eh dicho xD ... Oki Pues empezemos ;'3

Solo es cosa de ir a -> DISEÑO->AÑADIR GADGET -> HTML Javascript & Copian& Pegan este siguiente codigo ;

<style>.raejun{width:60px;padding:15px;margin-top:15px;box-shadow:2px 2px 4px #DFDFDF;background:#eee;font:8px tt; text-align:center;Text-decoration:none;color:#888;text-transform:uppercase;display:block;-webkit-transition:All 0.5s ease;-moz-transition:All 0.5s ease;-o-transition:All 0.5s ease;border-left:0px solid #000;-webkit-border-top-right-radius: 333px;-webkit-border-bottom-right-radius: 333px;-moz-border-radius-topright: 333px;-moz-border-radius-bottomright: 333px;border-top-right-radius: 333px;border-bottom-right-radius: 333px;}.raejun:hover{width:66px;border-left:10px solid #aaa;}@font-face {font-family:tt !important;src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;}</style><div style="position:fixed; top:100px;left:0px;width:100px; color:#aaa;">

<a class="raejun" href="LINK ">titulo</a>

 <a class="raejun" href="LINK ">titulo</a>    <a class="raejun" href="LINK ">titulo</a><a class="raejun" href="LINK ">titulo</a></div>

ROSA; URL DE DONDE QUIERES QUE SE DIRIJAN  
AZUL;TITULO DE LA SECCION O LO QUE QUIERES QUE LLEVE ;9
NARAJA; Edita los colores en codigos HTML
  

NOTA ;
-QUIERO AGREGAR MAS SECCIONES ... ¡Que hago?
Entre ; (Es el codigo de arriba en Morado entre >&<

</a>AQUI PEGAN CODIGO XD</div>

PEGAN EL SIGUIENTE CODIGO ;

<a class="raejun" href="LINK ">titulo</a> 

 & Listo han terminado & siguen agregando mas  si deseean x3 Espero que les haya Gustado &
claro se le dan créditos al autor del menú (que no soy yo para que no hayan problemas) 
-> http://kawaiiososekai.blogspot.com/
Chaito♥

[Tutorial]Como Poner un gadget de Creditos de Plantilla ;3

Konichiwa Kawaii's jajajaj xDD . Hoy ando de Humor x33 Bueno siempre , anduve viendo  que publicar & vi este gadget de creditos de la Plantilla ;
 -Dije hoy que tengo todo mi dia Libre subiré todos los Tutos que pueda x3
-Entoonces me llego a la mente lo de poner en mi plantilla el gadget de créditos de plantilla
pero no lo pude hacer pos Por que ; El HTML Se travo xD.
Entonces dije ; Mientras se compone hare la entrada xD [Mucho xD]
Aquí empezamos ; el gadget de Creditos de Plantilla es este ;

& Al pasar el Cursor Queda Asi ;

Bueno entonces Empezemos el Tutorial :33

1ºPASO; - Nos vamos a la Sección Plantilla & das clik en editar HTML

Pulsas CTRL + F Te saldrá una cajita donde Buscas el Siguiente Codigo ;  ]]></b:skin>

 Asi nos ira quedando detrás de  ]]></b:skin> Pondremos el Siguiente código ;

/*Credits
----------------------------------------------- */
@font-face{font-family:tinytots;src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf')}
.view {
cursor: pointer;
height: 124px; /* Alto de la imagen */
margin: 1px;
overflow: hidden;
position: relative;
text-align: center;
width: 230px; /* Ancho de la imagen */
display: inline-block;
}
.view img {
display: inline-block;
position: relative;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
opacity: 1;
filter: alpha(opacity=100);
}
.view:hover img {
-moz-transform: rotate(620deg) scale(0);
-webkit-transform: rotate(620deg) scale(0);
-o-transform: rotate(620deg) scale(0);
-ms-transform: rotate(620deg) scale(0);
transform: rotate(620deg) scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.view .mask {
background-color: #9982ad; /* Color de fondo */
height: 124px;
left: 0;
position: absolute;
overflow: hidden;
top: 0;
width: 200px;
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.view:hover .mask {
-moz-transform: translateY(0px) rotate(0deg);
-webkit-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);}
.view h4 {
background-color: #ffffff; /* Color de fondo del título */
opacity: 0.8;
color: #75648b; /* Color del texto del título */
text-align: center;
position: relative;
font-family: handy;
text-transform: uppercase;
font-size: 8px;
margin: 9px 0 0 0;
padding: 5px 0;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover h4 {
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view p {
color: #fff; /* Color del texto/descripción/etc xD */
font-family: tinytots;
text-transform: uppercase;
font-size: 8px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover p {
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view a.info {
background-color: #ffffff; /* Color de fondo del menú */
font-family: tinytots;
border-radius: 5px;
box-shadow: 0 0 2px #e4e2e5, 0 0 5px #e4e2e5 inset;
color: #000; /* Color de texto del menú */
display: inline-block;
padding: 2px 10px;
text-decoration: none;
margin-top: 8px;
font-family: handy;
font-size: 8px;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view a.info:hover {
box-shadow: 0 0 5px #968ca3;
}
.view:hover a.info {
font-family: tinytots;
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}

Le damos en Guardar
Nos vamos a Diseño ; --> Añadir gadget --> HTML JAVASCRIPT
& COLOCAS EN LA CAJITA QUE APARECE EL SIGUIENTE CODIGO  
 <div class='view img'><img src='Imagen de los creditos' style='border-top: #69efff solid 0px;border-bottom: #ffb1dc solid 0px;border-right: #ffb1dc solid 0px;border-left: #69efff solid 0px; -Moz-border-radius: 10px; border-radius: 10px;'/>
<div class='mask'>
<h4>CREDITOS</h4>
  <p>Designer: <a class='info' href='url del blog del diseñador'>Nombre del Autor</a><br/>Images: <a class='info' href='url del sitio de las imagenes'>Nombre del sitio</a><br/>Others: <a class='info' href='url del blog'>X</a> <a class='info' href='url del blog'>X</a> <a class='info' href='url del blog'>X</a></p>
</div></div></div>
---------------------------------------------------------------------------------------------------
& Listo ya hemos terminado recuerda colocar la imagen de créditos ; Poner
el url del diseñador etc.
Espero que te haya Gustado este tutorial :333 Nos vemos en el Proximo Chaito♥♥
Credditos ;C&L

[TUTORIAL] Poner un Boton Up (Deslizante & aparece abajo )

Hello Kawaii's ... ¿C0m0 Estan? Yo Bien Bien , aquí & Ustedes ;3 aparte ando entusiasmada por que mañana es la 1º Reseña xDD jajajaj ando Organizando Todoo ;33
Bueno aquí el Tutorial es un Boton Up ! que lleva hacia arriba pero se desliza ; No es estilo Sencillo, aparece desde abajo  .... Los botones sencillos son esos que están todo el tiempo en la esquina & cuando le das clik te aparece arriba de la nada pero no desliza ¬¬' xD

1º- Ve a Plantilla -> editar HTML -> CTRL+F--> TE APARECE UNA CAJITA DONDE BUSCARAS ; </head>

& pega antes de el  ; el siguiente código .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

Ahora en la misma cajita que tenemos al presionar CTRL +F ; BUSCAMOS </body>

& pega antes de el el siguiente código ;

 <div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
//]]>
</script>
& Busca el siguiente código ahora ; ]]></b:skin>
& PEGA ANTES DE EL ESTE CODIGO ;

/* Botón Ir Arriba

----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 250px; /* Distancia desde abajo */
right: 5px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(Url de tu botón) no-repeat center center;
} 

AHORA SOLO EDITA ; el ancho de botón & alto esto es la medida de la imagen del botón & coloca la URL DEL BOTON

-----PROXIMAMENTE TRAERE BOTONES  :33 -----
Espero que les haya gustado nos vemos en el próximo Tuto adiós! :'3