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]

Seguí leyendo

Cerrar

Tab para mostrar contenidos!

Como verán arriba donde muestro un mapa de mi blog en una forma muy vistosa.
No te va a costar ponerlo, ya está armado para que lo subas en dos pasos. Vas a tener que prestarle atención a los contenidos que uses dentro.
El primer código lo pegas en tu plantilla antes de </head> y después viene la parte de los contenidos. Donde primero definís el titulo y abajo el contenido.

►Paso 1:

Antes de </head>

<link href='http://ar.geocities.com/blogdecesar/tabcontenido.css' rel='stylesheet' type='text/css'/>
<script src='http://ar.geocities.com/blogdecesar/tabcontenido.js' type='text/javascript'></script>

Guardas plantilla y vas a elementos de página y añadis en HTML/javascript:

►Paso 2:

<ul id="maintab" class="shadetabs">
<li><a href="#" rel="tcontent1">Contenido 1</a></li>
<li><a href="#" rel="tcontent2">Contenido 2</a></li>
<li><a href="#" rel="tcontent3">Contenido 3</a></li>
<li class="selected"><a href="#" rel="tcontent4">Contenido 4</a></li>
<li><a href="#" rel="tcontent5">Contenido 5</a></li>
<li><a href="#" rel="tcontent6">Contenido 6</a></li>
</ul>
<div class="tabcontenidostyle">
<div id="tcontent1" class="tabcontent">
<br/>
Aca va el contenido 1
</div>
<div id="tcontent2" class="tabcontent">
<br/>
Aca va el contenido 2
</div>
<div id="tcontent3" class="tabcontent">
<br/>
Aca va el contenido 3
</div>
<div id="tcontent4" class="tabcontent">
<br/>
Aca va el contenido 4
</div>
<div id="tcontent5" class="tabcontent">
<br/>
Aca va el contenido 5
</div>
<div id="tcontent6" class="tabcontent">
<br/>
Aca va el contenido 6
</div>
</div>

<script type="text/javascript">
initializetabcontent("maintab")
</script>

►Configuración:

<li><a href="#" rel="tcontent1">Contenido 1</a></li>
Aca lo único que le tenes que cambiar el el titulo

<li class="selected"><a href="#" rel="tcontent4">Contenido 4</a></li>
Aca verás que aparece algo nuevo "class="selected" es el contenido que se muestra cuando entran a tu blog.

<div id="tcontent1" class="tabcontent">
<br/>
Aca va el contenido 1
Aca reemplaza por tu contenido donde te digo, no toques otra cosa.
Al contenido le podes darle color o lo que se te ocurra. Si no te pasas con el tamaño podes poner fotos también.

En general la cantidad de títulos va a depender del tipo de plantilla que este usando. Que te quiero decir con esto: si el ancho de tu blog es más chico que este tab se te va a apretar un poco.

Seguí leyendo

Cerrar

Presentación de foto "polaroid"

Otra manera de presentar fotos generando efecto "polaroid".
Como el truco anterior solo tenes que agregar un código script en la plantilla antes de </head>:

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

Y para subir la fotito usa:

<img src="dirección de foto" class="instant icolor993300" />

►Para cambiar el color del borde cambia aca: "icolor993300"

Seguí leyendo

Cerrar

Menú script con muchos enlaces

Pincha en la imagen para verlo en acción:

Mira que práctico y fácil de subir al blog. En el código vas a ver que está la manera de editarlo. Para eso lo podes hacer en linea usando el [editor] ya que no necesita ningún agregado a la plantilla.
Una vez que lo armaste como a vos te gusta, con los enlaces y colores para que quede bien en tu blog, copias y pegas desde añadir elemento de página / HTML/Javascript y lo pones en su lugar.
El código:

<!--Aca editas el menú - a medida que pongas más vas cambiando esto showit(?) -->

| <a onmouseover="showit(0)" href="http://webjcp.blogspot.com/">Menú 1</a> | <a onmouseover="showit(1)" href="http://webjcp.blogspot.com/">Menú 2</a> | <a onmouseover="showit(2)" href="http://webjcp.blogspot.com/">Menú 3</a> | <a onmouseover="showit(3)" href="http://webjcp.blogspot.com/">Menú 4</a> |<br/>

<!-- Aca se edita el largo y ancho - color de letra - color de fondo --->

<ilayer width="400" height="22" name="dep1" bgcolor="#800000">
<layer width="400" name="dep2" height="22">
</layer>
</ilayer>
<div id="describe" style="color:#000000;background-color:#FFD401;width:400px;height:22px" onmouseover="clear_delayhide()" onmouseout="resetit(event)"></div>


<script language="JavaScript1.2">


var submenu=new Array()

<!--Aca editas los enlaces - el submenu [?] debe coincidir con el menú showit(?) -->

submenu[0]='<font face="Verdana" size="2"><b><a href="http://webjcp.blogspot.com/">Enlace 1</a> | <a href="http://webjcp.blogspot.com/">Enlace 2</a> | <a href="http://webjcp.blogspot.com/">Enlace 3</a> | <a href="http://webjcp.blogspot.com/">Enlace 4</a></font>'

submenu[1]='<font face="Verdana" size="2"><b><a href="http://webjcp.blogspot.com/">Enlace 5</a> | <a href="http://webjcp.blogspot.com/">Enlace 6</a> | <a href="http://webjcp.blogspot.com/">Enlace 7</a> | <a href="http://webjcp.blogspot.com/">Enlace 8</a></font>'

submenu[2]='<font face="Verdana" size="2"><b><a href="http://webjcp.blogspot.com/">Enlace 9</a> | <a href="http://webjcp.blogspot.com/">Enlace 10</a> | <a href="http://webjcp.blogspot.com/">Enlace 11</a> | <a href="http://webjcp.blogspot.com/">Enlace 12</a></font>'

submenu[3]='<font face="Verdana" size="2"><b><a href="http://webjcp.blogspot.com/">Enlace 13</a> | <a href="http://webjcp.blogspot.com/">Enlace 14</a> | <a href="http://webjcp.blogspot.com/">Enlace 15</a> | <a href="http://webjcp.blogspot.com/">Enlace 16</a></font>'


//aca editas el tiempo que los enlaces están a la vista
var delay_hide=500

/////No tocar desde aca -saca los dedos ;)

var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""

function showit(which){
clear_delayhide()
thecontent=(which==-1)? "" : submenu[which]
if (document.getElementById||document.all)
menuobj.innerHTML=thecontent
else if (document.layers){
menuobj.document.write(thecontent)
menuobj.document.close()
}
}

function resetit(e){
if (document.all&&!menuobj.contains(e.toElement))
delayhide=setTimeout("showit(-1)",delay_hide)
else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhide=setTimeout("showit(-1)",delay_hide)
}

function clear_delayhide(){
if (window.delayhide)
clearTimeout(delayhide)
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

</script>

Seguí leyendo

Cerrar

Novedoso Script expandir / contraer

Otro truco Javascript que me parece es una maravilla.
Donde podes expandir / contraer todo el contenido general o desde cada titulo.
Mira en mi blog de prueba (abrí la siguiente imagen):

Si lo viste y te gustó hace asi:

En edición HTML busca en la plantilla <head>

Y después pega esto:

<script type="text/javascript" src="http://webjcp.googlepages.com/switchcontent.js" >
</script>
<style type="text/css">
.handcursor{
cursor:hand;
cursor:pointer;
}
</style>

Luego "guarda plantilla"
Y para empezar a usarlo en Plantilla vas a elementos de la página y abrí añadir un elemento... y pegas lo siguiente:

<div><a href="javascript:bobexample.sweepToggle('contract')">Contraer todo</a> | <a href="javascript:bobexample.sweepToggle('expand')">Expandir todo</a></div>
<h3 id="bobcontent1-title" class="handcursor">TITULO</h3>
<div id="bobcontent1" class="switchgroup1">
Contenido
</div>
<h3 id="bobcontent2-title" class="handcursor">TITULO</h3>
<div id="bobcontent2" class="switchgroup1">
Contenido
</div>
<h3 id="bobcontent3-title" class="handcursor">TITULOS</h3>
<div id="bobcontent3" class="switchgroup1">
Contenido
</div>

<script type="text/javascript">
var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('<img src="http://webjcp.googlepages.com/abrir.png"/> ', '<img src="http://webjcp.googlepages.com/cerrar.png"/> ')
bobexample.setColor('darkred', 'black')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()
</script>

Podes arrastrarlo al centro si el contenido es grande.
Si queres poner más contenido tenes que repetir esto:

<h3 id="bobcontent3-title" class="handcursor">TITULOS</h3>
<div id="bobcontent3" class="switchgroup1">
Contenido
</div>

Solo tenes que ir cambiando bobcontent por el número correlativo.

Bueno, espero que te guste. Saludos

Seguí leyendo

Cerrar

Script: Abrir - Cerrar

- ABRIR | CERRAR -

Te va a gustar!

Otro script muy práctico y muy fácil de usar.
Dentro de él podes poner lo que te parezca.
Primero tenes que agregar a tu plantilla después de <head>:

<script src='http://www.fileden.com/files/2009/4/10/2398852/animatedcollapse.txt' type='text/javascript'></script>

Guardas y manos a la obra.
Ahora usa este código para usarlo:

<center><a href="javascript:collapse.slidedown()">ABRIR</a> | <a href="javascript:collapse.slideup()">CERRAR</a></center>
<div id="nombre1" style="width: 220px; height: 150px; background-">
ACA PONE LO QUE QUIERAS OCULTAR
<script type="text/javascript">var collapse=new animatedcollapse("nombre1", 500, false)</script>
</div>

Configurar:

<a href="javascript:collapse.slidedown()">ABRIR</a> | <a href="javascript:collapse.slideup()">CERRAR</a></center>

En esta parte no te conviene tocar. Lo que se puede hacer para que quede más bueno es cambiar el "ABRIR" y "CERRAR" por una imagen. (una flechita por ejemplo)

<div id="nombre1" style="width: 220px; height: 150px; color:#000000; background-color:#FFFFFF;">

Acá vos le configuras el tamaño, por si lo usas en la sidebar, y el color de letra y fondo.
Pero si vas a hacer más de uno tenes que ir cambiando el "nombre1" las dos veces. Que es la manera de identificarlos.
Si no lo cambias se te van a abrir todos a la vez.
Buena suerte!!!

Actualizado el 27/08/2007:
Gracias al dato de Mulitaaaa les dejo esta aclaración.
Si vas a poner este script más de una vez tenes que ir modificando los números que te pongo en la siguiente imagen.

Seguí leyendo

Cerrar

Reloj en el blog

Este es un script para poner la hora en el blog.
Verás que está ubicada en la columna:



Muy sencillo de agregar.
Primero buscas en tu plantilla <head> después pegas:

[+/-]Abrir código 1


<style>
<!--
.styling{
background-color:#2C363A;
color:#FFFF99;
font: 15px MS Sans Serif;
padding: 4px;
border-top: 1px Ridge #33CCCC;
border-bottom: 1px Ridge #33CCCC;
}
-->
</style>


Acá podes cambiar tipo y color de letra, fondo y lineas

Después vas a elemento de página, luego añadir un elemento y abrís HTML/Javascript.

Aca va lo siguiente:

[+/-]Abrir código 2


<center><span id="digitalclock" class="styling"></span>
<script>
<!--

var alternate=0
var standardbrowser=!document.all&&!document.getElementById

if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="6"></form>')

function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"

if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes

if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+" "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='#FFFF99'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='#3D4D51'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show

//-->
</script></center>


Mira bien el código, ,podes cambiar el color del segundero.

Ya tenemos la hora, a no llegar tarde!!!

Seguí leyendo

Cerrar

El monitor de las visitas

Mirá mi [blog de prueba]

Este es un script que muestra al navegante el tipo de monitor que tiene, en tamaño y color. Sirve como pie para avisarle a las visitas el tipo de resolución recomendados.
tamaño y color


[+/-]Abrir código

<table border="0">
<tr>
<td><form name="t" method="POST">
<table border="0">
<tr>
<td valign="top" width="90"
bgcolor="#B2EE3A">Ancho:</td>
<td><input
name="t1" value="not supported" size="10" type="text"/></td>
</tr>
<tr>
<td valign="top" width="90"
bgcolor="#B2EE3A">Largo:</td>
<td><input
name="t2" value="not supported" size="10" type="text"/></td>
</tr>
<tr>
<td valign="top"
bgcolor="#B2EE3A" width="90">Color:</td>
<td><input
value="not supported" name="t3" size="10" type="text"/></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<p align="left">
<script>
<!--


function show(){
if (document.all||document.getElementById||document.layers){
document.t.t1.value=screen.width
document.t.t2.value=screen.height
document.t.t3.value=screen.colorDepth
}
}
show()
//-->
</script></p>

Seguí leyendo

Cerrar

Link con descripción muy fácil

Mirá mi [blog de prueba]

Si queres poner una lista de vínculos y describirlo abajo, entonces copia este script.
Lo único que tenes que hacer es ir cargando los link y la descripción.
Yo te l dejo completo tal cual aparece en la columna. Te vas a ir dando cuenta donde va cada cosa mirando el código.
Para que quede algo más paquete, le agregue un [recuadro] que lo vimos en otra entrada.

[+/-]Abrir código

<script>
var linktext=new Array()

<!-- aca va la descripción de los link-->
linktext[0]="Generador de fondo para tu blog"
linktext[1]="Alojamiento gratuito de imágenes"
linktext[2]="Generar borde para tu imagen."
linktext[3]="Otra página para cargar música"
linktext[4]="Generador de botones simpaticos"
linktext[5]="Herramienta para generar banner, boton, etc."
var ns6=document.getElementById&&!document.all
var ie=document.all

function show_text(thetext, whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
}

function resetit(whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML=' '
else if (ns6) document.getElementById(whichdiv).innerHTML=' '
}

</script>

<!-- aca pones dirección de vinculo y titulo -->
<fieldset><legend align="left"><span >Link útiles</span></legend>
<a onmouseover="show_text(0,'div1')" onmouseout="resetit('div1')" href="http://lab.rails2u.com/bgmaker/" target="_blank">Background Image</a><br/>
<a onmouseover="show_text(1,'div1')" onmouseout="resetit('div1')" href="http://www.freehostimages.com/" target="_blank">Free Host Images</a><br/>
<a onmouseover="show_text(2,'div1')" onmouseout="resetit('div1')" href="http://toolshell.com/generators/img-border/" target="_blank">Button Code Generator</a><br/>
<a onmouseover="show_text(3,'div1')" onmouseout="resetit('div2')" href="http://meta.boomp3.com/" target="_blank">BooMP3</a><br/>
<a onmouseover="show_text(4,'div1')" onmouseout="resetit('div2')" href="http://www.mycoolbutton.com/" target="_blank">Button Generator</a><br/>
<a onmouseover="show_text(5,'div1')" onmouseout="resetit('div2')" href="http://www.sitesandbanners.com/" target="_blank">CSS Creator</a>
<br/></fieldset><p><fieldset><legend align="left"><span style="color:#29CCCC;">Descripción</span></legend>
<span id="div1"></span></fieldset></p>

Para configurarlo sin problemas copia este código en el [editor HTML] que te dí en otra oportunidad y sale con fritas....

Seguí leyendo

Cerrar