Tutorial [Blogger]: Abrir/Cerrar Cbox (Toggle Cbox)

Hola a todos! En esta ocasión les traigo un tutorial para que puedan poner su
Cbox en una forma muy bonita y que no ocupa tanto espacio, como la que esta en mi blog en la esquina. No es copia de ningun tutorial, no lo saque de ningún lado yo lo hice ayer, pero no había publicado :D

Primero:

Esto es para ambas formas, tanto la plantilla clásica como la nueva.

Tenemos el código de nuestra CBOX:
Lo único que vamos a poner en nuestro código es lo que esta marcado con azul:

Ejemplo (Obvio ustedes lo harán con su código)

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="325" src="http://www4.cbox.ws/box/?boxid=3865066&amp;boxtag=wwzwly&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-3865066" style="border:#FFFFFF 1px solid;" id="cboxmain4-3865066"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=3865066&amp;boxtag=wwzwly&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-3865066" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-3865066"></iframe></div>
</div>
<!-- END CBOX -->

Para la plantilla clásica:

Diseño>>>Plantilla >>>>Editar Html
Ctrl + F y buscas </head>

Antes de </head> pegas lo siguiente:

<script type="text/javascript">
var cbvis = false;
var cbload = false;

function togglecbox () {
    var cbdiv = document.getElementById("cboxdiv");
    var cbbut = document.getElementById("cboxbutton");

    if (!cbvis) {
        if (!cbload) {
            cbdiv.innerHTML ='EN ESTA PARTE VA EL CÓDIGO DE TU CBOX, SOLAMENTE LO QUE ESTA MARCADO EN AZUL';
            cbload = true;
        }
        cbdiv.style.display = "block";
        cbbut.innerHTML = "Cerrar Cbox";
    }
    else {
        cbdiv.style.display = "none";
        cbbut.innerHTML = "Abrir Cbox";
    }
    cbvis = !cbvis;
}
</script>

Y después, antes de </body> pegas lo siguiente:

<div id="cboxbutton" style="position: fixed; bottom: 8px; right: 16px; width: 200px; padding: 3px; text-align: center; cursor: pointer; background-color: #ffffff; border:#A2A2A2 1px solid;border-radius: 3px;

font-family: Times New Roman, sans-serif; font-size: 20px;" onclick="togglecbox()">Abrir Cbox</div>
<div id="cboxdiv" style="display: none; position: fixed; bottom: 48px; right: 16px; width: 200px; background: #ffffff; padding: 3px; line-height: 0;border:#A2A2A2 1px solid;border-radius: 3px;"></div>

* font-family (Fuente, tipo de letra)
* font-size (tamaño de la fuente)
* background (color de fondo)
* bottom, right, width (tamaño)
* border ( borde)


Y así queda:

http://pictures-on-mymind.blogspot.com/

Ahora para las plantillas nuevas:

El código es el mismo

Nos vamos a:

Diseño >>> Elementos de página >>> Añadir un Gadget >>>> HTML/Javascript

Y pegamos el código completo:
Lo editamos a nuestro gusto y guardar.

<script type="text/javascript">
var cbvis = false;
var cbload = false;

function togglecbox () {
    var cbdiv = document.getElementById("cboxdiv");
    var cbbut = document.getElementById("cboxbutton");

    if (!cbvis) {
        if (!cbload) {
            cbdiv.innerHTML ='EN ESTA PARTE VA EL CÓDIGO DE TU CBOX, SOLAMENTE LO QUE ESTA MARCADO EN AZUL';
            cbload = true;
        }
        cbdiv.style.display = "block";
        cbbut.innerHTML = "Cerrar Cbox";
    }
    else {
        cbdiv.style.display = "none";
        cbbut.innerHTML = "Abrir Cbox";
    }
    cbvis = !cbvis;
}
</script>

<div id="cboxbutton" style="position: fixed; bottom: 8px; right: 16px; width: 200px; padding: 3px; text-align: center; cursor: pointer; background-color: #ffffff; border:#A2A2A2 1px solid;border-radius: 3px;

font-family: Times New Roman, sans-serif; font-size: 20px;" onclick="togglecbox()">Abrir Cbox</div>
<div id="cboxdiv" style="display: none; position: fixed; bottom: 48px; right: 16px; width: 200px; background: #ffffff; padding: 3px; line-height: 0;border:#A2A2A2 1px solid;border-radius: 3px;"></div>

* font-family (Fuente, tipo de letra)
* font-size (tamaño de la fuente)
* background (color de fondo)
* bottom, right, width (tamaño)
* border ( borde)



Y listo tienen su Cbox para abrir y cerrar en la esquina de su blog, espero que les haya gustado, no olviden dejar sus comentarios, dudas, quejas y pedidos en la cbox del blog o al final de esta entrada.

See ya!