Blog de César [ayuda]


Un listado de amigos, los que me linkean, si no estás avisame.

Podes tenerme en tu blog con un banner. Si queres algún color pedime que lo armo.

23nov2007

Script expandir / contraer II




Esta es otra versión del Script para expandir y contraer contenidos. Te lo puse en el centro del blog, pero, si le cambias el tamaño, lo podes usar en la columna lateral.
Prestale atención al tamaño y lo demás es fácil.

Paso 1:

Entras a tu plantilla y busca </head> y copia lo siguiente:

Código 1 [+/-]

    <script src='http://ar.geocities.com/blogdecesar/switchcontent.js' type='text/javascript'/>

    <script src='http://ar.geocities.com/blogdecesar/switchicon.js' type='text/javascript'>
    </script>

    <style type='text/css'>

    .iconspan{
    float: right;
    margin: 3px;
    cursor:hand;
    cursor:pointer;
    font-weight: bold;
    }

    /*Aca color de fondo, letra y bordes: */

    .eg-bar{
    background-color: #C3000D;
    color: #FFFF99;
    font-weight: bold;
    border-top: 2px solid #FDCD09;;
    border-left: 2px solid #430802;;
    border-right: 2px solid #430802;;

    padding: 3px;
    }

    </style>



Paso 2:

Va Añadir un elemento de página y HTML/Javascript.

Código 2
<table border="0" cellspacing="0" cellpadding="0" style="width: 400px;">

<tr><td class="eg-bar">
<span id="faqtable1-title" class="iconspan"><img src="http://godlike.cl/up/im/33/minus.gif"/></span>
TITULO
</td></tr>
<tr><td>
<div id="faqtable1" class="icongroup2">
CONTENIDO
<tr><td class="eg-bar">

<span id="faqtable2-title" class="iconspan"><img src="http://godlike.cl/up/im/33/minus.gif"/></span>
TITULO
</td></tr>
<tr><td>
<div id="faqtable2" class="icongroup2">
CONTENIDO
</div></td></tr>
<tr><td class="eg-bar">

<span id="faqtable3-title" class="iconspan"><img src="http://godlike.cl/up/im/33/minus.gif"/></span>
TITULO
</td></tr>
<tr><td>
<div id="faqtable3" class="icongroup2">
CONTENIDO
</div></td></tr>

</table>

<script type="text/javascript">
var faqtable=new switchicon("icongroup2", "div") //Limit scanning of switch contents to just "div" elements
faqtable.setHeader('<img src="http://godlike.cl/up/im/33/minus.gif"/>', '<img src="http://godlike.cl/up/im/33/plus.gif"/>')
faqtable.collapsePrevious(false)
faqtable.setPersist(true, 7)
faqtable.init()
</script>


Verás que te puse colores en:
width: 400px: para que le des el tamaño.
faqtable1: a medida que vas haciendo más anda cambiándole el número como veras en el código.
Si sos te cuidas con el tamaño, en el contenido podes poner fotos.

Demo: Miralo en [Acción]

4 comentarios :

Leandro Comeglio dijo...

"Premios BLOGSPOT"
VOTÁ al blog que crees que tiene que ganar estos premios.No pierdas ésta oportunidad de agradecer al blog que mas te ayudó,divertió,informó,etc.Para votar metete en: www.premiosblogspot.blogspot.com

Latin Fire dijo...

Excelente la ayuda Cesar, muy bueno, estoy empezando en esto y la verdad que me viene de mucha ayuda, una pregunta mas, donde consigo otros modelos que no sean el de "spain" otra forma o nose, Desde ya muchas gracias. espero tu pronta respuesta, saludos

Las elecciones afectivas - Capítulo Colombia dijo...

Hola César; tenia el código de DHTML Dynamics, pero no había podido resolver el enigma de dónde poner el archivo js;ya veo que se puede dentro del head de la plantilla.

Sin embargo,no he podido introducir una entrada con contenido.

Mi interés es situar una larga entrevista, y reducirla con subtítulos y así hacer más fácil su lectura.

¿qué me aconsejas? ¿cómo hiciste el ejemplo de Faro de Alejandría y Pirámide de Keops?

GRUPO 4 dijo...

necesito saber como haces donde dice codigo +/- esos desplegables

Hola, que tal!!!
Podes mirar, copiar, sugerir y/o desechar, todo es gratis, lo único que te pido
no borrés los créditos de las plantillas y me linkees si podes.
Abrazos, buena suerte y más que suerte!

Blog de César [ayuda para blogger]
 
ir arriba <body> . </body>