10/2/13

[Tutorial]Como hacer un cbox flotante con mensaje


holis bueno traigo un tuto muy cute para las que lo queréis saber n.n espero que os guste lo primero
es añadir un nuevo gadget jabascrip y pegar en la cajuita este código



<center>
<style type="text/css">
#at{
position:fixed;
right:250px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:none;
background: repeat-x bottom center scroll ;
-moz-border-radius:20px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<br />
<form name="news">
<textarea rows="1" style="border:3px double #E3CEF6;-moz-box-shadow: 0 0 15px 5px #E3CEF6;
-webkit-box-shadow: 0 0 15px 5px #E3CEF6;border-radius:7px;font-size:12px;font-family:century gothic;cursor:crosshair;" cols="30" name="news2" wrap="virtual"></textarea>
<script language="JavaScript">
var newsText = new Array();
newsText[0] = "TEXTO";
newsText[1] = "TEXTO";
newsText[2] = "TEXTO";
newsText[3] = "TEXTO";
newsText[4] = "TEXTO";
newsText[5] = "TEXTO";
newsText[6] = "TEXTO";
newsText[7] = "TEXTO";

var ttloop = 1; //
var tspeed = 70; //
var tdelay = 1000; //
// ------------- CANNOT EDITING ------------- \
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
dwAText = newsText[cnews];
if (dwAText.length != 0) {
document.news.news2.value = "";
eline = 0;
setTimeout("addChar()",tspeed)
}
}
}
function addChar() {
if (eline!=1) {
if (cchar != dwAText.length) {
nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
document.news.news2.value = nmttxt;
cchar += 1;
if (cchar != dwAText.length) document.news.news2.value += "_";
} else {
cchar = 0;
eline = 1;
}
if (mxText==cnews && eline!=0 && ttloop!=0) {
cnews = 0; setTimeout("addNews()",tdelay);
} else setTimeout("addChar()",tspeed);
} else {
setTimeout("addNews()",tdelay)
}
}
doNews()
</script>
</form>
</div>
Cbox CODIGO</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div >
<span ></span></div></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" src="Url de la imagen de cbox" alt="PUSH" title="Click"style='position:fixed; top:0; right:50px;'/></a>
</div></center>

Amarillo:El color de la caguita del mensaje
Naranja:Codigo de la cbox
Rojo:url de la imagen de cbox 
Creditos
Mensaje:Annyz
Cbox flotante:Nekitha

22 comentarios:

  1. Buena tutorial...pero kumy el codigo que tiene nekitha del cbox..es mio..pero esta bien^^

    ResponderEliminar
  2. Kumy,muuchas gracias poor el tut ahora lo usare y dare creditoos

    ResponderEliminar
  3. exelente tutorial :3 ¡ me encanta ¡

    ResponderEliminar
  4. Respuestas
    1. no se por que bueno a mi me pasaba antes pero no se porke mmmm no se x.x

      Eliminar
    2. no entiendo el codigo de la cbox

      Eliminar
  5. Hola! Lo unico que no entiendo es codigo de la cbox

    Buen tuto! *0*

    ResponderEliminar
    Respuestas
    1. el código de cbox es el codigo que te viene cuando entras en esta pagina http://cbox.ws/admin.php?preproc=login te reguistras creas tu cbox y le das a publicar y ahi esta el codigo de la cbox

      esto va tambien para Iviitta Florez que tenias dudas!

      Eliminar
  6. Una pregunta, a que se refiere con ''Url de la imagen de cbox ''

    ResponderEliminar
    Respuestas
    1. Pues ves en la imegen que hay una cosita que pone cbox esa es la imagen que esta a la vista de todo y si la clicas sale el cbox

      Eliminar
  7. Hay me quedo muy bonito ^^ mil gracias!!! AMO TU BLOG besitosss *3*

    ResponderEliminar
  8. umy necesito un codigo de cbox es que no tengo inero para pagar uno

    ResponderEliminar
    Respuestas
    1. pero el codigo de cbox no se paga es gratuito XD de donde te sacaste que se paga
      solo tienes que registrarte en esta pagina & darle a donde pone publicar una vez registrado & ahi te saldrá el codigo
      http://cbox.ws/?r=4-4161956

      Eliminar
  9. una pregunta como pongo mi cbox como el tuyo sin imagen??

    ResponderEliminar
    Respuestas
    1. como el mio? pues ese tutorial todavia no lo hice en mi blog pero en esta entrada pongo el link del tutorial
      http://clasicylove.blogspot.com.es/2013/12/tipsformas-de-colocar-la-cbox.html

      Eliminar
  10. Hola acabo de cambiar mi plantilla y bueno con blogskin me quedó perfecto ,..y con este código bn ..pero me gustaría saber si quisiera que aparezca al lado izquierdo y un poco más bajito como lo hago ... :) , no me aparece cuando le pongo left

    ResponderEliminar
    Respuestas
    1. Pues en la primer parte del codigo osea el principio pone esto verdad

      right:250px;

      Pues donde pone right lo cambias por left y listo y para moverlo solo tienes aue disminuir o aumentar el numero que tienes al lado

      Eliminar
  11. hola disculpa no entendí eso del código ya lo creé en publish me sale el código que debería poner en gadget de ahí veo el id http://www3.cbox.ws/box/?boxid=3404840&amp esto lo que ha salido ahora pongo el link no sale.. pongo el numero y tampoco? podrías explicar mejor dónde es el codigo id? gracias :)

    ResponderEliminar
    Respuestas
    1. No el código lo sacas cuando tienes creada la cbox en la parte de arriba pone publicar le das ahí y te pone el código abajo en una cajita ese code tienes que coger

      Eliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com