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

Insertar una presentación mediante docs

Se sube a la cuenta docs una presentación formato pps. Tambien se puede importar un ppt o bien elaborar una presentación en el propio docs. Se pulsa Compartir y Publicar/Insertar. Esto crea un enlace a la presentación y un código HTML que ha de copiarse y pegar en Edición de HTML en la entrada del blog. Hay tres tamaños y este es el pequeño:

Procedimiento para incrustar gifs animados

Hay que evitar subir los gifs desde blogger pues elimina la animación. Sin embargo hay un procedimiento indirecto que funciona:

• 
  
  Se accede a nuestra cuenta en Picasa (mismo usuario y contraseña que para blogger).
  
  
  
• 
  
  Se sube el archivo gif animado desde nuestro PC.
  
  
  
• 
  
  Se pulsa Enlace a esta foto y se copia el código de incrustar imagen.
  
  
  
• 
  
  Si queremos que se vea la animación hay que eliminar todo lo que sobra de ese código, y en esencia se quedaría algo así:
  
  <table style="WIDTH: auto"><tbody> <tr><td><img src="http://URLdelaimagen.gif" /></td></tr> </tbody></table>
  
  
  

Publicar doc en blog: procedimiento

Si queremos publicar un documento Word en el blog surge el problema de como incorporarlo para ver su contenido. Una opción es Docs de Google. Mediante esta herramienta pueden verse archivos de texto, hojas de cálculo y otros tipos de documentos. Puede que el formato no se atenga a lo que queremos pero al menos el contenido de los archivos es accesible.
Las formas de ver el documento es mediante URL o publicándolo directamente en el blog.
Se ha elaborado un documento de texto a modo de prueba. Para ver mediante enlace puede pulsarse aquí.
A continuación puede verse el resultado de publicarlo directamente en el blog. Ha de tenerse en cuenta que lo que se ha publicado es lo que va de aquí en adelante:

PUBLICAR DOCUMENTO EN EL BLOG

El proceso seguido para publicar este documento en el blog ha sido el siguiente:

• Si ya se tiene cuenta en Google, abrir Docs y poner usuario y contraseña. Como se supone que tenemos blog, serían los mismos que empleamos para administrarlo.
• Se pulsa Subir y localizamos el archivo Word en nuestro ordenador o bien se pone la dirección URL que tenga. Otra opción sería crear nuestro propio documento mediante el botón Nuevo como es el caso.
• Una vez elaborado y guardado el documento, se abre y se pulsa el botón Compartir/Publicar como página web.
• Hay varias posibilidades. Puede obtenerse una dirección URL para acceso generalizado al documento. También hay una opción para poder publicarlo en nuestro blog. Para ello pulsamos en configurar el sitio de blogs, poniendo los datos que nos piden, pulsamos Probar y si nos da correcto aceptamos. Con esto ya podemos hacer clic en Publicar en blog.
• Después de publicar este documento se puede:
• Volver a publicar la entrada.
• Eliminar del blog.
• Cambiar la configuración del sitio de blogs.

Cambiar un blog de cuenta

Para cambiar un blog de la Cuenta1 a la Cuenta2 siempre que de ambas seamos administradores, hay que seguir este proceso:

• Acceder al blog de la Cuenta1. En configuración/Permisos/Autores del blog/Añadir autores, poner el correo electónico correspondiente a la Cuenta2. Cerrar sesión de blogger con el botón "Salir".
• Acceder al correo electrónico de la Cuenta2 y cuando se reciba el mensaje de invitación, pulsar en el enlace que se adjunta. Completar los datos que se piden (contraseña de la Cuenta2). Cerrar sesión de blogger con el botón "Salir".
• Acceder al blog de la Cuenta1. En configuración/Permisos/Autores del blog, pulsar en "otorgar permisos de administrador" para la Cuenta2. Cerrar sesión de blogger con el botón "Salir".
• Acceder al blog de la Cuenta2. En configuración/Permisos/Autores del blog, pulsar en "eliminar" para el autor de la Cuenta1. El blog habrá desaparecido de la Cuenta1 y habrá pasado a la Cuenta2.

Más información en Ayuda Blogger: pulsar aquí.

Alojamiento de audio e inserción en blog

Se han dado los siguientes pasos:

Creación de una cuenta en Gcast .
Se sube un archivo que al parecer ha de ser MP3 con "Upload new audio files".
Se pulsa el botón XML de arriba a la derecha.
Se pega en nueva pestaña y aparece el archivo.
Sobre el archivo se pulsa porpiedades con botón derecho y se obtiene la URL del archivo.
Se insertan reproductores vistos en El escaparate de Rosa:
Primero:

Segundo:

Tercero:

Cuarto:

Presentación Picasa: una prueba

Pequeña 144 px:



Mediana ancho 288 px:

Grande ancho 400 px:

Hay ambién de anchos 600 y 800 px.

Ocultar etiquetas

Sigo las directrices del Escaparate para ocultar etiquetas y que no salgan en la relación. Lo he realizado con la entrada que he hecho previamente y que he etiquetado como "oculto". Ya había conseguido que esta entrada no se mostrara en la página principal. Ahora tampoco sale en entradas. Ya sólo falta que tampoco aparezca en Archivos del Blog.

Sin embargo sí existe, se puede ver aquí.

Probando etiqueta "oculto"

Siguiendo las indicaciones de Gem@blog en su entrada Ocultar post en la página principal he realizado las modificaciones indicadas y pongo esta entrada con la etiqueta oculto para probar.

NOTA POST EDICIÓN. Se retiran estas instrucciones pues tenían un efecto indeseado: no se mostraban las entradas en página principal que no tuvieran asignadas etiquetas. Desaparecían equiparándose a la etiqueta "oculto".

Enlaces dentro de una misma entrada

En entradas largas puede convenir crear enlaces a una parte o varias de la entrada. Para ello hay que fijar el punto de envio y el de llegada de dichos enlaces. Esto se hace al crear la entrada en Edición HTML. Hay que poner:
En el punto de envío:
<a href="#1">Texto o imagen de envío</a>
En el punto de destino:
<a id="1"></a>
Lo importante es que coincidan los datos que hay después de # en el envío con los que hay después de id en el destino (en este caso el nº 1).
Prueba:pulsa aquí para ir a destino: Texto o imagen de envío
x
x
x
x
x
x
x
x
x
x
xDestino
Visto en esta entrada del Blog de César.

Colocar imagenes

Intentamos colocar dos imágenes sobre el texto de forma que ocupen la parte superior de la entrada, una a continuación de otra.

Texto pie de foto estilo georgia al 60 por cien centrado cursiva negrita espaciado 1em

Se han elegido dos imágenes y se han insertado a la izquierda tamaño grande. Lo preimero que se constata es que se han colocado una sobre la otra quizá porque su ancho supera al ancho de la superficie de las entradas.

Texto para pie de foto en cursiva

Texto para pie de foto georgia muy pequeño y cursiva

Texto para pie de foto georgia pequeño cursiva

tabla

tabla de contenidos	columnas
segunda	tercera

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel risus nisi, non tempus urna. Suspendisse in tincidunt eros. Sed a eros nunc. Quisque et leo ipsum. Nullam purus urna, rutrum malesuada laoreet feugiat, dictum non leo. Vestibulum sed nunc sit amet leo aliquam venenatis non eu arcu. Praesent sit amet nulla odio. Aenean vitae fermentum diam. Donec bibendum ipsum commodo dolor pretium et consectetur mi tincidunt. Sed vel urna at leo dignissim volutpat vel non odio. Maecenas elementum nisl eros. Nam a auctor justo. Nullam id arcu urna. Suspendisse potenti. Aenean ultricies iaculis dolor, a dapibus libero sollicitudin ac. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam leo turpis, pretium vel accumsan at, fermentum vel massa. Duis nec nisi quam, at scelerisque diam. Sed orci turpis, sollicitudin eu fermentum eget, sollicitudin ut nisl. Nam bibendum adipiscing ipsum sed condimentum.
Aenean vitae dui elit. Cras gravida quam ut orci mollis convallis. Mauris iaculis, eros eget porta imperdiet, mauris massa fringilla libero, sed vestibulum risus nibh in dui. Praesent ut nisl vitae mi dictum vulputate. Nulla porttitor, sapien ut malesuada gravida, turpis ante dictum turpis, id dictum neque ipsum eu leo. Nulla facilisi. In eget mauris quis metus consectetur gravida id a risus. Pellentesque eu eros tortor, non accumsan mauris. Nunc mattis risus eleifend diam eleifend suscipit. Ut ultricies feugiat augue in dictum. Donec augue justo, sollicitudin et cursus in, volutpat tincidunt tortor. Etiam convallis turpis sit amet metus dapibus non mollis augue commodo. Ut nec egestas sem.
Integer ut sapien et lacus lacinia egestas. Aenean gravida, turpis nec rhoncus vulputate, mauris risus egestas lorem, laoreet sollicitudin neque metus at eros. Pellentesque fringilla ullamcorper nibh malesuada cursus. Donec quis massa lacinia mi tristique sodales. Integer facilisis felis sed odio feugiat quis cursus est rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus porta urna sit amet erat lobortis non suscipit lorem pellentesque. In pellentesque ligula non mi dictum et faucibus metus vulputate. In arcu neque, vestibulum ac iaculis congue, consequat sed leo. Pellentesque lobortis ultrices quam et dapibus. Morbi vel rutrum risus. Ut purus metus, pellentesque in venenatis quis, fringilla vitae ligula.
Ut vitae nulla et orci convallis mollis. Aliquam nisi risus, tincidunt ac varius et, commodo vitae justo. Proin vitae augue et ipsum bibendum eleifend eu quis lacus. Nunc convallis mollis feugiat. Praesent velit odio, tempor sed volutpat vitae, auctor vitae dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla quis elit sapien, vel lobortis urna. Nulla facilisi. Donec sit amet elementum velit. Nam ac nulla at nulla consequat ornare. In tristique porttitor nunc in dictum. Nulla orci dolor, porttitor interdum pulvinar laoreet, dapibus at quam. Cras tempus massa in diam dignissim tincidunt. Phasellus cursus fringilla metus, nec facilisis neque adipiscing a. Mauris lacus quam, fermentum quis eleifend eget, varius ac eros. Sed auctor ante eu odio ultricies faucibus. In et diam justo, egestas fringilla mauris.
Morbi eros lacus, imperdiet at rhoncus eu, dictum at diam. Donec commodo arcu magna, ut sodales velit. Phasellus quis lobortis nisl. Cras malesuada eros et dui ultricies a dictum nulla gravida. Integer et arcu eros, eget tempor augue. Aliquam elementum dapibus feugiat. Pellentesque vitae lacus ut arcu volutpat semper et ac mauris. Nulla faucibus ipsum risus, non fermentum mi. Curabitur luctus, eros at volutpat varius, est urna posuere nunc, in interdum mi orci id enim. Aenean lacus quam, placerat ac molestie eget, cursus eu velit. Proin ac erat felis. Nunc scelerisque risus vel nunc consectetur blandit. Morbi gravida aliquet justo, non elementum orci sagittis vitae. Vivamus at tellus et elit consequat placerat in vel lectus. Proin nec magna ligula. Integer sit amet felis id nisl volutpat feugiat. Fusce lobortis, neque at tincidunt dictum, odio lacus viverra arcu, gravida aliquet magna erat in erat. Ut dictum adipiscing faucibus. Curabitur risus nunc, pharetra eget mattis in, tincidunt et metus. Nunc massa urna, faucibus eget imperdiet a, luctus vel erat.

Subida de imágenes

Se suben las siguientes imágenes:


Flecha abajo:

Flecha derecha:

a+ activa

a+ pasiva

a- activa

a-pasiva

Imágenes en el propio blogger

En vez de tener las imágenes en una página de almacenamiento (con limitaciones y otros inconvenientes) se intenta que se alojen en el propio blogger. Se probará con la imagen del relieve lateras, cambiandola de Geocities a Blogger.
Se inserta en esta entrada desde el disco duro:



despues se copiará el código de URL que está en esta entrada (en Edición de HTML) y se sustituirá en Diseño (edición HTML) por la que había en el alojamiento en Geocities. Una precaución previa que hay que tener es comprobar la "talla" de la imagen. Al insertar la imagen, aunque pongamos tamaño "grande" el máximo de anchura que tiene es 400 px lo que puede comprobarse mediante el tramo s400 del código URL. Si la imagen que vamos a utilizar es más ancha, nos la reduce a 400 px. Para evitarlo hay que cambiar en el código s400 por s1600, lo que hace que la imagen tenga su tamaño real, en este caso con una anchura de 930 px.