Rss

07 octubre 2011

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: 200pxbackground: #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!

4 Comentarios:

Aх Kιll™ dijo...

Genial aunque me enrede XD de tdos modos yo tambien le halle la forma XD desde c-box :D aunk me encanto esta entrada sigues siendo mi new idol bloggera XD *-*

Hiro Jung dijo...

Hahahaha, gracias :D

Pues no es tan difícil, además de esta forma puedes ponerle sombra, brillo y redondear el cbox, también ponerle lo que quieras como "abrir cbox" "escribeme" etc, gracias por tu comentario :D

Reptilectric! dijo...

muy bien hecho!!!

Miss Juicy♫ dijo...

Esta super currado,me gusto deberias hacer mas tutos jejeje,un besote

 

Este sitio se ve mejor en Google Chrome y Mozilla. Gracias por tu Visita. Si quieres ayudarme y ayudar al blog, da clic en los anuncios. No olvides Comentar y Seguirme! Gracias!!
ir arriba