[Tutorial] Ocultando chatbox y algunas modificaciones ^^
Status: Escuchando decode de paramore
Hoy Hice: una imagen para el chat
Palabra: musica
Ultima Serie Vista: Ao no exorcit cap 1
konichiwaa! este tutorial es bastante largo en cuanto al codigo xD, realmente lo que quiero es mostrarle algunas cosillas que podemos hacer para que se vea mas lindo el chat, capaz algunos lo sepan pero otros no asi que alla vamos.
*CREDITOS: Primero lo primero asi que los creditos totales de este chat son de Annyz Blog - Blog: por el momento es en la única parte en donde lo he visto.
Empezamos!!!
1.- Nos vamos a Diseño Elementos de la pagina >> Añadir un gadget Htlm/javascript y pegamos el codigo proporcionado por annyz ^^
Código:
*Morado Oscuro: La url de la imagen sera la imagen en donde darán clic para abrir y cerrar el chat, y mas abajo es donde insertamos el código del chat.
Ahora vamos a mi modificación paso a explicarles:
1.- Si ustedes tiene un fondo personalizado para su chat deben quitar el fondo que trae el codigo mostrado deben borrar la siguiente parte del codigo:
Esta parte se refiere al color de fondo y borde del script y lo que añadimos es el ancho y el largo del fondo de nuestro chat box.
Ahora para quitar el enlace de cerrar que viene por defecto borramos la siguiente parte del código:
2.- Que hacemos para que nuestro chat se vea con el fondo que tenemos pero a la vez usando este código muy fácil solo pegas el código entero del chat dentro del código del script mas claro veamos:
Mi código del chat es este:
<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 DE LA IMAGEN') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
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("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
pega el codigo de tu cbox
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>
*Morado Oscuro: La url de la imagen sera la imagen en donde darán clic para abrir y cerrar el chat, y mas abajo es donde insertamos el código del chat.
-------------------------------------------------
Ahora vamos a mi modificación paso a explicarles:
1.- Si ustedes tiene un fondo personalizado para su chat deben quitar el fondo que trae el codigo mostrado deben borrar la siguiente parte del codigo:
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
y añadimos como cambio:
width: 215px;
height: 450px;
Esta parte se refiere al color de fondo y borde del script y lo que añadimos es el ancho y el largo del fondo de nuestro chat box.
Ahora para quitar el enlace de cerrar que viene por defecto borramos la siguiente parte del código:
<a href="javascript:showHideGB()">
[close]
</a>
2.- Que hacemos para que nuestro chat se vea con el fondo que tenemos pero a la vez usando este código muy fácil solo pegas el código entero del chat dentro del código del script mas claro veamos:
Mi código del chat es este:
<div id="shoutmix" style="padding-top: 69px; width: 215px; height: 450px; background: url(http://i40.tinypic.com/ws70av.jpg) no-repeat scroll left top transparent; position: relative;">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="160" height="150" src="http://www6.cbox.ws/box/?boxid=244021&boxtag=fxn320&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-244021" style="border:#4FD9F0 1px solid;" id="cboxmain6-244021"></iframe></div>
<div><iframe frameborder="0" width="160" height="75" src="http://www6.cbox.ws/box/?boxid=244021&boxtag=fxn320&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-244021" style="border:#4FD9F0 1px solid;border-top:0px" id="cboxform6-244021"></iframe></div>
</div>
<!-- END CBOX --></div>
*Morado: es la parte del código añadida para poder colocarle el famoso fondo al chat xD este código es propiedad de Annyz Blog si quieren verlo pueden hacerlo acá: como colocar un-skin tu cbox
El código completo nos quedaría así:
<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('http://i44.tinypic.com/35c4ohz.jpg') no-repeat;
}
.gbcontent{
float:left;
padding:0px;
width: 215px;
height: 450px;
}
</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("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div id="shoutmix" style="padding-top: 69px; width: 215px; height: 450px; background: url(http://i40.tinypic.com/ws70av.jpg) no-repeat scroll left top transparent; position: relative;">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="160" height="150" src="http://www6.cbox.ws/box/?boxid=244021&boxtag=fxn320&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-244021" style="border:#4FD9F0 1px solid;" id="cboxmain6-244021"></iframe></div>
<div><iframe frameborder="0" width="160" height="75" src="http://www6.cbox.ws/box/?boxid=244021&boxtag=fxn320&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-244021" style="border:#4FD9F0 1px solid;border-top:0px" id="cboxform6-244021"></iframe></div>
</div>
<!-- END CBOX --></div>
<div style="text-align:right">
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>
*Fucsia: esto es el ancho y alto del fondo asi como el codigo completo del chat box.
RESULTADO:
Bueno es un poco tedioso lo se, pero el resultado vale la pena o no? es un hermoooso chat ^^
*ACLARACIONES: Las imágenes mostradas son de mi autoria y todas hechas por mi, los códigos como ya lo dije le pertenecen a Annyz Blog, no los he visto en ninguna otra parte, las modificaciones de igual forma son hechas por mi.
*Nota: Este tutorial ha sido probado en las plantillas: Sencillo y Picture windows de blogger.
*Comparte el Tuto
* Si lo haces porfa da credito o enlaza mi blog ^^
*GRACIAS!!
Nos leemos hasta un nuevo post ^^ Jane!
Comentarios
Publicar un comentario