13 sept. 2014

Tutorial: Caja con efecto para créditos [by me]

Hey hey hey Hace unos días pensé en hacer un proyecto para todas, pero como están la mayoría estudiando, en vacaciones, etc, no quise hacerlo en esta entrada sin preguntar.
¿Les gustaría que hiciera el proyecto ahora? Por favor comenten si tienen tiempo y si les gustaría para saber si alguien se uniría :c Y sino pues más adelante, o lo que sea. Tengo una ideita en mente pero tengo que pensarlo mejor.
Bueno como aún no sabía lo del proyecto pensé en traerles un tutorial de cómo poner una cajita para sus créditos, así como la mia. Supongo que ya habréis visto mi gadget de créditos, las que no lo hayan visto bajen y miren mi último gadget para que así puedan ver el efecto ^^

Vamos a Plantilla>>Editar HTML y pegamos el código arriba de  ]]></b:skin> 
.credits {
position: relative;
margin: 10px auto;
}
.infocredits {
position: absolute;
top: 5%;
left: 5%;
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
padding: 5px;
color: #848484; /*Color del texto*/
background: #FFFFFF; /*Color del fondo de la caja*/
border:2px solid #E3CEF6; /*Color del borde y ancho*/
border-radius:15px;
-moz-transition:all ease .8s;
-webkit-transition:all ease .8s ;
transition:all ease .8s;
}
.credits:hover .infocredits {
filter: alpha(opacity=80);
opacity: .8;
}
Así mismo es como lo tengo yo, si quieren hacerle un ligero cambio prueben a cambiar el número de opacidad, el tamaño, o le añaden lo que quieran si así no les gusta, pero a mi gusto se ve bien así porque ya lo edité yo.~

Y ahora lo ponemos en gadget, que sería lo siguiente:
<center><div class="credits"><img src="url de tu imagen" /><span class="infocredits">
 <p>Aqui lo que vayas a escribir</p>
</span></div></center>
Rojo: Ahí va el url de la imagen que se ve principalmente antes de poner el cursor por encima
Azul: Ahí escribes lo que tu quieras, si quieres poner otro párrafo más pues debajo de esa línea pones lo mismo, así:

<center><div class="credits"><img src="url de tu imagen" /><span class="infocredits">
 <p>Aqui lo que vayas a escribir</p>
 <p>Aqui lo que vayas a escribir</p>
</span></div></center>

Bueno eso sería todo, espero que les haya gustado mi cajita de créditos personalizada, ya saben si tienen alguna dudita dejen su comentario y también sobre lo de la idea del proyecto, besitos

7 sept. 2014

Recursos: Botones Go Up [Adventure Time]

(14) Tumblr
*bye bye exámenes de mie..caca*
HOLA HOLA ¿Cómo están? :3 Yo estoy muy muy bien y como algunas se estarán imaginando..sí, ¡aprobé mis exámenes! *^* Tras muchísimo esfuerzo aprobé los dos y ya entro limpiamente al Instituto donde quería entrar a hacer el Bachiller, ya empiezo este miércoles y ya les contaré como me fue~ Por otra parte, como ahora empiezan las clases, es difícil sacar tiempo para publicar y visitar vuestros blogs, ahora que es septiembre entraré más pero cuando ya llegue octubre y demás no sé con cuanta frecuencia estaré aquí, eso sí, aunque sea una vez a la semana, entraré, pero es comprensible si se tarda mucho en publicar.
Bueno, hoy les traigo unos botoncitos de subir de Adventure Time [Hora de Aventuras] que hice que espero les guste mucho. Tengo varios tutoriales en mente para publicar pero como en la entrada anterior ya hice uno, no quiero ser repetitiva, ya a la próxima os los traeré.~





Bueno no son muchos pero espero que les guste y los podáis usar.~ Ya saben como poner un botón de subir, si no miren el tutorial entre mis tutoriales.
Son totalmente hechos por mi, si los publicas en tu blog dame créditos y sólo úsalos para uso personal

Muchos besos, nos leemos,

3 sept. 2014

Tutorial: Modificar la caja de gadget al gusto

Tippy
Hi! Cuánto tiempo (?) Al fin he vuelto y he acabado mis exámenes, ya no tengo que estudiar más estos días ;u; No me han salido tan mal, yo espero aprobar los dos pero hasta mañana no puedo saber mis notas así que aquí estoy en mi casa llena de nervios por saber si apruebo o no ;_; En la próxima entrada ya les diré como me fue, pero por hoy voy a dejarles un tutorial sencillo para modificar los gadgets muy práctico en muchas ocasiones.~
 Quitar fondo y bordes a la caja
A veces queremos poner un gadget totalmente transparente, pero si sólo pones fondo transparente aún se verá el borde, y para que no quede así pon este código arriba de ]]><b:skin>
#númerodelgadget { background: none;border: none;}
Lo que está en rojo es donde va el número del gadget que tu quieres que tenga fondo transparente, y una manera sencilla de saber el número, es ir a Diseño y mantener el cursor arriba de la palabra ''editar'' del gadget que quieres modificar. Les dejo una imagen para guiaros mejor:

[Haz click para verla en grande]

Cuando hayan visto la imagen espero que entendáis a lo que me refería xD Cada vez que queráis saber el ID de vuestro gadget esta es la manera más sencilla de saberlo sin tener que ir a Plantilla y estar buscando uno por uno, solo ir a Diseño y mantener el cursor arriba del ''editar'' de los gadgets que quieran modificar y abajo les sale el número que es siempre HTML-un número-. Pues eso es lo que tienes que poner en el númerodelgadget, que en este caso quedaría:
#HTML3 { background: none;border: none;}

Bueno no me quiero enrrollar más, creo que ya se entiende, ya saben si no entienden algo me lo comentan. ~
 Mover los gadgets
A veces nos puede quedar un gadget muy hacia abajo, o muy hacia arriba, etc, o simplemente lo quieres mover porque queda muy alejado o muy cerca a otro. Buscamos ]]><b:skin> y arriba pegamos este código:
#HTMLnúmerodelgadget{
margin-top: -20px !important;
Lo que está en rojo es lo mismo que expliqué antes, vas y miras el número que tiene que quieres mover y pones su número. Y lo que está en azul quiere decir cuánto quieres ponerlo más arriba, si le aumentas el número estará más arriba y si le pones menos pues más abajo. Si no ha bajado tanto como querías puedes cambiar el ''margin-top'' por ''margin-bottom'' que sería abajo. :3

Y bueno esto sería todo, la verdad que a mi estos trucos me suelen venir muy útiles para modificar los gadgets y no me queden..feitos (?) xD Espero que les haya servido y perdonen por haberme enrrollado un poco pero quería explicarme lo mejor posible :c Igualmente ya saben, si hay dudas comenten