Ver / ocultar: dos procedimientos

Procedimiento para ver ocultar una parte de una entrada. También se puede aplicar a un elemento del lateral u otra parte del blog. Se realiza mediante scripts que se colocan en la plantilla. Vamos a ver dos formas: efecto instantáneo y efecto deslizamiento.

1. Ver y ocultar con efecto instantáneo. ▼

Entramos en Diseño / Edición HTML, buscamos </head>. Antes de este texto se pega el siguiente script:

<!-- inicio de script para expandir y contraer -->
<script type='text/JavaScript'>
function verocultar(cual) {
var c=cual.nextSibling;
if(c.style.display==&#39;none&#39;) {
c.style.display=&#39;block&#39;;
} else {
c.style.display=&#39;none&#39;;
}
return false;
}
</script>
<!-- fin de script para expandir y contraer -->

El punto del elemento ver/ocultar se fija mediante la siguiente secuencia:

<a onclick="return verocultar(this);"href="javascript:void(0);">Ver/Ocultar &#9660; </a><div style="display: none;">
....... el contenido a ocultar .......</div>

por ejemplo hemos puesto la secuencia a continuación:

Ver/Ocultar ▼

Es importante que toda la secuencia esté escrita en la misma línea.
Visto en Vagabundia

2. Ver y ocultar con efecto deslizante. ▼

Es necesario tener instalado el script Prototype copiando este código antes de </head>:

<!-- inicio de script para Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- fin de script para Prototype y Scriptaculous-->

Al igual que el anterior método hay que insertar una secuencia que establece el enlace que muestra y oculta y el contenido a ocultar:

<a href='#' onclick='Effect.toggle("UNO","slide"); return false'>Texto enlace &#9660;</a><div id='UNO' style='display: none;'>
Aquí la parte oculta de la entrada
</div>

a continuación se pone la secuencia. Pulsar en el enlace para ver el efecto y el resto de las instrucciones:

Texto enlace ▼

La palabra UNO que aparece en el código sirve para identificar la secuencia por si ponemos más de una, por lo que para las demás hará falta otra palabra diferente.
Visto en El Escaparate de Rosa. Rosa indica como recomendable publicar desde Edición HTLM sin volver a la pestaña Redactar.
Puede aprovecharse este script para múltiples aplicaciones a investigar, por ejemplo Expandir/Contraer elementos del lateral y otros efectos como volver arriba con efectos deslizantes.

Escribir código en entradas del blog. Caja contenedora

Forma de poner códigos en entradas sin que afecte la apariencia. Alternativa a textarea. Antes de ]]></b:skin> pegar el código:

/* caja contenedora inicio */
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #dddddd;
border-top : 1px solid #555555;
border-right : 2px solid #555555;
border-bottom : 2px solid #555555;
border-left : 1px solid #555555;
}
/* caja contenedora final */

Esto nos da forma a la caja, que se puede aplicar a cualquier texto resaltado en una entrada u otra parte del blog. Pueden editarse los detalles a gusto. Después hay que insertar el contenido de esta forma:

<div class="codeview">
Aquí añadimos el contenido de la caja.
</div>

Para insertar código hay que copiarlo y después utilizar un "traductor" para pegarlo. El resultado del traductor se pega dentro de la caja creada o directamente en la entrada o elemento.
La caja contenedora vista en techieblogger a traves de gem@blog.
Los traductores mencionados que se vieron: Postable y SimpleCode. En este último si se conserva "code" se inserta con fuente courier.

Fecha actual

Poner la fecha actual en cualquier elemento HTLM. Copiar y pegar el siguiente script:

<script><!-- dows = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes", "Sábado"); months = new Array("enero","febrero","marzo","abril","mayo","junio","julio", "agosto","septiembre","octubre","noviembre","diciembre"); now = new Date(); dow = now.getDay(); d = now.getDate(); m = now.getMonth(); h = now.getTime(); y = now.getFullYear(); document.write(dows[dow]+", "+d+" de "+months[m]+" de "+y); //--></script>;

Resultado:



Visto en: Todo de Blogger

Botón volver

Copiar este código y pegar donde se quiera poner el botón:

<form><input name="Volver atrás" onclick="history.back()" type="button" value="Volver" /></form>

Prueba para comprobar que funciona:

Visto en: Ciudad Blogger

Prueba insertando desde divshare documento pdf