Annyz-Kawaii-Blog

viernes, 7 de septiembre de 2012

jueves, 6 de septiembre de 2012

Cute Menu Con Efecto Deslizante

Holaaa mis blogueras como va su dia hoy? espero que bien ^^ ya se aproxima el viernes siiiiii -se emociona- hahah fin de semanita awwww a pasear se ha dicho xD.. saben tengo pensado ir al cine a ver la peli de cazador de vampiros.. alguien la ha visto? bueno si alguien ya la vio digame que tal esta sin tanto detalle okei >.<

bueno pasemos al tutorial, me han estado preguntando sobre este menu que al pasar el cursor sobre el se deslice hacia abajo.. (como tipo acordeon) investigue y bueno lo encontre... espero les guste ^^

para ver el Preview da clic aqui

Notita: Este efecto usa el script mootools que no es compatible con el jQuery, esto quiere decir que si usas algun script jQuery en tu caja Css osea en tu codigo de plantilla no funcionara.

Okaa aclarando eso podemos empezar:

-- Paso 1

Nos vamos a Plantilla >> Edicion de Html >> continuar

copia este codigo y pegalo justo antes de </head>

<script src='https://sites.google.com/site/annyzkawaiiblog/annyzkawaii/mootools-core.js' type='text/javascript'/>
<script src='https://sites.google.com/site/annyzkawaiiblog/annyzkawaii/byslidemenu.js' type='text/javascript'/>
<style type='text/css'>
ul.bsm{
margin: 0px auto;
border:1px dashed #FFE6F1;
list-style-type: none;
}
ul.bsm li{
border-left:2px dashed #FFFFFF;
}
ul.bsm li.first{
border-style: none;
}
ul.vertical li,
div.vertical div{
border-top: 1px dashed #FFFFFF;
border-left-style: none;
}
</style>

asi quedaria:

da clic sobre la imagen para verla en tamaño grande

-- Paso 2

Pega este codigo justo antes de </body>

<script type='text/javascript'>
window.addEvent('load', function(){
var slideMenu = new BySlideMenu();
var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});
});
</script>

asi queda:

Das guardar y solo queda el ultimo paso =D

Y por ultimo el Tercer paso:

NOs vamos a Diseno >> Añadir gadget Html/javascript copiamos el codigo que pongo a continuacion y lo pegamos en el

<ul style="display:none; visibility:hidden;" class="bsm" id="byslidemenu">
<li></li></ul>

<ul class="bsm vertical" id="verticalmenu">
<li class="first"><a href="URL del enlace"><img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/tutoyrecursos.png" /></a></li>
<li><a href="URL del enlace"><img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/photoshops.png" /></a></li>
<li><a href="URL del enlace"><img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/afiliados.png" /></a></li>
<li><a href="URL del enlace"><img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/renders.png" /></a></li>
<li><a href="URL del enlace"><img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/recetas.png" /></a></li>
<li><a href="URL del enlace"><img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/creditos.png" /></a></li>
</ul>

Das guardar y listo ..^^

Morado:ahi pondras la imagen con tu letrerito

Verde: Ahi pondras en enlace de tus entradas

Yo puse mis propias imagenes de 230 x 150 px.. ustedes pueden hacer sus propias imagenes y letreritos a su gusto okei..

Tambien esta la opcion de ponerlo de forma Horizontal (yo la hice vertical) si la quieren de manera horizontal hacen lo mismo que el paso 1 y 2 y en el tercero

ponen este codigo:

<ul class="bsm" id="byslidemenu">
<li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
</ul>

Creditos

Ciudad Blogger

miércoles, 5 de septiembre de 2012

Hermosos Reproductores Mp3

jelow blogueritas esta vez les traigo para compartir unos lindisimos reproductores n.n no son mios no nono haha ya quisiera hacer cosas asi de bellas xD no se quien sea el autor pero hace un magnifico trabajo n.n oki okii regresando a lo de los reproductores les comento que tienen 2 inconvenientes u.u..

la primera.. y es que no se reproduce automaticamente (ya le probe de todas maneras y no pude ¬¬) asi que para que la musica se escuche tendras que darle al botoncito de ►"play"

la segunda...he aqui el detalle hahaha .. al darle ► se redireccionara a una pagina (a lo que no es tan malo porque tiene muchas imagenes y otras cositas)

bueno ahora si los reproductores

Y te preguntaras de donde saco un mp3? o como subo un mp3 ??

yo les recomiendo sites google es buenisimo...puedes subir toda clase de archivos ahi.. le pedi de favor a sunadokei que me prestara su tutorial, ella explica paso a paso como hacerlo... da clic aqui y te llevara a la explicacion ^^

martes, 4 de septiembre de 2012

Cute Estatus en la Esquina de tu Blog

Tuto tuto hahah ya tenia dias sin poner uno xD bueno espero les guste ^^

Para ponerlo en tu blog sigue estos pasos:

-- Primer Paso:

Ya uso la nueva interfaz asi que nos vamos a Plantilla >> Edicion de Html >> Continuar

Copiamos este codigo y lo pegamos antes de ]]></b:skin>

#bubblebar
{font-family:lucida console;
width:60px;
position:fixed;
right:15px;
bottom:70px;
z-index:999;
font-size:9px;
text-align:center;}

.bubble
{text-align:center;
color:#555;
float:right;
height:10px;
width:34px;
padding-top:12px;
padding-bottom:12px;
margin-top:10px;
overflow:hidden;
-moz-border-radius: 17px 17px 17px 17px;
border-radius:17px 17px 17px 17px;
-webkit-transition: opacity 0.7s linear;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;}
.bubble img
{margin-bottom:10px;
margin-top:-2px;}

#vertical
{position:fixed;
width:10px;
right:30px;
bottom:0px;
height:260px;
background-image:url('http://www.commentnation.com/hotlinks/wood_floor_pattern_seamless.jpg');
background-color:#f8c76f;
-moz-border-radius: 10px 10px 0px 0px;
border-radius:10px 10px 0px 0px; }

#bubble1 {border:3px solid #FFD7EE;
background-color:#fff}
#bubble1:hover
{padding:5px;
height:50px;
width:120px;
border:3px solid #CCF2FF;}

#bubble2
{border:3px solid #F1CCFF;
background-color:#fff;}
#bubble2:hover
{padding:5px;
height:50px;
width:120px;
border:3px solid #FFD7EE;}

#music
{border:3px solid #CCF2FF;
background-color:#fff;
padding:14px 0px 10px 0px;}
#music:hover
{padding:5px;
height:50px;
width:50px;
border:3px solid #F1CCFF;}
#bubbleplayer{padding:2px 0px 5px 0px;}

Da la opcion guardar ~~

-- Segundo Paso:

Ahora nos vamos a Diseño >> Añadir un gadget html/javascript y pegar en el, este codigo que pongo a continuacion:

<div id='vertical'></div>
<div id='bubblebar'>
<div class='bubble' id='bubble1'><img src="http://i1190.photobucket.com/albums/z449/_KawaiiCherryCupCake_/Annyz_Blog/minigifsbyannyzblog296.gif"/>
<div>AQUI TU TEXTO</div>
</div>

<div class='bubble' id='bubble2'><img src="http://i1190.photobucket.com/albums/z449/_KawaiiCherryCupCake_/Annyz_Blog/minigifsbyannyzblog72.gif"/>
<div>AQUI TU TEXTO</div>
</div>

<div class='bubble' id='music'><img src="http://sl.glitter-graphics.net/pub/122/122842r9l2jjtjaf.gif"/>
<div id='bubbleplayer'>AQUI TU REPRODUCTOR</div>
</div>
</div>

das guardar y listo ^^

NOta: se puede personalizar el color de poste o palito, los colores de los bordes de cada circulo y los gifs que van dentro n.n

credito

Gyapo

lunes, 3 de septiembre de 2012

Regalitos de 100 seguidores

Primero quisiera decir unas palabritas a tod@s las chicas y chicos que me brindaron su apoyo me alentaron con lindas palabras de aliento y animo... por comprenderme y escucharme <3 busque una palabra que pudiera plasmar lo importante que su apoyo fue para mi y no encontre otra mas que un GRACIAS, gracias con todo mi corazon por estar a mi lado >.< los quiero mucho.

y yo la verdad quisiera pasar a algo mas alegre y que mejor que 2 amigas blogueras cumpliendo su meta de 100 seguidores.. =D

les hice 1 regalito a cada una espero les guste ^^

para tarix

y para Abigail

Felicidades chicas n.n