Recursos y Diseño Web: febrero 2008

A veces vemos en los post de entradas, sobre todo cuando los textos son demasiados largos, la coletilla del "seguir leyendo", para que si lo creemos conveniente pulsemos y sigamos leyendo el resto del texto si nos interesa. Bien pues para aplicarlo basta seguir los siguientes pasos:

Primeramente buscamos la etiqueta -/head-, y a continuación pegamos lo siguiente:

Segundo paso es buscar en la plantilla, expandiendo artilugios primeramente este otro código:

<b:includable id='post' var='post'>

<div class='post uncustomized-post-template'

<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>

<h3 class='post-title'>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<p><data:post.body/></p>

<div style='clear: both;'/> 

</div>

y esto mismo los sustituimos por el siguiente código:

<b:includable id='post' var='post'>

<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>

<a expr:name='data:post.id'/>

<b:if cond='data:post.title'>

<h3 class='post-title'>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>

<style>#fullpost {display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>SIGA LEYENDO</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>CERRAR NOTA</a></p>

</span>

<script type='text/javascript'>

checkFull("post-" + "<data:post.id/>");

</script>

</b:if>

<div style='clear: both;'/> 

</div>

Aceptamos y ya está listo. Solamente nos queda en cada entrada o post ir añadiento esto otro para que funcione:
texto

<span id="fullpost">

texto

</span>

Seguir Leyendo...[+/-]

[+/-]

Efecto ir arriba

[+/-]

Etiquetas HTML-6

Atributos:

SRC="..." Especifica la ubicación de la Imagen.

DYNSRC="..." Especifica la ubicación de un video o un mundo VRML. Se puede soportar una imagen usando el SRC de primero para

aquellos Browser que no soportan Videos. (IE)

CONTROLS Activa una serie de controles de Video. (IE)

LOOP="n" Para videos, especifica en número de repetición del video. Un valor de "-1" o "INFINITE" repite el video

indefinidamente. (IE)

Seguir leyendo...

START="..." Especifica el momento inicial de reproducción del video. Se puede usar "FILEOPEN" por omisión, "MOUSEOVER", o

ambos. (IE)

USEMAP="#map1" Dice al Browser que use la imagen como una interface de selección definida con el nombre de "map1".

ISMAP Dice al Browser que la imagen es un mapa de Selección.

ALT="..." Especifica un texto que se muestra en los Browser que no soportan imagenes.

BORDER="..." Especifica el ancho del borde alrededor de la imagen. Si BORDER es "0", No presenta bordes en la imagen.

LOWSRC="..."--Especifica la Direeción de la imagen que se cargará primero antes de que la imagen sea cargada. LOWSRC

usualmente se refiere a una imagen pequeña.

ALIGN="..."--especifica el alineamiento de la imagen.

Valores:

RIGHT o LEFT--Alinea a un lado especifico de la página, y todo el texto se justifica al lado de la imagen.

TOP, MIDDLE, BOTTOM, TEXTTOP, ABSMIDDLE, BASELINE, y ABSBOTTOM--Especifica el alineamiento vertical de la imagen.

VSPACE="..."--Especifica el espacio entre el borde de la imagen y los items encima o debajo de ella.

HSPACE="..."--Especifica el espacio entre el borde de la imagen y los items a la derecha e izquierda.

WIDTH="..."--Especifica el ancho de la imagen. Si el tamaño no coincide con el original se ajusta.

HEIGHT="..."--Igual al anterior pero con la altura.

<MAP atributo>...< /MAP>

Especifica los puntos de selección de una imagen. El comando AREA se usa para definir las coordenadas.

Atributos:

NAME="..."--Especifica el nombre del mapa para ser usado después.

<AREA atributo1 atributo2>...< /AREA>

Especifica la silueta y el tamaño del area de selección el el mapa que se muestra. Se usa dentro del comando MAP.

Atributos:

SHAPE="..."--Especifica la Silueta del area de selección. Los valores posibles son RECT, RECTANGLE, CIRC, CIRCLE, POLY, o

POLYGON.

COORDS="..."--Especifica la coordenada de la silueta. Dos pares de coordenadas indican un rectangulo, tres o mas pares

definen un poligono, y un par de coordenadas y un radio define un Circulo.

HREF="..."--Especifica la dirección donde apunta el area del mapa.

NOHREF--Indica que esta silueta no apunta a una dirección.

TARGET="..."--Especifica la ventana donde se mostrará la página. El target puede ser el nombre de un Frame o alguno de los

siguientes valores:

"_blank"--Muestra la dirección en un página en blanco.

"_parent"--Muestra la dirección en la pagina que lo invocó.

"_self"--Muestra la dirección en la misma ventana. (por omisioón)

"_top"--Muestra la dirección en la ventana actual usnado todo el espacio.

<MAP atributo>...< /MAP>

Especifica los puntos de selección de una imagen. El comando AREA se usa para definir las coordenadas.

Resumen...

[+/-]

Entradas Ampliables

Entradas Ampliables o "Leer Mas"
Para conseguir el efecto de "leer más" en un resumen de texto y que después nos muestre la totalidad del artículo escrito en el post y que además nos lo muestre en la misma página, pudiendo volver al final al resumen, seguiremos los siguientes pasos
en la plantilla, Edición HTML:

Seguir leyendo...

Primeramente entre las etiquetas -head-,justo antes del final de -/head-:insertaremos este código:
<script src='http://rarunach.googlepages.com/hackosphere.js' type='text/javascript'/>

Luego buscas el siguiente código:
<div class='post-header-line-1'/>

<div class='post-body'>

<p><data:post.body/></p>

<div style='clear: both;'/> 

</div>

procediendo a borrar lo siguiente :<div class='post-body'> y sustituirlo por este otro código:
<div class='post-body' expr:id='"post-" + data:post.id'>

<b:if cond='data:blog.pageType == "item"'>

seguimos en la plantilla y ahora después de esto:<p><data:post.body/></p>

añades lo siguiente :
<b:else/>

<style>#fullpost {display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>

<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>

</span>

<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>

</b:if
Ahora guardas los cambios y ya está todo hecho, sólo nos faltará aplicar este pequeño código en las entradas para que pueda funcionar lo de -leer más-:
Aquí escribes el contenido.

<span id="fullpost">

Aquí escribes el resto del contenido que no se vera.

</span>
para más comodidad esta última parte se puede dejar fijo en la plantilla para no tener que ponerlo en cada entrada, para eso iremos a Opciones, luego a Formato y luego en Plantilla de Entrada, aplicaremos esto último:
<span id="fullpost">

Aquí escribes el resto del contenido que no se vera.

</span>

Resumen...

[+/-]

Plantilla BlueWave

[+/-]

Imagen movible

Este es un truco para poder mover por toda la página a nuestro gusto todas las imagenes que queramos. Es interesante aunque en la práctica puede que no lo sea tanto,ya que dependerá de las aplicaciones que queramos darlo. No obstante este es el truco. Primeramente antes del cierre de -/Head- insertaremos el siguiente código:

Abrir Código



<!--arrastrar imagen-->

<style type='text/css'>



.drag{

position:relative;

cursor:hand;

z-index: 100;

}



</style>



<script type='text/javascript'>



/***********************************************

* Drag and Drop Script: &#169; Dynamic Drive (http://www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for this script and 100s more.

***********************************************/



var dragobject={

z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,

initialize:function(){

document.onmousedown=this.drag

document.onmouseup=function(){this.dragapproved=0}

},

drag:function(e){

var evtobj=window.event? window.event : e

this.targetobj=window.event? event.srcElement : e.target

if (this.targetobj.className==&quot;drag&quot;){

this.dragapproved=1

if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}

if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}

this.offsetx=parseInt(this.targetobj.style.left)

this.offsety=parseInt(this.targetobj.style.top)

this.x=evtobj.clientX

this.y=evtobj.clientY

if (evtobj.preventDefault)

evtobj.preventDefault()

document.onmousemove=dragobject.moveit

}

},

moveit:function(e){

var evtobj=window.event? window.event : e

if (this.dragapproved==1){

this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+&quot;px&quot;

this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+&quot;px&quot;

return false

}

}

}



dragobject.initialize()



</script>

<!--fin arrastrar imagen-->

Luego en cada imagen que queramos aplicarlo, tendremos que introducir la URL de la imagen dicha dentro de este otro código:
<img src=http://URL_IMAGEN" class="drag" />

Ejemplo:

[+/-]

Enlaces misma página

[+/-]

Agrandar Imagenes

[+/-]

Fondo en los Posts

[+/-]

Plantilla Ilike

[+/-]

Curso de Inglés

[+/-]

Etiquetas HTML-5

Atributos:
ALIGN="..."--Especifica el alineamiento del parrafo. Por ejemplo:"center", "left", o "right".
<PLAINTEXT>.....< /PLAINTEXT>
Muestra el texto sin formato aun cuando contenga comandos de HTML. Obsoleto -- Se usa el comando PRE.

<PRE>.....< /PRE>

Muestra texto sin formato, sin eliminar espacios y saltos.

<S>.....< /S>

Muestra el texto con una línea por el centro (tachado). Es diferente al comando <STRIKE>.

Seguir Leyendo..


ALIGN="left"
<SAMP>...< /SAMP>

Indica un ejemplo de salida para un formulario o programa. El texto se muestra en tamaño pequeño.

<SMALL>...< /SMALL>

Muestra el texto en tamaño pequeño.

<SPACER atributo>...< /SPACER>

(Netscape) Inserta bloques de espacios en la página.

Atributos:

ALIGN="..."--Cuando el tipo es de Bloque (BLOCK) especifica el alineamiento del texto alrededor.

Valores:

RIGHT o LEFT--Alinea el bloque de espacios en el lado especificado, y el texto se trunca alrededor del bloque.

TOP, MIDDLE, BOTTOM, TEXTTOP, ABSMIDDLE, BASELINE, y ABSBOTTOM--Especifica el alineaminto vertical del bloque con cualquier

elemento el la misma línea.

HEIGHT="..."--Cuando el tipo es BLOCK, especifica la altura del bloque.

SIZE="..."--Cuando el tipo es HORIZONTAL, o VERTICAL, especifica el tamaño del espacio.

TYPE="..."--Especifica el tipo de espacio.

Valores:
HORIZONTAL--Inserta espacios en blanco entre palabras.

VERTICAL--Inserta espacios entre dos líneas.

BLOCK--Inserta un bloque de espoacios rectangular, muchos usan el comando IMG.

WIDTH="..."--Cuando el tipo es BLOCK, especifica el ancho del bloque.

<STRONG>...< /STRONG>

Muestra el texto en negritas, resaltado.
<SUB>...< /SUB>

Muestra el texto encerrado como un subindice.

<SUP>...< /SUP>

Muestra el texto encerrado como superindice.

<TT>...< /TT>

Muestra el texto en formato teletipo.

<U>...< /U>

Muestra el texto subrayado. No use este comando puede confundir con una dirección o Link.

<VAR>...< /VAR>

Especifica una variable. Eltexto se muestra en letras pequeñas y de tamaño fijo.

<WBR>

Hace que el texto que contiene, se trunque si es necesario.

<XMP>...< /XMP>

Hace que el texto encerrado se muestre sin procesar los coamdos HTML que contenga. Obsoleto -- Se usa el comando PRE.

Multimedia:

<IMG atributo1 atributo2>

Coloca una imagen el en documento.