Menú acordeon con CSS3

Waaa tenia este tutorial pendiente! bueno disculpen mi pereza falta de tiempo ¡xD!

Primero vamos a editar la plantilla, a colocar el css:

Dashboard Plantilla Editar HTML

Vamos a pegar este código debajo de < head >

<br /> <style> .ac-container{ width: 400px; margin: 10px auto 30px auto; text-align: left; } .ac-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); } .ac-container label:hover{ background: #fff; } .ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #c6e1ec; color: #3d7489; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } .ac-container label:hover:after, .ac-container input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px; background: transparent url(../images/arrow_down.png) no-repeat center center; } .ac-container input:checked + label:hover:after{ background-image: url(../images/arrow_up.png); } .ac-container input{ display: none; } .ac-container article{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; height: 0px; position: relative; z-index: 10; -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container article p{ font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } .ac-container input:checked ~ article{ -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; transition: height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); } .ac-container input:checked ~ article.ac-small{ height: 140px; } .ac-container input:checked ~ article.ac-medium{ height: 180px; } .ac-container input:checked ~ article.ac-large{ height: 230px; } </style><br />

En el css, se cambian las propiedades del menú, ya sea ancho, alto, color, bla, bla... :D, asi que alli es donde deben dirigirse para cambiarlo y decorarlo de la forma que mas les guste♥. {para los que no saben •u•}

Segundo vamos a colocar el gadget:

Dashboard Diseño Añadir un Gadget HTML/Javascript

<br /> <section class="ac-container"><br /> <div> <input id="ac-1" name="accordion-1" type="checkbox" /><br /> <label for="ac-1">About us</label><br /> <article class="ac-small"><br /> <p> Some content... </p> </article><br /> </div> <div> <input id="ac-2" name="accordion-1" type="checkbox" checked /><br /> <label for="ac-2">How we work</label><br /> <article class="ac-medium"><br /> <p> Some content... </p> </article><br /> </div> <div> <!--...--></div> </section><br /> <br />

Listo, esos son los códigos que necesitan para tener un menú tipo acordeon :), esto lo saque de codrops, es una super página para códigos CSS3♥

Crea un Gif en Photoshop *u*

Koni!!♥

Quieren crear un botoncito gif para su blog {or something like} ? pues este es el post para ti *---*

Espero que este bien explicado TuT, ~chu♥

Programa: Adobe Photoshop CS5 |

Buscador en la cabecera del blog

Holis!! poner el buscador es muy sencillo ♥ 

Dashboard Plantilla Editar HTML

Con Crtl + f  busca por el siguiente código:

<b:widget id='Header1' locked='true' title='*recursos kawaii* (cabecera)' type='Header'/> </b:section>

Donde dice title='*recursos kawaii* deben colocar el nombre del blog si no, no les aparecera :).
 

Ahora, debajo de </ b:section> pega esto: 

<div style='position:absolute; top:60px;left:50px;'> <form action='/search' id='searchthis' method='get' style='display:inline;'> <input id='search-box' name='q' type='text'/> <input id='search-btn' type='submit' value='Buscar'/></form> </div>

Cambiando los valores del style {el top y el left}, cambias la posición del buscador dentro de la cabecera asi lo acomodas a tu gusto y además para que concuerde con el diseño de tu imagen *O*. Eso es todo!.

Personalizarlo     ♥ 

Debajo de < head> {copia y pega}

<style> #search-btn { background-color:#A9D0F5; color:#FFFFFF; margin:0; font:bold 14px Tahoma; border:0; } #search-btn:hover { cursor:pointer; background-color:#2E9AFE; } #search-box { color:#2E9AFE; margin:0; font:bold 12px Arial; border: 1px solid #CEE3F6; width:140px; } </style>

Menu tooltips with CSS3

Hola hola!! les traigo el pequeño tutorial para poner esta clase de menú en su blogcito :).

Por favor ingresen a la página: Codrops, dan click en el botón DOWNLOAD SOURCE y les descargara un rar con los códigos.

Abran la carpeta llamada css, oki en la página pudieron apreciar que hay un botoncito llamado view demo, según el estilo de menú que quieran eligan {en la carpeta de css} el código que necesiten :), pues yo elegi el primero (con el nombre style, el que tenia mi anterior diseño), al darle click se abrira con el bloc de notas.

Ahora vamos a editar nuestra plantilla ^-^:

Dashboard Plantilla Editar HTML

 Después de < head> peguen este código:

<style> .tt-wrapper{ padding: 0; width: 435px; height: 70px; margin: 80px auto 30px auto; } .tt-wrapper li{ float: left; } .tt-wrapper li a{ display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; background: transparent url(../images/growcase_the_social_gunman_icons.png) no-repeat top left; text-indent: -9000px; position: relative; } .tt-wrapper li .tt-gplus{ background-position: 0px 0px; } .tt-wrapper li .tt-twitter{ background-position: -68px 0px; } .tt-wrapper li .tt-dribbble{ background-position: -136px 0px; } .tt-wrapper li .tt-facebook{ background-position: -204px 0px; } .tt-wrapper li .tt-linkedin{ background-position: -272px 0px; } .tt-wrapper li .tt-forrst{ background-position: -340px 0px; } .tt-wrapper li a span{ width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: 'Alegreya SC', Georgia, serif; font-weight: 400; font-style: italic; font-size: 14px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #fff; background: rgba(255,255,255,0.3); text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -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; } .tt-wrapper li a span:before, .tt-wrapper li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1); } .tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #fff; } .tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px; } </style>

Es siempre larguito XD, listo dan guardar y ahora vamos a agregar el gadget:

Dashboard Diseño Añadir un Gadget HTML/Javascript

<ul class="tt-wrapper"> <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li> <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li> <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li> <li><a class="tt-facebook" href="#"><span>Facebook</span></a></li> <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li> <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li> </ul>

Eso es todo! , una cosita mas ...en el código css, en donde esta el background, las imágenes que uds ven en el demo, eso no son imagenes aparte es una sola, osea tienen que editar {una imagen} para el menú  y cambiar la url por su imagen personalizada.

¿Yo que hice?:  Fácil le tome un pantallazo a la imagen del view demo y me guie por esa, listo xD!

{ven solo hay para poner un background}

Otra cosa que les ayudara, si al poner encima el cursor ¡el recuadro con el nombre sale muy desigual!, en este apartado del código variando los numeros hacen que se posicione de la forma correcta:

Explicación en video ;) 

Créditos: Codrops

Gadget, Variar fondo en el blog

Koni! Koni! Con este código pueden poner un gadget donde los visitantes de su blog tengan la opción de cambiar el fondo de su preferencia.
lo unico que tienen que hacer es ir a su:

Dashboard Diseño Añadir Gadget   HTML/Javascript

{Copien y peguen el código}

<center> <a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://2.bp.blogspot.com/-4Eddri9826k/UQVhYNQKv-I/AAAAAAAAEsk/Yb9y4Y_JgXE/s1600/pattern-6.png)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img src="http://2.bp.blogspot.com/-4Eddri9826k/UQVhYNQKv-I/AAAAAAAAEsk/Yb9y4Y_JgXE/s1600/pattern-6.png" style="height: 40px; width: 40px;" /></a> <a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://4.bp.blogspot.com/-PnNprdJfU7M/UQVhXaTr8qI/AAAAAAAAEsM/fYxc48oN4og/s1600/red.png)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img src="http://4.bp.blogspot.com/-PnNprdJfU7M/UQVhXaTr8qI/AAAAAAAAEsM/fYxc48oN4og/s1600/red.png" style="height: 40px; width: 40px;" /></a> <a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/-gGJg33sjqJY/UQVhXkRpFvI/AAAAAAAAEsY/VAf9jCIWnpc/s1600/pattern-5.png)'; document.body.style.backgroundRepeat='repeat'; document.body.style.backgroundColor='none';"><img src="http://3.bp.blogspot.com/-gGJg33sjqJY/UQVhXkRpFvI/AAAAAAAAEsY/VAf9jCIWnpc/s1600/pattern-5.png" style="height: 40px; width: 40px;" /></a> </center>

Fuente: Ciudad Blogger

^-^

Crea tus propios cursores kawaii

{Primero que nada vamos a descargar el programa ♥} 

Tarjeta Osi

Hello ♥ Ah que tal quedo el nuevo diseño del blog? T__T no se algo ando apagada y me parecio bonito ahora ya no se  u_u, en fin ! les traigo una idea para que elaboren una tarjeta, se la he estado haciendo de cumple a mi mother ♥. {Gracias a mi hermanita que compro una camara (ppor fin!♥)}

Comenzemos! 

Primero pues haremos el molde del osito en cartulina asi nos quedara por si despues necesitamos hacer otra ^-^, el cuerpo lo hice a pulso y las orejitas si con un platico.

En algunas fotos nos acompañaran mis borradores de monokuro boo (los cuales nunca usare xD), bueno una vez tengamos listo yo por mi parte antes de pintarlo , le dibujare unas cositas :).

Mientras se seca....ahahaha XD vamos hacer una *moñita* con fomy ! , no soy muy buena haciendolas TwT, pero a uds les quedara super genial *O*.

Las tiritas las haremos de medio centimetro de ancho y de largo bueno eso depende de como hagas las orejitas de tu osi C: y como la quieras ^-^.

Una vez listas! vamos a pegarlas yo hice solo 4 tiritas de fomy y tenia una cinta de un color bonita asi que se la agregue se veria bonito un material distinto *O*, oh si las pegan en las esquinas solamente ^-^.

y luego unimos las puntas para que quede un circulito (esto es para que sea mas fácil amarrarlo :).

Y chan chan! mm y la estrella! ah bueno eso no lo tenia planeado xD pero veran es un aretico y solo los use una vez, es de esos grandes que no le quedan a una chica simple como yo ¬o¬, asi que dije: OH IS PERFECT ;D.

Ahora vamos hacer un umm , una galeria de fotos :)

Lo aprendi  gracias a Craftingeek (arigato♥), y a su tutorial: Tarjeta en cascada,{Link directo a su videotutorial}. ok asi me quedo a mí :)

♥ I love mom

Ok.. ahora el cuadro donde ira el msj , lo hice inspirada en el blockquote, es que me encanta *O* jeje.

Y asi quedo :)♥, bueno la imagen del pie la tome de melo {sorry mel estaba muy kawaii y era perfect para la tarjeta de mi mom jeje :D}.

Espero que se note >-< , pero a esta cosa tan mona la puse un poco superpuesta , lo hice pegandole pedacitos de cartón paja por debajo, para darle otro toque :).

Solo falta el titulo de feliz cumpleaños ^^u , ah bueno se me acabo de ocurrir la idea de hacer como una diadema para el feliz... luego lo editare con el resultado final ♥.

El feliz lo pegue a esos ganchitos de corazón ^-^, y cumpleaños solo lo pegue de las puntas para que ser viera cute ♥.

Espero que les guste , ja ne!!! (n--n)/