7 de abril de 2014
~Efectos en la c-box+skins x3~
0 message(s) / comment ?★☆
Hi kats!
hoy traigo un tutorial {o debería decir 2} para darle a la c-box un aspecto nuevo
hoy traigo un tutorial {o debería decir 2} para darle a la c-box un aspecto nuevo
y muy chu x3. Y también estoy súper-dúper feliz porque annyz regresó de su larga ausencia!!
*-* Tengo muchos tutoriales en mente para ustedes!*-*
ratito probando y nos salió. Hubo que mezclar bastantes cositas, pero quedó.
Primer Code:
{code}
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:400px;
width:150px;
float:left;
cursor:pointer;
background:url('URL DEL BOTON QUE LLEVA AL CBOX') no-repeat;
}
.gbcontent{
float:left;
border:2px none #666666;
background: none;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB(
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div id="shoutmix" style="padding-top: 110px; width: 388px; height: 500px; background: url('AQUÍ LA URL DEL SKIN') no-repeat scroll center top transparent; position: center;">
AQUÍ EL CODIGO DEL CBOX
<div style="text-align:center">
<a href="javascript:showHideGB()"
CERRAR :)
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString(
</script></div>
Y solo cambia lo que está en verde. Osea: La url del skin, del botón click aquí y del código del c-box. Y luego el texto "cerrar" que eso puede ir como sea.
Y he aquí, nuestro 2° efecto: C-box en la cabecera.
Ok, este fue mucho más fácil porque no hubo que hacer mucha mezcla y es súper cortito.
<div style="position: absolute; margin-top: -150px; right: 10px;">Aqui tu codigo de tu Cbox</div>
¿Ven? Este es súper fácil =) Solo reemplaza lo que está en color chocolate por el código de la c-box!
Esto lo viste en hello Cats!~No copy! *-*
okii, y para finalizar el post, les hice unos skins para que usen y también que prontito estaré trabajando en una nueva plantilla para que usen.
No me alcanzó el tiempo de hacer muchos, así que si quieren más, ya haré otro post con más skins =D
Próximo post: Cómo poner entry & exit en tu blog! (no te lo pierdas)
Etiquetas: #Tutoriales, ♥Recursos, c-box, skins.
Name : Josefina
Location : Argentina
Sexuality : idk, i'm doubting about it lmao
Fandom: anime, imagine dragons
