El Blog de J.Guti.

Traspaso Blog

2008-03-24T23:21:00.005+01:00

SETRASPASA

EL BLOGA LAPAGINA

WWW.JGUTI-GUTI.

BLOGSPOT.COM.

GRACIASPORSU VISITA

Imprimir Posts

2008-02-03T16:40:00.001+01:00

Una opción bastante interesante puede ser la de tener en el blog la opción de poder imprimir los posts, para ello añadiremos un botón al princio o al final de cada post, eso depende de donde más nos guste, para ponerlo añadiremos el siguiente código en el post, al princio o fin del mismo:
Código:
<a href="javascript:print()">Imprimir</a>

Paro no tener que andar copiando y pegando dicho código cada vez que queramos insertarlo, podemos ponerlo fijo, yendo en la página a "configuración" y seguidamente a "formato" y al final en -plantilla de entrada-, lo insertaremos; damos -aceptar- y listos
Imprimir

Etiquetas HTML-4

2008-01-29T20:31:00.000+01:00

Atributos:

ALIGN="..."--Fija el alineaminto. Por ejemplo: "center", "right", o "left".

<EM>...< /EM>

El texto se muestra en cursivas (Itálicas).

<FONT atributo=">...< /FONT>

Fija las propiedades y el tipo de letra del texto que contiene.

Atributos:

[]Seguir Leyendo..


SIZE="..."--Fija el tamaño de las letras desde valores entre 1 y 7 donde 3 es el valor por omisión. Se puede especificar 



valores relativos, ejemplo. SIZE=+3 . 

COLOR="..."--Especifica el color de las letras. 

FACE="..."--Especifica el tipo de letra. Se puede definir una lista separada por comas. Por ejemplo: Arial, Verdana, etc. 



<HR atributo1="..." atributo2="..."> 

Inserta una líea horizontal. 



Atributos: 

SIZE="..."--Especifica el grosor de la línea. 

COLOR="..."--Especifica el color de la línea.(IE) 

WIDTH="..."--Especifica la longitud de la línea como porcentaje de la página, ejemplo. WIDTH=70% . 

ALIGN="..."--Especifica el alineamiento: RIGHT, LEFT, o CENTER. 

NOSHADE--Muestra la línea como sólido. 



<I>...< /I> 

Presenta el texto encerrado como Itálicas. 



<KBD>...< /KBD> 

Especifica el texto a ser entrado por teclado. El texto se muestra en negritas y de tamaño fijo. 



<LISTING>.....< /LISTING> 

Muestra texto en tamaño fijo. Obsoleto -- se usa el comando PRE. 



<MULTICOL>.....< /MULTICOL> 

Muestra un texto en columnas. 



Atributos: 

COLS="..."--Especifica el numero de columnas. 

GUTTER="..."--Especifica el numero de pixels entre columnas. 

WIDTH="..."-- Especifica el ancho de las columnas. 



<NOBR>.....< /NOBR> 

El texto que lo contiene no se trunca en la pantalla. 



<P atributo>...< /P> 

Diseñado para encerrar texto de un parrafo. El cierre es opcional.

Inicios de Internet

2008-01-24T23:17:00.001+01:00

XHTML y CSS

2008-01-24T22:48:00.000+01:00

Recogido de la página de La Blogueria, por medio de la de la Web Scribd,
este manuel de XHTML y CSS

Etiquetas HTML-3

2008-01-24T01:30:00.000+01:00

Estructuras basicas HTML-3

[]Seguir Leyendo



Atributos: 

ACTION="..." Especifica la ubicación del puerto del programa donde se pasará los parámetros de busqueda. 

PROMPT="..." Especifica un mensaje alterno para el diálogo. 



Formato General: 

<ADDRESS>.....< /ADDRESS> 

Encierra el archivo de firma del autor de la página. El texto se muestra en Italicas. 



<B>...< /B> 

Resalta en Negritas el Texto encerradot. 



<BIG>...< /BIG> 

Incrementa el tamaño del Texto. 



<BLINK>.....< /BLINK> 

Hace el texto parapadeante. 



<BLOCKQUOTE>.....< /BLOCKQUOTE> 

Encierra un enfasis. El margen izquierdo y derecho están indentados. 



<BR> 

Inserta un final de línea. 



Atributos: 

CLEAR="..."--Causa que el texto alrededor de la imagen se elimine. Los valores posibles son: RIGHT, LEFT, o ALL. 



<CENTER>.....< /CENTER> 

Centra los objetos que contiene. Este comando puede centrar cualquier cosa incluyendo imagenes, texto, tablas, formularios, 

etc. 



<CITE>.....< /CITE> 

Encierra una Cita como un titulode un libro,etc. 



<CODE>.....< /CODE> 

Encierra Codigo de ejemplo. El texto se muestra en letras pequeñas. 



<COMMENT>.....< /COMMENT> 

Define un comentario. Todo el texto es ignorado aun si incluye codigo HTML. 



<DFN>.....< /DFN> 

Encierra una definición. El texto dentro de este comando se formatea como una definición. 



<DIV ALIGN=">...< /DIV> 

Especifica el alineamiento de los elementos que contiene. Se puede usar para dividir el documento que tiene secciones 



alineadas en forma diferente. 


[]Cerrar

Etiquetas HTML-2

2008-01-23T01:00:00.000+01:00

Estructuras Basicas HTML-2

[]Seguir Leyendo


ATRIBUTOS 





ALINK="..." Especifica el color de las Direcciones activadas en la página. 

BACKGROUND="..." Especifica el papel tapiz de la página. un Archivo *.jpg o *.gif. 

BGCOLOR="..."Especifica el Color del Fondo del Documento. 

Los colores son expresados en formato RGB(Red, Green,Blue), donde cada color tiene un valor desde el 0 (0) hasta el 255 (FF). 



Amarillo = #FFFF00 

Azul = #0000FF 

Azul Claro = #00CCFF 

Blanco = #FFFFFF 

Gris = #CC9999 

Lila = #CC33FF 

Negro = #000000 

Rojo = #FF0000 

Verde = #00FF00 



BGPROPERTIES=FIXED Fija la imagen del Fondo para que no se desplace. (IE) 

LEFTMARGIN="..." Especifica el margen Izquierdo de todo el documento.(IE) 

LINK="..." Especifica el color de las direcciones contenidas en el documento. 

TEXT="..." Especifica el Color del texto. 

TOPMARGIN="..." Fija el margen superior de todo el Documento.(IE) 

VLINK="..." Especifica las direcciones visitadas, incluidas en el Documento. 



<BASEFONT atributo= " "> 

Fija los atributos de escritura en toda la página. 



ATRIBUTOS 

SIZE="..." Fija el tamaño de las Letras, se usa un número entre 1 y 7 donde el 3 es el tamaño por omisión. Tambien permite 



tamaños relativos, e.j. SIZE=+2 . 

COLOR="..." Especifica el color de las Letras en todo el Documento. 

NAME="..." Especifica el tipo de apariencia de la Letra en todo el Documento. 



<Hn>...< /Hn> 

Especifica un encabezado de texto de varios tamaños, n indica los tamaños de 1 a 6, 1 es el más grande y 6 es el más pequeño. 



<ISINDEX> 

Muestra un diálogo de indice de busqueda. Con este comando solamente no se puede crear una pagina de busqueda, el Servidor 



debe ser configurado para soportarlo. 



[]Cerrar

Etiquetas HTML

2008-01-22T22:03:00.000+01:00

Estructuras Basicas

[]Seguir Leyendo




ESTRUCTURAS BASICAS 



<!-- ........ --> 

Para escribir comentarios, los cuales son ignorados por el Navegador. 



<HTML> ... </HTML> 

Indica que es un documento HTML, debe encerrar todo el Documento. 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> 

Encabezado de todo documento de la version HTML 3.2. 



<HEAD> ... </HEAD> 

Encabezados del Documento. Los siguientes son los parámetros del Comando head. 



<title> ... </title> 

Indica el Titulo del Documento. Aparece en la ventana del Navegador. 



<Base href="http://servidor.tipo/nombre.html"> 

Especifica la dirección del Documento por defecto en Uso. Util cuando se hace referencia a otra página dentro del Documento. 



<Base href="http://servidor.tipo/nombre.html" Target="..."> 

Indica el "Frame" por defecto de la página actual. 



<Meta attributo1, attributo2> 

Este comando describe algunas caracteristicas del documento. Por ejemplo: 



<Meta http-Equiv="Refresh" Content=ss> 



Actualiza la pagina cada ss segundos. 





<Meta http-Equiv="Refresh" Content=ss url="http://servidor.tipo/nombre.html"> 



Llama una página diferente a los ss segundos. 



<Meta http-Equiv="Expires" Content="Sun, 10 Sep 1998 06:23:00 GMT> 



Expira el documento a la fecha indicada y debe ser actualizada. 



<Meta http-Equiv="Keywords" Content="Clave1, Clave2,.."> 



Especifica palabras claves para los buscadores de la Red. 



<Meta http-Equiv="Description" Content="Describa su página aquí .."> 



Especifica una descripción general de su página. 





<BODY attributo1=".." attributo2=".."> ... </BODY> 

Contiene el cuerpo del Documento, o el contenido de la Página. 



[]Cerrar

VideoTutorial

2008-01-21T23:38:00.000+01:00

VideoTutotial para instalar plantilla en Blogger

Guia del buen bloguero!

101 Tips

2008-01-21T18:01:00.000+01:00

101 Tips para ser un buen bloguer

• Si aún no, empieza a bloguear hoy
• Escribe sobre algo que ames
• Si empiezas a bloguear en serio compra tu propio dominio
• Asegúrate que el nombre del dominio es igual al nombre del blog
• Un nombre corto y fácil de recordar.
• Usa Blogger
-Fuente: Cabalas

[]Seguir leyendo...



• Usa Wordpress y sus plugins.
• Bloguea consecutivamente
• Escribe al menos 5 posts por semana
• Corrige y escribe bien sin falta de ortografías
• La Sidebar cuanto menos imágenes mejor
• Interactúa con otro bloggers
• Deja comentarios significativos
• Contesta a tus visitantes en los comentarios
• Si el blog te sirvió deja siempre un comentario
• Haz un backup de tu blog (recomiendo uno cada semana mínimo)
• Deshazte del calendario del SideBar
• Encuentra tu hueco sabiamente.
• Participa en foros online
• Pon un link a tu blog en la firma
• Haz ligero tu blog y que cargue rápido
• El contenido es el rey
• Personaliza tu Plantilla o Témplate
• Pon la Vía o en Enlace del Post
• Simplifica la manera de llegar
• Apaláncate en los enlaces sociales
• Juega en redes de blogs
• Escribe listas de “TOP 10″
• Haz que tu Blog sea rápido al abrirse
• Usa pings
• Escribe con tus Propias Palabras el Post
• Haz tus artículos cortos y rápidos
• Introduce tu blog en Directorios
• Si el Blog te gusto mételo entre tus links
• Usa FeedBurner
• Usa tu sentido del humor
• Sé generoso
• Anima a tus lectores a que se suscriban
• Ten algunos posts en borradores para las emergencias
• Anima tus lectores a que envíen tus posts a Digg, Meneame,…
• Pon un enlace RSS en cada página.
• Usa post en “serie”
• Devuelve comentarios
• Devuelve Links
• Usa fuentes legibles
• Visita de vez en cuando blogs nuevos y salúdales
• Haz que el Leer Mas de los post se abra en la misma página
• Haz un Blog INTERESANTE, y luego piensa en ADSENSES
• Piensa bien en la temática del blog y sigue esa línea
• Usa Google Analytics
• Usa Histats para ver tus visitantes, no tiene publicidad en pop ups
• Haz entrevistas por correo
• Sé tu mismo, si puedes pon tu nombre de verdad
• Evita el contenido duplicado de los post por no observar
• Usa un lector RSS
• Lee el máximo de blogs posibles
• Céntrate en el contenido y no pongas nada que no esté relacionado
• No olvides los blogs que te gusten
• Pon una foto tuya en alguno de tus blogs
• Créate tu propia página de publicidad
• Usa Meta Tags prudentemente
• Aprende lo básico de Html
• Usa imágenes siempre que puedas dentro de los Post
• Crea Encuestas para tus lectores
• Coloca la publicidad siempre que tengas un blog interesante
• Sé paciente no quieras ser Famoso en unos meses
• Considera tener un compañero/a para ayudarte en el blog
• Envía artículos a los directorios os recomiendo Corank
• Comparte tu trabajo propio con otros blogs
• Comparte lo que has hecho para otros
• Lee BlogEsfera e inscríbete
• No abarrotes tu sidebar con iconos tu blog se hace lento al abrir
• Deshazte de las laaaargas listas de blogroll o simplifícalas
• Experimenta toda clase de trucos html en un Blog de Pruebas
• Technorati te hace saber quién puso algo relacionado con tu blog
• Enlaza a otros blogs siempre que sea posible
• Haz fácil que tus lectores contacten contigo
• Usa Títulos que se sepa de que va el post con una simple mirada
• Ofrece suscripciones por mail
• Contesta siempre a las preguntas
• Contesta siempre a los comentarios
• No te olvides de Blogger Draft
• Activa la suscripción a los comentarios
• Ofrece herramientas y links
• Escribe con un toque personal
• Conviértete en un experto en tu materia
• No dependas de los enlaces a posts
• Siempre aporta tu opinión
• Usa colores simples
• Participa en proyectos de blogs
• Conoce a otros bloggers personalmente
• Lista tus productos favoritos
• Ten voz
• Organiza tus categorías
• Habla directamente con tus lectores
• Crea una estructura de URL eficiente
• Pon enlaces funcionales en el pie
• Sé creativo-@, adapta las ideas aprendidas para crear tú
• Pon videos que vayan relacionados con tu blog
• Considera añadir PodCasts
• Crea una lista de “101″ propia, si eres capaz!!


[]Cerrar

Plantilla Tipoxp

2008-01-18T20:06:00.001+01:00

Blogger XML template tema -"tipoxp"
Plantilla a 3 columnas, con un diseño excepcional

Ver Demo
Código:

Vincula desde tu Blog este Post!

Reflejo Imagenes

2008-01-17T22:03:00.001+01:00

El efecto reflejo en las imagenes es algo que podemos aplicar para variar la presentación de las mismas y queda bastante bien y a la vez es una manera diferente de verlas

Código:

Para ello aplicamamos el siguiente código antes de -/head-:
<script src='http://blogdecesar.googlepages.com/reflection.js' type='text/javascript'></script>

y luego en cada entrada pondremos este otro:
<img src="dirección de foto" class="reflect"/>

Plantilla Neo

2008-01-15T23:28:00.000+01:00

Plantilla Neo vista en la página de Cesar de 3 columnas bastante proporcionadas entre si las tres.Además lleva incorporado en los post la instrucción de "Leer más".Plantilla por otra parte muy ràpida en pasar de un archivo a otro. Un bonito diseño a tener en cuenta

Ver Demo
Código
Vista en :El Blog de Cesar

Carteles

2008-01-15T13:23:00.000+01:00

TEXTO, TEXTO, TEXTO, TEXTO

Fondo Celeste

Plantilla Styleicious

2008-01-15T11:04:00.001+01:00

Plantilla Blogy-Syleicious - Blogger xml template tema layout
Plantilla BlogyStyleicious con un bonito diseño. Un diseño a 3 columnas dos de ellas en el sidebar derecho.Perteneciente a la familia de Blogy, todas a cual más bonitas
Ver Demo
Código
Ported byBlogandweb

Doble título

2008-01-14T18:57:00.000+01:00

Una forma de poner un texto o simplemente para poner un determinado titulo
y que se vea doble, es el código que publica hoy en el blog de Gem@
primeramente vamos a plantilla, editamos y añadimos el siguiente código justo antes de este:
]]></b:skin>
añadimos este otro:

h5{margin: 0;font-weight: normal;color: #e6cbdb;font-size: 2.1em;position: relative;}h6{margin: 0;display: inline;position: relative;top: -.5em;left: 1em;font-size: 1.5em;font-weight: normal;color: #6c1e4b;}

Después cada vez que queramos ver texto "Doble", añadiremos lo siguiente bien en una entrada o en nuestro -sidebar-
<h5>Aquí texto</h5>

<h6>Aquí texto</h6>

Ejemplo:

Doble título

Doble titulo

Enlaces en pagina

2008-01-14T18:07:00.000+01:00

Enlaces dentro de la misma página

Para poner enlaces dentro de la misma página,funciona muy bien este truco.Primero se pone el enlace de referencia y después el de destino.

Primero pones el enlace de referencia

<a href="#1">Ir a mi post</a>

Después el de destino

<a id="1"/>Mi post</a>

Ejemplo:
Primero pones el enlace de referencia
Ir a mi post

Después el de destino
(Mi post) llamado desde la instrucción de arriba

Blanco o negro

2008-01-11T11:04:00.000+01:00

Página interesante para guardar toda clase de documentos y otros

Plantilla Wow

2008-01-08T18:49:00.000+01:00

wow - Blogger xml template tema layout
Nueva plantilla Wow. Un diseño a 3 columnas dos de ellas en el sidebar derecho.
Ver Demo
Código
Ported byJack Book

Enlaza este Blog

2008-01-05T12:11:00.000+01:00

Esto será bastante util para poner una cajita de texto dentro de tu blog para que te puedan copiar el código y así te puedan enlazar el blog mediante una imagen y cajita de texto. Les muestro en el siguiente enlace un "generador de código para tus visitas":
Ver Ejemplo:

Link-Me

Generador Código

Plantilla Blogy02

2007-12-26T20:43:00.000+01:00

Tema Plantilla XML Blogger Templates

[+/-]Código:

Enviar e-mail

2007-12-22T22:12:00.000+01:00

Una buena manera de enviar un e-mail desde el propio blog es creando un formulario en la misma página web.Este es el código que tendrán que insertar donde quieran situarlo; bien sea en una entrada o en el sidebar.

<form action="mailto:direcciondecorreo@servidor.com" method=post>
<table align="center" border="0"><td align="left" width="100">Nombre:</td><td align="center" width="150"><input name="nombre" maxlength="25" type="text" value=""></td> <tr><td align="left" width="100">Email:
</td><td align="center" width="150"><input name="mail" maxlength="25" type="text" value="">
</td> <tr><td align="left" width="100">Motivo:</td><td align="center" width="150"><input name="motivo" maxlength="25" type="text" value=""></td> <tr><td align="left" width="100"> Mensaje:</td><td><textarea name="mensaje" rows=3 cols=20></textarea></td><tr><td width="100"></td> <td align="right" width="150"><input name="boton" type="submit" value="Enviar">

</td>

</table>

</form>

Con lo que quedaría así para poder introducir los datos personales y
enviar el e-mail.

Plantilla Simplex

2007-12-22T10:56:00.000+01:00

Otra bonita plantilla al igual que la de "Leia", es esta titulada "Simplex", sacada de de la página de /freshbloggertemplates.blogspot.com>

[+/-]Código:


Texto:

Texto:
Ver Demo
Download

Texto:

Plantilla Leia

2007-12-22T10:12:00.000+01:00

Una plantilla a mi parecer muy bonita es la titulada "leia" de 3 columnas y con una combinación de colores bastante acertada.Vista en la página de freshbloggertemplates.
http://freshbloggertemplates.blogspot.com/ y en la página de Ricardo Santos http://ricardouk.blogspot.com/search?q=leia

[+/-]Código:


Texto:


Texto:
<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: Leia

Author: Kapikua

URL: http://Kapikua.com/



Converted to Blogger by: Fresh Blogger Templates

URL: FreshBloggerTemplates.blogspot.com

----------------------------------------------- */



/* Variable definitions

====================

<Variable name="bgcolor" description="Page Background Color"

type="color" default="#fff" value="#ffffff">

<Variable name="textcolor" description="Text Color"

type="color" default="#333" value="#546367">

<Variable name="linkcolor" description="Link Color"

type="color" default="#58a" value="#5588aa">

<Variable name="pagetitlecolor" description="Blog Title Color"

type="color" default="#666" value="#666666">

<Variable name="descriptioncolor" description="Blog Description Color"

type="color" default="#999" value="#999999">

<Variable name="titlecolor" description="Post Title Color"

type="color" default="#c60" value="#318796">

<Variable name="bordercolor" description="Border Color"

type="color" default="#ccc" value="#ffffff">

<Variable name="sidebarcolor" description="Sidebar Title Color"

type="color" default="#999" value="#999999">

<Variable name="sidebartextcolor" description="Sidebar Text Color"

type="color" default="#666" value="#666666">

<Variable name="sidebarbg" description="Sidebar Background"

type="color" default="#666" value="#303030">

<Variable name="altext" description="Alternate Text"

type="color" default="#333" value="#333333">

<Variable name="bodyfont" description="Text Font"

type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Arial, Helvetica, sans-serif">

<Variable name="headerfont" description="Sidebar Title Font"

type="font"

default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

<Variable name="pagetitlefont" description="Blog Title Font"

type="font"

default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

<Variable name="descriptionfont" description="Blog Description Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

<Variable name="postfooterfont" description="Post Footer Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

*/



/* Use this with templates/template-twocol.html */



body {

background:$bgcolor;

margin:0;

color:$textcolor;

font-family:Arial, Helvetica, sans-serif;

text-align: center;

}

a:link {

color:$linkcolor;

text-decoration:none;

}

a:visited {

color:$linkcolor;

text-decoration:none;

}

a:hover {

color:$titlecolor;

text-decoration:underline;

}

a img {

border-width:0;

}



input, textarea {

border:1px solid #000;

color:$altext;

}



textarea {

width:550px;

}



/*Hide Navbar*/

#navbar-iframe {

height:0px;

visibility:hidden;

display:none;

}



/* Menu

----------------------------------------------- */

#menu{

width:643px;

height:33px;

position:absolute;

background-color:#546367;

}



#menu ul {

list-style:none;

color:$bgcolor;

font-size:13px;

margin:8px 0 0 30px;

padding:0;

}



#menu ul li {

display:inline;

}





#menu ul li a {

color:$bgcolor;

text-decoration:none;

}



#menu ul li a:hover {

color:$bgcolor;

text-decoration:underline;

}



.list {

margin:-5px;

padding:5px 10px 5px 15px;

border-right:1px solid #CCC;

/* IE */

*margin-left:10px;

*padding:5px;

}



.rss{

background-image:url(http://test.wpthemesfree.com/wp-content/themes/leia-en-10/imagenes/rss.png);

background-repeat:no-repeat;

background-position:left;

padding-left:45px;

margin-left:5px;

}



/* Header

-----------------------------------------------

*/



#header-wrapper {

width:643px;

margin:0 auto 0;



}



#header-inner {

background-position: left;

margin-left: auto;

margin-right: auto;

}



#header {

background:url(http://test.wpthemesfree.com/wp-content/themes/leia-en-10/imagenes/headers/cab.png) no-repeat;

width:643px;

height:238px;

padding:0;

margin:0;

border: 1px solid $bordercolor;

text-align: center;

}



#header h1 {

line-height:1.2em;

text-transform:uppercase;

margin:120px 0 0 10px;

font-size:28px;

font-family:Arial, Helvetica, sans-serif;

color:$bgcolor;

font-weight: bold;

}



#header a {

color:$bgcolor;

text-decoration:none;

}



#header a:hover {

color:$bgcolor;

text-decoration:none;

}



#header .description {

margin:0;

padding:0 20px 15px;

max-width:700px;

font-size:16px;

font-weight:bold;

letter-spacing:.2em;

line-height: 1.4em;

color: $bgcolor;

}



#header img {

margin-left: auto;

margin-right: auto;

}





/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto 0 -10px;

float:left;

padding:0;

text-align:left;

font: $bodyfont;

}



#main-wrapper {

width: 643px;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}



#about{

position:absolute;

background:url(http://test.wpthemesfree.com/wp-content/themes/leia-en-10/imagenes/fondo_azul.png) repeat-x;

left:644px;

top:82px;

width:363px;

height:145px;

border-bottom:12px solid #D4D8D9;

padding:0;

margin:0;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}



#sidebar-wrapper {

position:absolute;

left:644px;

top:242px;

float: left;

width: 182.5px;

margin:0;

padding:0;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}



#sidebar-wrapper2{

position:absolute;

left:825.5px;

top:242px;

width: 181.5px;

float: left;

margin:0;

padding:0;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}





/* Headings

----------------------------------------------- */





/* Posts

-----------------------------------------------

*/



.date-header{

margin:0 0 0 0;

font-size:13px;

padding:5px;

font-weight:normal;

background-color:#F1F1F1;

color:$titlecolor;

border-top:2px solid $titlecolor;

}



.post {

margin:15px 0 0 20px;

border-bottom:1px dotted $bordercolor;

padding-bottom:1.5em;

}

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:28px;

font-weight:normal;

font-style:Arial, "Bitstream Vera Sans", sans-serif;

line-height:1.4em;

color:$titlecolor;

}



.post h3 a, .post h3 a:visited, .post h3 strong {

display:block;

text-decoration:none;

color:$titlecolor;

font-weight:normal;

}



.post h3 strong, .post h3 a:hover {

color:$titlecolor;

text-decoration:none;

}



.post p {

margin:10px 0 .75em;

line-height:1.6em;

}



.post-footer {

background:#000 url(http://lh5.google.com/tvstreamer/Rvkku-aE6iI/AAAAAAAAAIQ/q9V9zmZtIFw/footerbottom.gif) no-repeat bottom left;

width:610px;

padding:0;

margin:0;

color:$bgcolor;

font-weight:normal;

font-size:11px;

}



.post-footer a{text-decoration:none;color:#CCC;}

.post-footer a:hover{text-decoration:underline;}



.comment-link {

background:url(http://www.wordpress-designer.com/demo/wp-content/themes/leia-en/imagenes/icono_comentario.png) left center no-repeat;

padding-left:24px;

margin-left:5px;

}



.post-labels{

background:url(http://www.wordpress-designer.com/demo/wp-content/themes/leia-en/imagenes/icono_categoria.png) left center no-repeat;

padding-left:24px;

margin-left:5px;

}



.share{

background:url(http://www.wordpress-designer.com/demo/wp-content/themes/leia-en/imagenes/icono_ad.png) left center no-repeat;

padding-left:24px;

margin-left:5px;

}

.post img {

padding:4px;

border:1px solid $bordercolor;

}

.post blockquote {

margin:1em 20px;

}

.post blockquote p {

margin:.75em 0;

}



/* Comments

----------------------------------------------- */

#comments h4 {

margin:0 0 0 25px;

font-weight: bold;

line-height: 1.4em;

letter-spacing:.2em;

color: #7EE916;

}



#comments-block {

margin:1em 0 0 20px;

line-height:1.6em;

}

#comments-block .comment-author {

margin:0 0;

}

#comments-block .comment-body {

margin:.25em 0 0;

}



.comment-body{

background-color:#F2F2F2;

padding:0 7px 0 7px;

margin:0;

border:1px solid #E8E8E8;

font-size:12px;

}



#comments-block .comment-footer {

margin:-.25em 0 2em;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.1em;

}



.comment-footer{margin:0 0 0 25px;}



#comments-block .comment-body p {

margin:0 0 .75em;

}

.deleted-comment {

font-style:italic;

color:gray;

}



.comment-timestamp{font-size:9px;padding:0;margin:0;}



#blog-pager-newer-link {

float: left;

}



#blog-pager-older-link {

float: right;

}



#blog-pager {

text-align: center;

}



.feed-links {

clear: both;

line-height: 2.5em;

margin:0 0 0 20px;

}



/* Search

----------------------------------------------- */

#search {

background:url(http://test.wpthemesfree.com/wp-content/themes/leia-en-10/imagenes/fondo_buscador.png) repeat-x;

position:absolute;

top:0;

left:644px;

width:363px;

height:81px;

text-align:center;

margin:0;

paddding:0;

}



input, textarea {

border:1px solid #000;

color:$altext;

}



textarea {

width:550px;

}



#searchform {margin:30px 0 0 0;padding:0;}

.text {border:1px solid #99AA92;background-color:#fff;color:#6A7F61;width:191px;}

.button {border:1px solid #99AA92;background-color:#D4E0CE;color:#6A7F61;width:90px;

/* IE */*height:20px;}



/* About

----------------------------------------------- */

#about h2{

color:$bgcolor;

margin:0;

padding:0 10px 0 10px;

font: Arial, verdana, sans-serif;

font-size:24px;

font-weight:normal;

letter-spacing:-1px;

}



#about p{

font-size:11px;

padding:0 10px 0 10px;

margin:0;

letter-spacing:0.1em;

text-align:justify;

color:$bgcolor;

}



#about img{

margin:0 10px 0 10px;

}



/* Sidebar Content

----------------------------------------------- */

.sidebar h2, .sidebar1 h2 {

color:#7EE916;

text-decoration:none;

margin:0 0 0 10px;

}





.sidebar{

background:$sidebarbg;

color: $bgcolor;

line-height: 1.5em;

}



.sidebar ul, .sidebar1 ul {

margin:0 0 0 10px;

padding:0;

list-style:none;

}

.sidebar li, .sidebar1 li {

margin:0 0 0 0;

padding:0;

font-size:11px;

}



.sidebar li a, .sidebar1 li a, .sidebar li a:visited, .sidebar1 li a:visited{text-decoration:none;color:#5D8F2B;}

.sidebar li a:hover, .sidebar1 li a:hover{text-decoration:underline;color:#7EE916;}



.sidebar .widget, .main .widget {

margin:0 0 1.5em;

padding:0 0 1.5em;

}



.main .Blog {

border-bottom-width: 0;

}



.sidebar .widget-content{padding:5px;}

/* Sidebar 1

----------------------------------------------- */

.sidebar1 {

background:$sidebarbg;

color: $bgcolor;

line-height: 1.5em;

}



.sidebar1 ul {

list-style:none;

margin:0 0 0 0px;

padding:0 0 0;

}

.sidebar1 li {

}



.sidebar1 .widget, .main .widget {

margin:0 0 1.5em;

padding:0 0 1.5em;

}



.sidebar1 .widget-content{padding:5px;}





/* Profile

----------------------------------------------- */

.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

}



.profile-data {

margin:0;

letter-spacing:.1em;

color: $bgcolor;

line-height: 1.6em;

text-decoration:underline;

}



.profile-datablock {

margin:0 0 .5em;

}



.profile-textblock {

margin: 0.5em 0;

line-height: 1.6em;

}



.profile-link {

letter-spacing: .1em;

}



/* Footer

----------------------------------------------- */

#footer {

width:660px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}



/** Page structure tweaks for layout editor wireframe */

body#layout #header {

margin-left: 0px;

margin-right: 0px;

}

]]></b:skin>

</head>



<body>

<div id='outer-wrapper'><div id='wrap2'>



<!-- skip links for text browsers -->

<span id='skiplinks' style='display:none;'>

<a href='#main'>skip to main </a>

<a href='#sidebar'>skip to sidebar</a>

</span>



<div id='header-wrapper'>

<div id='menu'>

<ul>

<li class='list'><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li class='list'><a href='/search/label/?max-results=100'>Archives</a></li>

<li class='list'><a href='/#Blog1'>Content</a></li>

<li class='list'><a href='http://www.addthis.com/bookmark.php'>Bookmark</a></li>

<li class='list'><a href='http://www.blogger.com'>Blogger</a></li>

<li class='rss'><a href='/feeds/posts/default'>Subscribe</a></li>

</ul>

</div>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Green Test (Header)' type='Header'>

<b:includable id='main'>



<b:if cond='data:useImage'>

<b:if cond='data:imagePlacement == "REPLACE"'>

<!--Show just the image, no text-->

<div id='header-inner'>

<a expr:href='data:blog.homepageUrl' style='display: block'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</a>

</div>

<b:else/>

<!--Show image as background to text-->

<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-repeat: no-repeat; " + "width: " + data:width + "px; " + "height: " + data:height + "px;"' id='header-inner'>

<div class='titlewrapper' style='background: transparent'>

<h1 class='title' style='background: transparent; border-width: 0px'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:title/>

<b:else/>

<a expr:href='data:blog.homepageUrl'><data:title/></a>

</b:if>

</h1>

</div>

<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

</div>

</div>

</b:if>

<b:else/>

<!--No header image -->

<div id='header-inner'>

<div class='titlewrapper'>

<h1 class='title'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:title/>

<b:else/>

<a expr:href='data:blog.homepageUrl'><data:title/></a>

</b:if>

</h1>

</div>

<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

</div>

</div>

</b:if>

</b:includable>

</b:widget>

</b:section>

<div id='search'>

<form action='/search' id='searchform' method='get'>

<input class='text' id='s' name='q' size='16' type='text'/>

<input class='button' type='submit' value='Search'/>

</form>

</div>

</div>



<div id='content-wrapper'>



<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>



<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<b:includable id='nextprev'>

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

</span>

</b:if>



<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

</span>

</b:if>



<b:if cond='data:blog.homepageUrl != data:blog.url'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:else/>

<b:if cond='data:newerPageUrl'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</b:if>

</b:if>



</div>

<div class='clear'/>

</b:includable>

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

<a name='links'/><h4><data:post.backlinksLabel/></h4>

<b:if cond='data:post.numBacklinks != 0'>

<dl class='comments-block' id='comments-block'>

<b:loop values='data:post.backlinks' var='backlink'>

<div class='collapsed-backlink backlink-control'>

<dt class='comment-title'>

<span class='backlink-toggle-zippy'>&#160;</span>

<a expr:href='data:backlink.url' rel='follow'><data:backlink.title/></a>

<b:include data='backlink' name='backlinkDeleteIcon'/>

</dt>

<dd class='comment-body collapseable'>

<data:backlink.snippet/>

</dd>

<dd class='comment-footer collapseable'>

<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>

<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>

</dd>

</div>

</b:loop>

</dl>

</b:if>

<p class='comment-footer'>

<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>

</p>

</b:includable>

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

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

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

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

<h3 class='post-title entry-title'>

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

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

<b:else/>

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

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

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3>

<div class='date-header'>

Written by <data:post.author/> on <data:post.dateHeader/> at <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>

</div>

</b:if>



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



<div class='post-body entry-content'>

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

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

<div class='post-footer'>

<p class='post-footer-line post-footer-line-1' style='background:#000 url(http://lh5.google.com/tvstreamer/Rvkku-aE6jI/AAAAAAAAAIY/7ch1oxqN51s/footertop.gif) top left no-repeat;width:610px;height:100%;padding:0;margin:0;'>

<span class='post-comment-link'>



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

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

</b:if>

</span>

<br/>

<span class='post-labels'>

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

Categories:

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

</b:loop>

</b:if>

</span>

<br/>

<span class='share'><a href='http://www.addthis.com/bookmark.php'>Share this post</a> - <span class='item-action'><a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><span>Email This</span></a></span>



</span>



<!-- backlinks -->

<span class='post-backlinks post-comment-link'>

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

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

<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>

</b:if>

</b:if>

</span>

</p>



<p class='post-footer-line post-footer-line-2' style='font-size:1px;background:#000;'>

<span>i</span>

</p>



<p class='post-footer-line post-footer-line-3'/>



</div>

</div>

</b:includable>

<b:includable id='commentDeleteIcon' var='comment'>

<span expr:class='"item-control " + data:comment.adminClass'>

<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>

<span class='delete-comment-icon'>&#160;</span>

</a>

</span>

</b:includable>

<b:includable id='feedLinks'>

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->

<b:if cond='data:feedLinks'>

<div class='blog-feeds'>

<b:include data='feedLinks' name='feedLinksBody'/>

</div>

</b:if>



<b:else/> <!--Post feed links -->

<div class='post-feeds'>

<b:loop values='data:posts' var='post'>

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

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

<b:include data='post.feedLinks' name='feedLinksBody'/>

</b:if>

</b:if>

</b:loop>

</div>

</b:if>

</b:includable>

<b:includable id='status-message'>

<b:if cond='data:navMessage'>

<div class='status-msg-wrap'>

<div class='status-msg-body'>

<data:navMessage/>

</div>

<div class='status-msg-border'>

<div class='status-msg-bg'>

<div class='status-msg-hidden'><data:navMessage/></div>

</div>

</div>

</div>

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

</b:if>

</b:includable>

<b:includable id='backlinkDeleteIcon' var='backlink'>

<span expr:class='"item-control " + data:backlink.adminClass'>

<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>

<span class='delete-comment-icon'>&#160;</span>

</a>

</span>

</b:includable>

<b:includable id='feedLinksBody' var='links'>

<div class='feed-links'>

<data:feedLinksMsg/>

<b:loop values='data:links' var='f'>

<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (RSS)</a>

</b:loop>

</div>

</b:includable>

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

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

<span expr:class='"item-control " + data:post.adminClass'>

<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>

<span class='quick-edit-icon'>&#160;</span>

</a>

</span>

</b:if>

</b:includable>

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

<div class='comments' id='comments'>

<a name='comments'/>

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

<h4>

<b:if cond='data:post.numComments == 1'>

1 Responses to &quot;<data:post.title/>&quot;

<b:else/>

<data:post.numComments/> Responses to &quot;<data:post.title/>&quot;

</b:if>

</h4>



<dl id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>

<a expr:name='"comment-" + data:comment.id'/>

<b:if cond='data:comment.authorUrl'>

Comment by

<b:else/>

</b:if>

<a expr:href='data:comment.authorUrl' rel='follow'> <data:comment.author/></a><br/><span class='comment-timestamp'><data:comment.timestamp/>

<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>#</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dt>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

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

</b:if>

</dd>

<dd class='comment-footer'>



</dd>

</b:loop>

</dl>



<p class='comment-footer'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</p>

</b:if>



<div id='backlinks-container'>

<div expr:id='data:widget.instanceId + "_backlinks-container"'>

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

<b:include data='post' name='backlinks'/>

</b:if>

</div>

</div>

</div>

</b:includable>

<b:includable id='main' var='top'>

<!-- posts -->

<div class='blog-posts hfeed'>



<b:include data='top' name='status-message'/>



<data:adStart/>

<b:loop values='data:posts' var='post'>

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



</b:if>

<b:include data='post' name='post'/>

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

<b:include data='post' name='comments'/>

</b:if>

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

<data:adEnd/>

<data:adCode/>

<data:adStart/>

</b:if>

</b:loop>

<data:adEnd/>

</div>



<!-- navigation -->

<b:include name='nextprev'/>



<!-- feed links -->

<b:include name='feedLinks'/>

</b:includable>

</b:widget>

</b:section>

</div>



<div id='about'>

<b:section class='about' id='about' maxwidgets='1' preferred='yes' showaddelement='yes'/>

<!--EDIT THIS AREA FOR THE 'About the author' SECTION-->

<h2>About the author</h2>

<p>



This is the area where you will put in information about who you are, your experience blogging, and what your blog is about. You aren&#39;t limited, however, to just putting a biography. You can put whatever you please.



</p>

</div>



<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

<b:includable id='toggle' var='interval'>

<b:if cond='data:interval.toggleId'>

<b:if cond='data:interval.expclass == "expanded"'>

<a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" + "&amp;dir=close&amp;toggle=" + data:interval.toggleId + "&amp;toggleopen=" + data:toggleopen'>

<span class='zippy toggle-open'>&#9660; </span>

</a>

<b:else/>

<a class='toggle' expr:href='data:widget.actionUrl + "&amp;action=toggle" + "&amp;dir=open&amp;toggle=" + data:interval.toggleId + "&amp;toggleopen=" + data:toggleopen'>

<span class='zippy'>&#9658; </span>

</a>

</b:if>

</b:if>

</b:includable>

<b:includable id='interval' var='intervalData'>

<b:loop values='data:intervalData' var='i'>

<ul>

<li expr:class='"archivedate " + data:i.expclass'>

<b:include data='i' name='toggle'/>

<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>

(<span class='post-count'><data:i.post-count/></span>)

<b:if cond='data:i.data'>

<b:include data='i.data' name='interval'/>

</b:if>

<b:if cond='data:i.posts'>

<b:include data='i.posts' name='posts'/>

</b:if>

</li>

</ul>

</b:loop>

</b:includable>

<b:includable id='menu' var='data'>

<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>

<option value=''><data:title/></option>

<b:loop values='data:data' var='i'>

<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>

</b:loop>

</select>

</b:includable>

<b:includable id='flat' var='data'>

<ul>

<b:loop values='data:data' var='i'>

<li class='archivedate'>

<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)

</li>

</b:loop>

</ul>

</b:includable>

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

<ul class='posts'>

<b:loop values='data:posts' var='i'>

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

</b:loop>

</ul>

</b:includable>

<b:includable id='main'>

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

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + "_ArchiveList"'>

<b:if cond='data:style == "HIERARCHY"'>

<b:include data='data' name='interval'/>

</b:if>

<b:if cond='data:style == "FLAT"'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == "MENU"'>

<b:include data='data' name='menu'/>

</b:if>

</div>

</div>

</div>

</b:includable>

</b:widget>

<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'>

<b:includable id='main'>

<div class='widget-content'>

<a href='http://www.blogger.com'><img alt='Powered By Blogger' expr:src='data:fullButton'/></a>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

</b:section>

<a href="http://freshbloggertemplates.blogspot.com">Blogger Templates</a>

</div>



<div id='sidebar-wrapper2'>

<b:section class='sidebar1' id='sidebar1' preferred='yes'>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<b:if cond='data:team == "true"'> <!-- team blog profile -->

<ul>

<b:loop values='data:authors' var='i'>

<li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li>

</b:loop>

</ul>



<b:else/> <!-- normal blog profile -->



<b:if cond='data:photo.url != ""'>

<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>

</b:if>



<dl class='profile-datablock'>

<dt class='profile-data'><data:displayname/></dt>



<b:if cond='data:showlocation == "true"'>

<dd class='profile-data'><data:location/></dd>

</b:if>



<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>

</dl>

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>

</b:if>



</div>

</b:includable>

</b:widget>

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

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

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

<b:else/>

<a expr:href='data:label.url'><data:label.name/></a>

</b:if>

(<data:label.count/>)

</li>

</b:loop>

</ul>



</div>

</b:includable>

</b:widget>

</b:section>

</div>



<!-- spacer for skins that want sidebar and main to be the same height-->

<div class='clear'>&#160;</div>



</div> <!-- end content-wrapper -->



<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>



</div></div> <!-- end outer-wrapper -->

</body>

</html>


Texto:

Fondo en los post

2007-12-18T20:57:00.001+01:00

Para modificar la imagen de fondo en las entradas o post añadiremos el siguiente código y esto hará que salga en todas las entradas.Nos situamos en plantilla edición HTML y buscamos este código:

.post-body {

clear: both;

padding-top: 10px;

}

una vez encontrado lo sustituimos por este otro:
.post-body {

background: url(url-de-la-imagen) top left;

clear: both;

padding-top: 10px;

}

Ahora bien si sólo queremos que el fondo del post aparezca sólamente en algunos,entonces aplicaremos este código solamente en las entradas que queramos:
<table background="url-de-la-imagen" border="0" bordercolor="#000000" cellpadding="0" cellspacing="0" height="100%" width="100%"><tbody><tr><td><p>texto-texto-texto-texto-texto</p><p></p></td></tr></tbody></table>

Solamente faltará añadir donde dice -URL-, poner el de nuestra imagen escogida.

Plantilla Gemstone

2007-12-16T22:23:00.000+01:00

Contraer todo | Expandir todo

Plantilla

Contenido

Les muestro el código de la plantilla o template "Gemstone",vista en la página de Ricardo Santos, que me ha parecido bastante interesante. Considero que aunque es de dos columnas tiene un diseño buenísimo y su mezcla de colores parece que queda muy bien y dá resultado.
A la vez yo la he intentado instalar y sustituir por la que tengo actualmente en este blog, pero me ha sido imposible ya que me da error "Algo así cómo que no se han cerrado el elemento raiz -HTML-. Lo digo por si alguien les gusta y quiere probar su aplicación a ver si tiene mejor suerte que yo y logra que funcione.
A continuación el código de la misma:

Código

Contenido

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html (View Source for full doctype...)>

- <html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr">

- <head>

<b:include data="blog" name="all-head-content" />

- <title>

<data:blog.pageTitle />

</title>

- <b:skin>

- <![CDATA[ /*

-----------------------------------------------

Blogger Template Style

Name: GemStone

Designer: Erica Akira

URL: http://www.temas.burajiru.blog.br

Date: 07 Aug 2007

From theme by: Arcsin

URL: http://templates.arcsin.se/

----------------------------------------------- */

/* Variable definitions

====================

<Variable name="bgcolor" description="Page Background Color"

type="color" default="#999" value="#999999">

<Variable name="textcolor" description="Text Color"

type="color" default="#333" value="#333333">

<Variable name="linkcolor" description="Link Color"

type="color" default="#58a" value="#0066CC">

<Variable name="pagetitlecolor" description="Blog Title Color"

type="color" default="#fff" value="#ffffff">

<Variable name="descriptioncolor" description="Blog Description Color"

type="color" default="#fff" value="#ffffff">

<Variable name="titlecolor" description="Post Title Color"

type="color" default="#06c" value="#0066CC">

<Variable name="bordercolor" description="Border Color"

type="color" default="#ccc" value="#cccccc">

<Variable name="sidebarcolor" description="Sidebar Title Color"

type="color" default="#fff" value="#ffffff">

<Variable name="sidebartextcolor" description="Sidebar Text Color"

type="color" default="#666" value="#666666">

<Variable name="visitedlinkcolor" description="Visited Link Color"

type="color" default="#999" value="#6131BD">

<Variable name="bodyfont" description="Text Font"

type="font" default="normal normal 80% Tahoma, Sans-Serif" value="normal normal 80% Tahoma, Sans-Serif">

<Variable name="pagetitlefont" description="Blog Title Font"

type="font"

default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

<Variable name="descriptionfont" description="Blog Description Font"

type="font"

default="normal normal 60% Verdana, Sans-serif" value="normal normal 60% Verdana, Sans-serif">

<Variable name="postfooterfont" description="Post Footer Font"

type="font"

default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal bold 86% Verdana, sans-serif">

*/

* {

margin: 0;

padding: 0;

}

body {

background:$bgcolor url('http://img413.imageshack.us/img413/7223/gembgzx4.gif') repeat-y;

font:$bodyfont;

padding-left: 25px;

}

a:link {

color:$linkcolor;

text-decoration:none;

}

a:visited {

color:$visitedlinkcolor;

text-decoration:none;

}

a:hover {

color:$titlecolor;

text-decoration:underline;

}

a img {

border-width:0;

}

p {

margin-bottom: 1.2em;

}

ul {

margin: 0 0 10px 22px;

}

li {

list-style-image: url('http://img245.imageshack.us/img245/1557/gemliiv2.gif');

}

/* Header

-----------------------------------------------

*/

#header-wrapper {

width:939px;

}

#header-inner {

background-position: center;

margin-left:auto;

margin-right: auto;

}

#header {

background: url('http://img340.imageshack.us/img340/5574/gemtopcb3.gif');

color:$pagetitlecolor;

height: 45px;

width: 939px;

}

#header h1 {

font: bold 2em sans-serif;

padding: 8px 16px 0;

}

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

#header a:hover {

color:#e0e0e0;

}

#header .description {

color:$descriptioncolor;

font:$descriptionfont;

}

#header img {

margin-left: auto;

margin-right: auto;

}

.top-menu {

background:#000 url('http://img158.imageshack.us/img158/4682/headeryw6.gif');

height: 101px;

width: 939px;

}

/* menu */

#menu {

}

#menu ul {

float: left;

margin: 0 1px 0 0;

}

#menu li {

list-style-image: none;

}

#menu a {

background: #4B4B4B;

color: #DDD;

display: block;

font-family: sans-serif;

font-size: 85%;

padding: 5px 0 5px 8px;

text-decoration: none;

width: 180px;

}

#menu a#current {

background: #666; color: #FFF;

}

#menu a:hover {

background: #555; color: #FFF;

}

#menu li {

list-style-type: none;

margin: 0 0 1px 0;

padding: 0;

}

#menu .quickedit {

display:none}

#ads {

float: right;

margin: 0 1px 0 0;

width: 360px;

text-align: center;

}

#ads .quickedit {

display:none}

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 100%;

margin:0 auto;

padding:0px;

text-align:left;

font-family: Tahoma,sans-serif;

font-size: 100%;

}

#main-wrapper {

}

/* left side */

#main {

margin: 1px;

width: 592px;

}

#sidebar-wrapper {

width: 331px;

position: absolute;

top: 146px;

left: 620px;

}

/* Headings

----------------------------------------------- */

h2 {

margin:0 0 .75em;

font: normal 85% Tahoma,sans-serif;

line-height: 1.4em;

text-transform:none;

letter-spacing:.2em;

color:#fff;

}

/* Posts

-----------------------------------------------

*/

h2.date-header {

background: #0070CD url('http://img411.imageshack.us/img411/493/gembgdatevb5.gif') repeat-x;

color: #FFF;

font-weight: bold;

padding: 10px;

}

.post {

background: #F0F0F0 url('http://img410.imageshack.us/img410/2001/gembgnewsitemcn8.png') repeat-x;

border: 1px solid #EEE;

border-color: #EEE #EEE #DDD #EEE;

clear: both;

color: #333;

line-height: 1.5;

margin: 6px 6px 6px 6px;

padding: 10px;

}

.post h3 {

color:$titlecolor;

font: bold 1.2em Tahoma,sans-serif;

padding: 3px 4px;

}

.post h3 a, .post h3 a:visited, .post h3 strong {

display:block;

text-decoration:none;

color: #0066CC;

font: bold 1.2em Tahoma,sans-serif;

padding: 3px 4px;

}

.post h3 strong, .post h3 a:hover {

color:#006677;

}

.post p {

font-family: "Trebuchet MS",Tahoma,sans-serif;

font-size: 0.9em;

text-align: justify;

}

.post-footer {

margin: .75em 0 ;

color:$bgcolor;

text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;

line-height: 1.4em;

}

.comment-link {

margin-left:.6em;

}

.post img {

padding:4px;

border:1px solid $bordercolor;

}

.post blockquote {

margin:1em 20px;

}

.post blockquote p {

margin:.75em 0;

}

/* Comments

----------------------------------------------- */

#comments h4 {

margin:1em 0;

font-weight: bold;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color: $sidebarcolor;

}

#comments-block {

margin:.5em 0 1.5em;

padding:10px;

line-height:1.6em;

}

#comments-block .comment-author {

margin:.5em 0 0 0;

background:#F9F9F9;

border:1px solid #EEE;

border-color:#EEE #EEE #EEE #EEE;

}

#comments-block .comment-body {

margin:0;

padding:.5em 0;

background:#FCFCFC;

border:1px solid #EEE;

border-color:#EEE #EEE #DDD #EEE;

}

#comments-block .comment-footer {

margin:-.25em 0 2em;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.1em;

background:#F9F9F9;

border:1px solid #EEE;

border-color:#EEE #EEE #DDD #EEE;

}

#comments-block .comment-body p {

margin:0 0 .75em;

}

.deleted-comment {

font-style:italic;

color:gray;

}

#blog-pager-newer-link {

float: left;

}

#blog-pager-older-link {

float: right;

}

#blog-pager {

text-align: center;

}

.feed-links {

clear: both;

line-height: 2.5em;

}

/* Sidebar Content

----------------------------------------------- */

.links {

color: $sidebartextcolor;

line-height: 1.5em;

}

.links a {

background: url('http://img238.imageshack.us/img238/4086/gembgnavitemfn0.gif') repeat-x #FFF;

border-bottom: 1px solid #EEE;

display: block;

font: bold 0.8em Verdana,Tahoma,sans-serif;

padding: 6px 0 8px 8px;

text-decoration: none; color: #333;

}

.links a:hover {

color: #0080DD; background-position: left bottom;

}

.links div.line {

height: 1px; background-color: #EEEEF5;

}

.links h2 {

background: #333 url('http://img413.imageshack.us/img413/4925/gembgsubtitleqh2.gif') repeat-x;

color: #FFF;

font: normal 85% Tahoma,sans-serif;

padding: 5px 8px;

}

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

}

.sidebar a {

background: url('http://img238.imageshack.us/img238/4086/gembgnavitemfn0.gif') repeat-x #FFF;

border-bottom: 1px solid #EEE;

font: bold 0.8em Verdana,Tahoma,sans-serif;

padding: 6px 0 8px 8px;

text-decoration: none; color: #333;

}

.sidebar a:hover {

color: #0080DD; background-position: left bottom;

}

.sidebar div.line {

height: 1px; background-color: #EEEEF5;

}

.sidebar h2 {

background: #333 url('http://img413.imageshack.us/img413/4925/gembgsubtitleqh2.gif') repeat-x;

color: #FFF;

font: normal 85% Tahoma,sans-serif;

padding: 5px 8px;

}

.sidebar .widget, .main .widget, .links .widget, {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}

.main .Blog {

border-bottom-width: 0;

}

/* Profile

----------------------------------------------- */

.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

border: 1px solid $bordercolor;

}

.profile-data {

margin:0;

text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;

color: $sidebarcolor;

font-weight: bold;

line-height: 1.6em;

}

.profile-datablock {

margin:.5em 0 .5em;

}

.profile-textblock {

margin: 0.5em 0;

line-height: 1.6em;

}

.profile-link {

font: $postfooterfont;

text-transform: uppercase;

letter-spacing: .1em;

}

/* Footer

----------------------------------------------- */

.footer {

background: #F0F0F0 url('http://img411.imageshack.us/img411/493/gembgdatevb5.gif') repeat-x;

border: 1px solid #EEE;

color: #FFF;

margin-left: 6px;

width: 581px;

}

.footer a {

color: #FFF;

font: bold 1em "Trebuchet MS",sans-serif;

text-decoration: none;

}

.footer .copyright {

padding: 6px 12px;

}

.footer .left, .footer .right {padding: 0 6px;}

/* floats */

.left {float: left;}

.right {float: right;}

/** Page structure tweaks for layout editor wireframe */

body#layout #header {

margin-left: 0px;

margin-right: 0px;

width:750px}

body#layout #menu{

margin-left: 0px;

margin-right: 0px;

width:200px;

}

body#layout #ads {

margin-top:-110px;margin-left: 0px;

margin-right: 250px;

width:200px;

}

body#layout #main {

margin-top:30px;

margin-left: 0px;

margin-right: 0px;

width:400px

}

body#layout #links {

margin-left: 0px;

margin-right: 250px;

}

]]>

</b:skin>

</head>

- <body>

- <div id="outer-wrapper">

- <div id="wrap2">

- 

- <span id="skiplinks" style="display:none;">

<a href="#main" shape="rect">skip to main</a>

<a href="#sidebar" shape="rect">skip to sidebar</a>

</span>

- <div id="header-wrapper">

- <b:section class="header" id="header" maxwidgets="1" showaddelement="no">

- <b:widget id="Header1" locked="true" title="Gemstone Template (Cabeçalho)" type="Header">

- <b:includable id="main">

- <b:if cond="data:useImage">

- <b:if cond="data:imagePlacement == "REPLACE"">

- 

- <div id="header-inner">

- <a expr:href="data:blog.homepageUrl" style="display: block" shape="rect">

<img expr:alt="data:title" expr:height="data:height" expr:id="data:widget.instanceId + "_headerimg"" expr:src="data:sourceUrl" expr:width="data:width" style="display: block" />

</a>

</div>

<b:else />

- 

- <div expr:style=""background-image: url(\"" + data:sourceUrl + "\"); " + "background-repeat: no-repeat; " + "width: " + data:width + "px; " + "height: " + data:height + "px;"" id="header-inner">

- <div class="titlewrapper" style="background: transparent">

- <h1 class="title" style="background: transparent; border-width: 0px">

- <b:if cond="data:blog.url == data:blog.homepageUrl">

<data:title />

<b:else />

- <a expr:href="data:blog.homepageUrl" shape="rect">

<data:title />

</a>

</b:if>

- <span class="description">

<data:description />

</span>

</h1>

</div>

</div>

</b:if>

<b:else />

- 

- <div id="header-inner">

- <div class="titlewrapper">

- <h1 class="title">

- <b:if cond="data:blog.url == data:blog.homepageUrl">

<data:title />

<b:else />

- <a expr:href="data:blog.homepageUrl" shape="rect">

<data:title />

</a>

</b:if>

- <span class="description">

<data:description />

</span>

</h1>

</div>

</div>

</b:if>

</b:includable>

</b:widget>

</b:section>

</div>

- <div class="top-menu">

- <b:section class="menu" id="menu" maxwidgets="3" showaddelement="yes">

- <b:widget id="LinkList3" locked="false" title="" type="LinkList">

- <b:includable id="main">

- <b:if cond="data:title">

- <h2>

<data:title />

</h2>

</b:if>

- <div class="widget-content">

- <ul>

- <b:loop values="data:links" var="link">

- <li>

- <a expr:href="data:link.target" shape="rect">

<data:link.name />

</a>

</li>

</b:loop>

</ul>

<b:include name="quickedit" />

</div>

</b:includable>

</b:widget>

- <b:widget id="LinkList2" locked="false" title="" type="LinkList">

- <b:includable id="main">

- <b:if cond="data:title">

- <h2>

<data:title />

</h2>

</b:if>

- <div class="widget-content">

- <ul>

- <b:loop values="data:links" var="link">

- <li>

- <a expr:href="data:link.target" shape="rect">

<data:link.name />

</a>

</li>

</b:loop>

</ul>

<b:include name="quickedit" />

</div>

</b:includable>

</b:widget>

- <b:widget id="LinkList1" locked="false" title="" type="LinkList">

- <b:includable id="main">

- <b:if cond="data:title">

- <h2>

<data:title />

</h2>

</b:if>

- <div class="widget-content">

- <ul>

- <b:loop values="data:links" var="link">

- <li>

- <a expr:href="data:link.target" shape="rect">

<data:link.name />

</a>

</li>

</b:loop>

</ul>

<b:include name="quickedit" />

</div>

</b:includable>

</b:widget>

</b:section>

- <b:section class="ads" id="ads" maxwidgets="1" showaddelement="yes">

- <b:widget id="AdSense1" locked="false" title="" type="AdSense">

- <b:includable id="main">

- <div class="widget-content">

<data:adCode />

</div>

</b:includable>

</b:widget>

</b:section>

</div>

- <div id="content-wrapper">

- <div id="crosscol-wrapper" style="text-align:center">

<b:section class="crosscol" id="crosscol" showaddelement="no" />

</div>

- <div id="main-wrapper">

- <b:section class="main" id="main" showaddelement="no">

- <b:widget id="Blog1" locked="true" title="Postagens no blog" type="Blog">

- <b:includable id="main" var="top">

- 

- <div class="blog-posts hfeed">

<b:include data="top" name="status-message" />

<data:adStart />

- <b:loop values="data:posts" var="post">

- <b:if cond="data:post.dateHeader">

- <h2 class="date-header">

<data:post.dateHeader />

</h2>

</b:if>

<b:include data="post" name="post" />

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

<b:include data="post" name="comments" />

</b:if>

</b:loop>

<data:adEnd />

</div>

- 

<b:include name="nextprev" />

- 

<b:include name="feedLinks" />

</b:includable>

- <b:includable id="nextprev">

- <div class="blog-pager" id="blog-pager">

- <b:if cond="data:newerPageUrl">

- <span id="blog-pager-newer-link">

- <a class="blog-pager-newer-link" expr:href="data:newerPageUrl" expr:id="data:widget.instanceId + "_blog-pager-newer-link"" expr:title="data:newerPageTitle" shape="rect">

<data:newerPageTitle />

</a>

</span>

</b:if>

- <b:if cond="data:olderPageUrl">

- <span id="blog-pager-older-link">

- <a class="blog-pager-older-link" expr:href="data:olderPageUrl" expr:id="data:widget.instanceId + "_blog-pager-older-link"" expr:title="data:olderPageTitle" shape="rect">

<data:olderPageTitle />

</a>

</span>

</b:if>

- <b:if cond="data:blog.homepageUrl != data:blog.url">

- <a class="home-link" expr:href="data:blog.homepageUrl" shape="rect">

<data:homeMsg />

</a>

<b:else />

- <b:if cond="data:newerPageUrl">

- <a class="home-link" expr:href="data:blog.homepageUrl" shape="rect">

<data:homeMsg />

</a>

</b:if>

</b:if>

</div>

<div class="clear" />

</b:includable>

- <b:includable id="post" var="post">

- <div class="post hentry uncustomized-post-template">

<a expr:name="data:post.id" shape="rect" />

- <b:if cond="data:post.title">

- <h3 class="post-title entry-title">

- <b:if cond="data:post.link">

- <a expr:href="data:post.link" shape="rect">

<data:post.title />

</a>

<b:else />

- <b:if cond="data:post.url">

- <a expr:href="data:post.url" shape="rect">

<data:post.title />

</a>

<b:else />

<data:post.title />

</b:if>

</b:if>

</h3>

</b:if>

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

- <div class="post-body entry-content">

- <p>

<data:post.body />

</p>

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

- 

</div>

- <div class="post-footer">

- <p class="post-footer-line post-footer-line-1">

- <span class="post-author vcard">

- <b:if cond="data:top.showAuthor">

<data:top.authorLabel />

- <span class="fn">

<data:post.author />

</span>

</b:if>

</span>

- <span class="post-timestamp">

- <b:if cond="data:top.showTimestamp">

<data:top.timestampLabel />

- <b:if cond="data:post.url">

- <a class="timestamp-link" expr:href="data:post.url" rel="bookmark" title="permanent link" shape="rect">

- <abbr class="published" expr:title="data:post.timestampISO8601">

<data:post.timestamp />

</abbr>

</a>

</b:if>

</b:if>

</span>

- <span class="post-comment-link">

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

- <b:if cond="data:post.allowComments">

- <a class="comment-link" expr:href="data:post.addCommentUrl" expr:onclick="data:post.addCommentOnclick" shape="rect">

- <b:if cond="data:post.numComments == 1">

1

<data:top.commentLabel />

<b:else />

<data:post.numComments />

<data:top.commentLabelPlural />

</b:if>

</a>

</b:if>

</b:if>

</span>

- 

- <span class="post-backlinks post-comment-link">

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

- <b:if cond="data:post.showBacklinks">

- <a class="comment-link" expr:href="data:post.url + "#links"" shape="rect">

<data:top.backlinkLabel />

</a>

</b:if>

</b:if>

</span>

- <span class="post-icons">

- 

- <b:if cond="data:post.emailPostUrl">

- <span class="item-action">

- <a expr:href="data:post.emailPostUrl" expr:title="data:top.emailPostMsg" shape="rect">

<span class="email-post-icon"> </span>

</a>

</span>

</b:if>

- 

<b:include data="post" name="postQuickEdit" />

</span>

</p>

- <p class="post-footer-line post-footer-line-2">

- <span class="post-labels">

- <b:if cond="data:post.labels">

<data:postLabelsLabel />

- <b:loop values="data:post.labels" var="label">

- <a expr:href="data:label.url" rel="tag" shape="rect">

<data:label.name />

</a>

<b:if cond="data:label.isLast != "true"">,</b:if>

</b:loop>

</b:if>

</span>

</p>

<p class="post-footer-line post-footer-line-3" />

</div>

</div>

</b:includable>

- <b:includable id="postQuickEdit" var="post">

- <b:if cond="data:post.editUrl">

- <span expr:class=""item-control " + data:post.adminClass">

- <a expr:href="data:post.editUrl" expr:title="data:top.editPostMsg" shape="rect">

<span class="quick-edit-icon"> </span>

</a>

</span>

</b:if>

</b:includable>

- <b:includable id="commentDeleteIcon" var="comment">

- <span expr:class=""item-control " + data:comment.adminClass">

- <a expr:href="data:comment.deleteUrl" expr:title="data:top.deleteCommentMsg" shape="rect">

<span class="delete-comment-icon"> </span>

</a>

</span>

</b:includable>

- <b:includable id="backlinkDeleteIcon" var="backlink">

- <span expr:class=""item-control " + data:backlink.adminClass">

- <a expr:href="data:backlink.deleteUrl" expr:title="data:top.deleteBacklinkMsg" shape="rect">

<span class="delete-comment-icon"> </span>

</a>

</span>

</b:includable>

- <b:includable id="comments" var="post">

- <div class="comments" id="comments">

<a name="comments" shape="rect" />

- <b:if cond="data:post.allowComments">

- <h4>

- <b:if cond="data:post.numComments == 1">

1

<data:commentLabel />

:

<b:else />

<data:post.numComments />

<data:commentLabelPlural />

:

</b:if>

</h4>

- <dl id="comments-block">

- <b:loop values="data:post.comments" var="comment">

- <dt class="comment-author" expr:id=""comment-" + data:comment.id">

<a expr:name=""comment-" + data:comment.id" shape="rect" />

- <b:if cond="data:comment.authorUrl">

- <a expr:href="data:comment.authorUrl" rel="nofollow" shape="rect">

<data:comment.author />

</a>

<b:else />

<data:comment.author />

</b:if>

<data:commentPostedByMsg />

</dt>

- <dd class="comment-body">

- <b:if cond="data:comment.isDeleted">

- <span class="deleted-comment">

<data:comment.body />

</span>

<b:else />

- <p>

<data:comment.body />

</p>

</b:if>

</dd>

- <dd class="comment-footer">

- <span class="comment-timestamp">

- <a expr:href=""#comment-" + data:comment.id" title="comment permalink" shape="rect">

<data:comment.timestamp />

</a>

<b:include data="comment" name="commentDeleteIcon" />

</span>

</dd>

</b:loop>

</dl>

- <p class="comment-footer">

- <a expr:href="data:post.addCommentUrl" expr:onclick="data:post.addCommentOnclick" shape="rect">

<data:postCommentMsg />

</a>

</p>

</b:if>

- <div id="backlinks-container">

- <div expr:id="data:widget.instanceId + "_backlinks-container"">

- <b:if cond="data:post.showBacklinks">

<b:include data="post" name="backlinks" />

</b:if>

</div>

</div>

</div>

</b:includable>

- <b:includable id="backlinks" var="post">

<a name="links" shape="rect" />

- <h4>

<data:post.backlinksLabel />

</h4>

- <b:if cond="data:post.numBacklinks != 0">

- <dl class="comments-block" id="comments-block">

- <b:loop values="data:post.backlinks" var="backlink">

- <div class="collapsed-backlink backlink-control">

- <dt class="comment-title">

<span class="backlink-toggle-zippy"> </span>

- <a expr:href="data:backlink.url" rel="nofollow" shape="rect">

<data:backlink.title />

</a>

<b:include data="backlink" name="backlinkDeleteIcon" />

</dt>

- <dd class="comment-body collapseable">

<data:backlink.snippet />

</dd>

- <dd class="comment-footer collapseable">

- <span class="comment-author">

<data:post.authorLabel />

<data:backlink.author />

</span>

- <span class="comment-timestamp">

<data:post.timestampLabel />

<data:backlink.timestamp />

</span>

</dd>

</div>

</b:loop>

</dl>

</b:if>

- <p class="comment-footer">

- <a class="comment-link" expr:href="data:post.createLinkUrl" expr:id="data:widget.instanceId + "_backlinks-create-link"" target="_blank" shape="rect">

<data:post.createLinkLabel />

</a>

</p>

</b:includable>

- <b:includable id="feedLinks">

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

- 

- <b:if cond="data:feedLinks">

- <div class="blog-feeds">

<b:include data="feedLinks" name="feedLinksBody" />

</div>

</b:if>

<b:else />

- 

- <div class="post-feeds">

- <b:loop values="data:posts" var="post">

- <b:if cond="data:post.allowComments">

- <b:if cond="data:post.feedLinks">

<b:include data="post.feedLinks" name="feedLinksBody" />

</b:if>

</b:if>

</b:loop>

</div>

</b:if>

</b:includable>

- <b:includable id="feedLinksBody" var="links">

- <div class="feed-links">

<data:feedLinksMsg />

- <b:loop values="data:links" var="f">

- <a class="feed-link" expr:href="data:f.url" expr:type="data:f.mimeType" target="_blank" shape="rect">

<data:f.name />

(

<data:f.feedType />

)

</a>

</b:loop>

</div>

</b:includable>

- <b:includable id="status-message">

- <b:if cond="data:navMessage">

- <div class="status-msg-wrap">

- <div class="status-msg-body">

<data:navMessage />

</div>

- <div class="status-msg-border">

- <div class="status-msg-bg">

- <div class="status-msg-hidden">

<data:navMessage />

</div>

</div>

</div>

</div>

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

</b:if>

</b:includable>

</b:widget>

</b:section>

</div>

- <div id="sidebar-wrapper">

- <b:section class="links" id="links" preferred="yes">

- <b:widget id="Profile1" locked="false" title="Quem sou eu" type="Profile">

- <b:includable id="main">

- <b:if cond="data:title != """>

- <h2>

<data:title />

</h2>

</b:if>

- <div class="widget-content">

- <b:if cond="data:team == "true"">

- 

- <ul>

- <b:loop values="data:authors" var="i">

- <li>

- <a expr:href="data:i.userUrl" shape="rect">

<data:i.display-name />

</a>

</li>

</b:loop>

</ul>

<b:else />

- 

- <b:if cond="data:photo.url != """>

- <a expr:href="data:userUrl" shape="rect">

<img class="profile-img" expr:alt="data:photo.alt" expr:height="data:photo.height" expr:src="data:photo.url" expr:width="data:photo.width" />

</a>

</b:if>

- <dl class="profile-datablock">

- <dt class="profile-data">

<data:displayname />

</dt>

- <b:if cond="data:showlocation == "true"">

- <dd class="profile-data">

<data:location />

</dd>

</b:if>

- <b:if cond="data:aboutme != """>

- <dd class="profile-textblock">

<data:aboutme />

</dd>

</b:if>

</dl>

- <a class="profile-link" expr:href="data:userUrl" shape="rect">

<data:viewProfileMsg />

</a>

</b:if>

<b:include name="quickedit" />

</div>

</b:includable>

</b:widget>

</b:section>

- <b:section class="sidebar" id="sidebar2" preferred="yes">

- <b:widget id="Label1" locked="false" title="Marcadores" type="Label">

- <b:includable id="main">

- <b:if cond="data:title">

- <h2>

<data:title />

</h2>

</b:if>

- <div class="widget-content">

- <ul>

- <b:loop values="data:labels" var="label">

- <li>

- <b:if cond="data:blog.url == data:label.url">

<data:label.name />

<b:else />

- <a expr:href="data:label.url" shape="rect">

<data:label.name />

</a>

</b:if>

(

<data:label.count />

)

</li>

</b:loop>

</ul>

<b:include name="quickedit" />

</div>

</b:includable>

</b:widget>

- <b:widget id="BlogArchive1" locked="false" title="Arquivo do blog" type="BlogArchive">

- <b:includable id="main">

- <b:if cond="data:title">

- <h2>

<data:title />

</h2>

</b:if>

- <div class="widget-content">

- <div id="ArchiveList">

- <div expr:id="data:widget.instanceId + "_ArchiveList"">

- <b:if cond="data:style == "HIERARCHY"">

<b:include data="data" name="interval" />

</b:if>

- <b:if cond="data:style == "FLAT"">

<b:include data="data" name="flat" />

</b:if>

- <b:if cond="data:style == "MENU"">

<b:include data="data" name="menu" />

</b:if>

</div>

</div>

<b:include name="quickedit" />

</div>

</b:includable>

- <b:includable id="flat" var="data">

- <ul>

- <b:loop values="data:data" var="i">

- <li class="archivedate">

- <a expr:href="data:i.url" shape="rect">

<data:i.name />

</a>

(

<data:i.post-count />

)

</li>

</b:loop>

</ul>

</b:includable>

- <b:includable id="menu" var="data">

- <select expr:id="data:widget.instanceId + "_ArchiveMenu"">

- <option value="">

<data:title />

</option>

- <b:loop values="data:data" var="i">

- <option expr:value="data:i.url">

<data:i.name />

(

<data:i.post-count />

)

</option>

</b:loop>

</select>

</b:includable>

- <b:includable id="interval" var="intervalData">

- <b:loop values="data:intervalData" var="i">

- <ul>

- <li expr:class=""archivedate " + data:i.expclass">

<b:include data="i" name="toggle" />

- <a class="post-count-link" expr:href="data:i.url" shape="rect">

<data:i.name />

</a>

(

- <span class="post-count">

<data:i.post-count />

</span>

)

- <b:if cond="data:i.data">

<b:include data="i.data" name="interval" />

</b:if>

- <b:if cond="data:i.posts">

<b:include data="i.posts" name="posts" />

</b:if>

</li>

</ul>

</b:loop>

</b:includable>

- <b:includable id="toggle" var="interval">

- <b:if cond="data:interval.toggleId">

- <b:if cond="data:interval.expclass == "expanded"">

- <a class="toggle" expr:href="data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen" shape="rect">

<span class="zippy toggle-open">▼</span>

</a>

<b:else />

- <a class="toggle" expr:href="data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen" shape="rect">

<span class="zippy">►</span>

</a>

</b:if>

</b:if>

</b:includable>

- <b:includable id="posts" var="posts">

- <ul class="posts">

- <b:loop values="data:posts" var="i">

- <li>

- <a expr:href="data:i.url" shape="rect">

<data:i.title />

</a>

</li>

</b:loop>

</ul>

</b:includable>

</b:widget>

</b:section>

</div>

</div>

- 

<b:section class="footer-widgets" id="footer" />

- <div class="footer">

- <div class="copyright">

- <div class="left">

2007

<a href="index.html" shape="rect">Your Website</a>

</div>

- <div align="right">

- <small>

<a href="http://www.tfy.burajiru.blog.br" shape="rect">by</a>

<a href="http://www.temas.burajiru.blog.br" shape="rect">TFY</a>

-

<a href="http://www.burajiru.blog.br" shape="rect">Burajiru</a>

, from

<a href="http://arcsin.se" shape="rect">Arcsin</a>

<a href="http://templates.arcsin.se" shape="rect">template</a>

.

</small>

</div>

</div>

</div>

</div>

</div>

- 

</body>

</html>

Observaciones

Contenido:
Si hay alguien que la aplica y le funciona le ruego me lo haga saber por medio de los comentarios

Menu expandible

2007-12-12T17:30:00.000+01:00

MENU EXPANDIBLE (abrir/cerrar)
Vamos a la plantilla y buscamos la etiqueta -</head>-
y justo antes añadiremos lo siguiente:

Contraer todo | Expandir todo

Código

Contenido:
<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>

Guarda tu plantilla. Ahora, cada vez que quieras usar este script, has de añadir en la entrada o en la sidebar lo siguiente:

Código

Contenido:
<a href="javascript:void(0);" onclick="expandcollapse('AQUI UN NOMBRE PARA CADA ELEMENTO')"> [+/-] ABRIR / CERRAR</a>

<ul id="AQUI UN NOMBRE PARA CADA ELEMENTO" class="texthidden"><li><a href="AQUI EL ENLACE DEL TEXTO O IMAGEN">aqui el texto o la imagen</a></li><li><a href="AQUI EL ENLACE DEL TEXTO O IMAGEN">AQUI EL TEXTO, IMAGEN, MENU DE ENLACES</a></li></ul>

Nota

Contenido:
Y si no quieres una lista de enlaces, sino simplemente un título que expanda el texto cuando clicas en él, elimina las etiquetas <li> y </li>, de manera que el código simplificado queda así:

<a href="javascript:void(0);" onclick="expandcollapse('NOMBRE ELEMENTO')"> [+/-] TITULO</a>

<ul id="NOMBRE ELEMENTO" class="texthidden">AQUI EL TEXTO OCULTO</ul>

Seguir Leyendo

2007-12-12T15:50:00.000+01:00

MOSTRAR LA ENTRADA COMPLETA EN SU PAGINA

Primeramente buscaremos en nuestra plantilla edición HTML-Expandir Plantilla de Artilugios:Las etiquetas:
</b:skin> y </head>

y pegaremos este código

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

<style type='text/css'>

.fullpost {display:inline;}

.summarypost {display:none;}

</style>

<b:else/>

<style type='text/css'>

.fullpost {display:none;}

.summarypost {display:inline;}

</style>

</b:if>

Luego este otro pequeño código lo insertamos en cada entrada que queramos expandir y aplicar el ...Seguir Leyendo.
Esto nos llevará a la página individual de la entrada donde se mostrará completa.
Añadimos el siguiente código:

Para conseguir la URL del POST, basta publicar dicho post y con el botón derecho del ratón en propiedades nos dará la ruta del enlace. Ahora sólo nos falta aplicarlo justo donde dice -URL DEL POST-. Asegurate de que en -Configuración -Archivo tienes habilitadas las páginas de entradas-.

PopBox

2007-12-11T23:50:00.000+01:00

Tooltip

2007-12-10T19:22:00.000+01:00

Consiste en aportar información visual extra a los textos, enlaces o palabras que quieras resaltar de una manera especial. Een ellos se pueden resaltar mediante textos o imagenes que aporten una información complementaria.
Para implantarlo buscaremos en nuestra plantilla el siguiente código:]]></b:skin> y añade justo antes el siguiente código:

[+/-]Código



a.tooltip {

position:relative;

color:#000;

text-decoration:none;

}

a.tooltip span {

display: none;

}

a.tooltip:hover span {

display:block;

position:absolute;

top:2em;

left:2em;

width:120px;

border:double #000000;

background-color:silver;

color:#ffffff;

text-align: center;

font-family: Arial;

font-size: 10px;

padding: 5px;

}


Ahora cuando quieras añadir un tooltip con imagen a un enlace presenta esto así:


<a href="URL DEL ENLACE" class="tooltip">TEXTO DEL ENLACE <span><img src="URL DE LA IMAGEN">TEXTO QUE VA DENTRO DEL TOOLTIP</span></a>





y si quieres aplicarlo a una palabra sin que este sea exactamente un enlace aplica esto otro:
<a class="tooltip">AQUI LA PALABRA O FRASE<span><img src="URL DE LA IMAGEN" /></span></a>

en esta parte del código se pueden configurar estas opciones:
top:2em;.......define aquí la posición. Cambia TOP por BOTTOM para situarlo por encima
left:2em;......Cambia LEFT por RIGHT para situarlo a derecha o izquierda
width:120px;.....Define la anchura
border:double #000000; .......Defina el borde y color
background-color:silver; .....Define color de fondo
color:#ffffff; ...............Color , alineación y tipo de fuente

Pullquote

2007-12-09T22:20:00.000+01:00

Para escribir una entrada o post y la vez hacer un "pullquote" dentro del mismo texto en un lateral y que se vea el post de una manera diferente o simplemente para resaltar algo que pensemos merece la pena ponerlo de una manera especial, utilizaremos lo que llamamos un PULLQUOTE.
Para llevarlo a cabo utilizaremos el siguiente código que pondremos en la misma entrada donde queramos mostrarlo. El código es el siguiente :

<div style="border: 2px solid blue; padding: 10px; background: #ffffcc none repeat scroll 0% 50%; width: 95%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

<h4>Los podeis hacer del tamaño que querais</h4>

<div style="margin: 10px; background: white none repeat scroll 0% 50%; color: blue; width: 150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; float: right; opacity: 0.2; font-family: Verdana,Arial,Helvetica; font-size: 28px; line-height: 26px; text-align: right;">

Esto es un

<small> pullquote </small>

<strong> Un pullquote es poder hacer<small> un Post </small></strong>

Diferente<strong> para que llame la atención</strong>

</div>

<p>Tan solo un código</p>

Aquí se pone el texto que querais escribir

<p>

<b>y aquí también texto pero resaltado</b>

seguir escribiendo texto.

</p>

</div>

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

Ejemplo de cómo quedaría la entrada :

Los podeis hacer del tamaño que querais

Esto es un
pullquote
Un pullquote es poder hacer un Post
Diferente para que llame la atención

Tan solo un código

Aquí se pone el texto que querais escribir

y aquí también texto pero resaltado
seguir escribiendo texto.

Visor de fotos

2007-12-05T22:02:00.000+01:00

Visor de fotos en miniatura
-----------------------------------
Esta es una utilidad que puede ser bastante práctica, ya que se pueden ver las fotos en miniatura dentro de una misma entrada.
Para llevarlo a cabo solo tendremos que pegar el siguiente código antes de la etiqueta -/head-:
<link href='http://blogdecesar.googlepages.com/thumbnailviewer.css' rel='stylesheet' type='text/css'/>

<script src='http://blogdecesar.googlepages.com/thumbnailviewer.js' type='text/javascript'>

</script>

y para subir las fotos tendremos que añadir este otro, teniendo en cuenta que hay que pegar la URL de la imagen en dos sitios dentro del siguiente código:

<p><a href="URL de foto" rel="thumbnail" title="Esto sale abajo de la foto">

<img src="URL de foto" style="width: 85px; height: 125px" /></a></p>

Crear Secciones

2007-12-05T19:43:00.000+01:00

Para hacer en nuestro blog una especie de "secciones", basta con crear una tabla con vínculos a otras páginas o blogs. El código lo pueden añadir en la cabecera del blog, en añadir alemento HTML, Javascript y pegar lo siguiente, solamente habrá que poner las direcciones del los blogs que queramos añadir:

<table border="1" bordercolor="#000" cellpadding="2" cellspacing="2" width="100%"><br /><tr><br /><td bg style="color:#4F94CD;"><a href="dirección"><acronym title="leyenda"><span style="color:#FFFFFF;"><center><b>Titulo</a></b></span></center></td><br /><td bg style="color:#4F94CD;"><a href=" dirección "><acronym title=" leyenda "><span style="color:#FFFFFF;"><center><b>Titulo</a></b></span></center></td><br /><td bg style="color:#4F94CD;"><a href=" dirección "><acronym title=" leyenda "><span style="color:#FFFFFF;"><center><b>Titulo</a></b></span></center></td><br /><td bg style="color:#4F94CD;"><a href=" dirección "><acronym title=" leyenda "><span style="color:#FFFFFF;"><center><b>Titulo</a></b></span></center></td><br /><td bg style="color:#4F94CD;"><a href=" dirección "><acronym title=" leyenda "><span style="color:#FFFFFF;"><center><b>Titulo</a></b></span></center></td><br /><td bg style="color:#4F94CD;"><a href="correo (mailto: + correo) "><acronym title=" leyenda "><span style="color:#FFFFFF;"><center><b>Titulo</a></b></span></center></td><br /></table><br />
Ejemplo:

Titulo

Resaltar texto

2007-12-05T17:49:00.000+01:00

Cómo resaltar y poner fondo de color a una parte de texto:

Para hacerlo pongan después de <style type="text/css"> y antes de </head>

span.highlight

{

background-color:#FFFF00

}

u cuando escriban una entrada el texto que quieran resaltar lo envuelven en este código:
<span class="highlight">texto que pintan</span>

Cartel que resalta

2007-12-05T17:24:00.000+01:00

Un cartelito que aparece debajo de lo que escribimos y de lo que queremos que se resalte...
este es el código:
<acronym title="el cartelito que aparece"> lo que queres resaltar</acronym>

Ejemplo:
Hola que tal estás

Textos en movimiento

2007-12-05T17:09:00.000+01:00

Texto en movimiento
Código:
<marquee behavior="alternate">Texto en movimiento</marquee>

Texto en movimiento
Código:
<marquee direction="up">Texto en movimiento</marquee>

Texto en movimiento
Código:
<marquee direction="down">Texto en movimiento</marquee>

Texto en movimiento
Código:
<marquee direction="up" behavior="alternate">Texto en movimiento</marquee>

Texto en movimiento
Código:
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">Texto en movimiento</marquee></marquee>

Texto en movimiento
Código:
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">Texto en movimiento</marquee></marquee>

Chauuu
Código:
<marquee style="border:#FF4500 2px SOLID">Chauuu</marquee>

Buena Suerte....
Código:

<font color="#FFFF00"><marquee direction="left" style="background:#CD3333">Buena Suerte....</marquee></font>

Texto en movimiento

2007-12-05T16:58:00.000+01:00

Texto en movimiento de la barra de titulo.
-------------------------------------------------------
Para que salga el texto en movimiento en la barra del titulo inserta el siguiente código después de -head- :
<script language="javascript">

var titletext="Hola amiga, amigo...."; // TITLEBAR TEXT

var repeat=true; // SET TO true TO REPEAT, false TO "TYPE" OUT TITLE ONLY ONCE.

var index=0;

function scrolltitle(){

if(index<=titletext.length){

document.title=titletext.substring(0,index);

index++;

setTimeout('scrolltitle()', 200);

}else{

index=0;

if(repeat)setTimeout('scrolltitle()',1000);

}}

window.onload=function(){

if(!document.layers)setTimeout('scrolltitle()',1000);

}

</script>

Eliminar Cartelito

2007-12-05T16:36:00.000+01:00

Para borrar el cartelito de -Mostrar entradas con la etiqueta........-.
Desde diseño vamos a plantilla edición HTML, expandimos artilugios y buscamos este código:
<b:include data='top' name='status-message'/>

segfuidamente lo borramos y ya está. Yano aparecerá más el cartelito de "mostrar entradas"

Destacar entradas

2007-12-05T16:29:00.000+01:00

Para añadir una pequeña imagen y que destaquen nuestras entradas, iremos a plantilla HTML, expandimos artilugios y buscamos el siguiente código:
<li><a expr:href='data:i.url'><data:i.title/></a></li>

bueno una vez buscado pones este otro , que es el mismo pero en medio va la dirección de la imagen:
<li><a expr:href='data:i.url'>ACA VA LA IMAGEN<data:i.title/></a></li>

Para la foto este:
img src='dirección de imagen....'/>

La imagen debe de ser pequeñita cómo cuando se crea un favicón

Página en el blog

2007-12-05T16:16:00.000+01:00

Para poner una página dentro de nuestro propio blog, basta con insertar el siguiente código, bien sea en una entrada o bien en nuestra -sidebar-, eso sí teniendo en cuenta en este último caso la anchura y modificándola a nuestro gusto:
<iframe src="http://www.juliobriga.blogspot.com"WIDTH="50%" HEIGHT="300"></iframe>

Subir Scripts

2007-12-02T00:18:00.000+01:00

A menudo usamos en nuestras aplicaciones y plantillas Script externos, es decir que los archivos no los tenemos nosotros, si no que son otras personas y por lo tanto están en sus archivos.
Nosotros mediante una llamada les copiamos el archivo para que realicen su función en nuestra plantilla.
Esto si bien aligera el peso de nuestra plantilla tiene el inconveniente de que si falla su aplicación a nosotros también nos fallará y no realizará su función.
El Script externo se verá más o menos asi:

<script style="text/javascript" src="http://reinosano.googlepages.com/comentarios.recientes.js"></script>

Por lo tanto lo ideal sería elegir un servidor propio para subirlo.
Aunque hay bastantes servidores para alojar estos archivos, uno recomendable seria
Google Page Creator, que además es gratuito, solamente se necesita una cuenta Gmail.
Una vez creada la cuenta accedemos a sus condiciones y pinchamos en "I'm ready to create my pages",para ir a la página de nuestra cuenta
Una vez allí pinchamos -Back ro site manager- y se abrirá una página nueva, a la derecha veremos
-Site Settings- y debajo -Upload-, es allí donde en -examinar- podemos subir los archivos directamente desde nuestro PC.
Una vez subido el script a nuestro servidor en Google Page pinchamos sobre él con el botón derecho y en propiedades copiamos su dirección, que sera algo así:
http://reinosano.googlepages.com/ultimospost.js

El último paso sería eliminar la dirección original del script y colocar la del nuestro Google Pages, y así de esta manera estaremos usando nuestro propio servidor.

Generadores

2007-11-30T09:34:00.000+01:00

Get Your Aquarium

Get Your Map

Get Your DanceText

Design Your Globe

Efecto de agua

2007-11-30T09:26:00.000+01:00

Una página interesante que hace el efecto de olas de agua en las imagenes

Add this effect to your own photos

Editor de Imagenes

2007-11-29T22:33:00.000+01:00

Para editar imagenes on line, añadir texto a las imagenes sin tener que utilizar photoshop, este editor encontrado en la web cumple perfectamente para pequeños retoques.http://http://www.splashup.com/. Les muestro imagenes de la página:

Una vez en la página se pulsa en la pantalla grande donde dice JUMP RIGHT IN, seguidamente se abre el archivo bien sea desde nuestro PC, de Picassa o Flickr.

Roundpic

2007-11-27T20:09:00.000+01:00

Roundpic es una herramienta que posibilita las opciones de redondear las esquinas de cualquier imagen y también
cambiar el tamaño de las mismas y el color de fondo.Las podemos subir desde nuestro PC o poniendo la URL de la imagen.Les muestro detalle de la página

Imagen que cambia

2007-11-27T15:40:00.000+01:00

Según publica hoy el estupemdo blog de Gema@blog, este ejemplo de aplicación "Rollover", que cambia las imagenes al pasar el cursor.
Primeramente nos situamos en la plantilla edición HTML, y justo antes de -/head-, añadimos este código:
<script language="JavaScript" type="text/javascript">

imagenOn = new Image(300,300);

imagenOn.src = "images/avatar2.gif";

</script>

damos aceptar guardando los cambios y a continuación añadimos esto otro en el sitio que queramos ponerlo, bien sea una emtrada o en el sidebar;
<a href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='url-imagen';" onmouseout="document.ejemplo.src='url-imagen';">

<IMG name="ejemplo" src="url-imagen-1ª" alt = "ejemplo de rollover"width="300" height="300" border= "0">

</a>

solamente sustituimos donde pone -url.imagen-, por la imagen nuestra: Ejemplo

Buscador

2007-11-26T19:45:00.000+01:00

Para poder poner un buscador interno en nuestro blog basta añadir este corto y sencillo código a nuestra página en la sección añadir un elemento de página -HTML-Javascript-, situándolo en la parte que queramos ponerlo.Aceptamos y listo.

[+/-]Buscador


Texto:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>

Texto:
Observaciones:
Si queremos añadirle una imagen de -lupa-, cambiaremos la parte desde la que dice:
<input id="search-btn" value="Buscar" type="submit"/></form>

Texto:

por esta otra...:

<input border="0" alt="Buscar" src="http://img234.
imageshack.us/img234/5551/magnifyingglassec3.gif" type="image"/>

</form>

Seguir leyendo

2007-11-25T10:09:00.000+01:00

Para poder mostrar los textos en las entradas o post y que no se lea el texto completo, sino que una parte permanezca oculto y que se vea cuando nosotros queramos, o lo que es lo mismo el "siga leyendo...", empezaremos por seguir los siguientes pasos:

Contraer todo | Expandir todo

Siga leyendo

Contenido:
primeramente buscaremos -/head-, y seguidamente pondremos este código:
<script src='http://forevergema.googlepages.com/functiontoggleIt.js' type='text/javascript'/>

El segundo paso será buscar este código en la plantilla. Previamente habremos expandido artilugios:
<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>

Cómo tercer paso esto último los sustituiremos por este otro código:

Código Seguir leyendo:

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 los cambios y solamente falta aplicar en cada entrada esto otro:
texto

<span id="fullpost">

texto

</span>

Observaciones:

Contenido
Esta última parte se podrá para más comodidad dejarlo fijo en plantilla simplemente yendo a -opciones-formato, y pegarlo en plantilla HTML.
texto

<span id="fullpost">

texto

</span>

Mostrar contenidos

2007-11-25T00:45:00.000+01:00

Con esta aplicación podemos tener una tabla para mostrar los contenidos que deseemos, como por ejemplo un mapa del blog o cualquier otra cosa que se nos ocurra.
Primeramente pondremos lo siguiente antes de la etiqueta -/head-:

Contenido

seguidamente vamos a añadir un elemento de página -HTML-Javascript-, y pondremos el siguiente código:

[+/-]Abrir código

<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

Imagenes en post

2007-11-23T21:11:00.000+01:00

[+/-]Imagenes en los post de entrada


Texto:

Texto:
Para poner imagenes en distintos lugares de los post, aplicaremos lo siguiente:

Texto:
Post:



Para la fecha:



.date-header {

padding-left: 20px;

padding-top: 5px;

background: url(http://3.bp.blogspot.com/_Zuzii37VUO4/Rkn-DuMBU_I/AAAAAAAABN0/CNp5q8l_KY8/s1600/time.png) center left no-repeat;

}



Para las etiquetas:



.post-labels {

padding-left: 20px;

padding-top: 5px;

background: url(http://3.bp.blogspot.com/_Zuzii37VUO4/RfI1_yAns8I/AAAAAAAAAYI/5m8K2kkqYRw/s1600/etiqueta_naranja.gif) center left no-repeat;

}



Para el autor:



.post-author {

padding-left: 20px;

padding-top: 5px;

background: url(http://2.bp.blogspot.com/_Zuzii37VUO4/RfebZS0300I/AAAAAAAAAcw/dBZjEJ39hDE/s1600/autor.gif) center left no-repeat;

}



Para el titulo del post:



.post-title {

padding-left: 20px;

padding-top: 5px;

background: url(http://4.bp.blogspot.com/_Zuzii37VUO4/RkqqPZyayBI/AAAAAAAABRI/nNwfNreK6xM/s1600/icono-documento.gif) center left no-repeat;

}



Para la fecha de los comentarios:



.comment-timestamp {

padding-left: 20px;

padding-top: 5px;

background: url(http://1.bp.blogspot.com/_Zuzii37VUO4/Rkqpdpyax7I/AAAAAAAABQY/lPj-wAcTrRM/s1600/icono-calendario.gif) center left no-repeat;

}



Para los comentarios:



.comment-link {

padding-left: 20px;

padding-top: 5px;

background: url(http://2.bp.blogspot.com/_Zuzii37VUO4/Rkqpd5yax8I/AAAAAAAABQg/tu-ANuj9tvo/s1600/icono-comentarios.gif) center left no-repeat;

}



Sidebar:



Para los links:



#LinkList1 ul, #LinkList2 ul {

list-style-type:none;

}



#LinkList1 li, #LinkList2 li {

padding-left: 20px;

padding-top: 5px;

background: url(http://4.bp.blogspot.com/_Zuzii37VUO4/RkqqDZyayAI/AAAAAAAABRA/Dils27GC_tU/s1600/icono-links.gif) center left no-repeat;

}



Para los blacklinks:



#backlinks-container h4 {

padding-left: 20px;

padding-top: 5px;

background: url(http://1.bp.blogspot.com/_Zuzii37VUO4/Rkqpdpyax6I/AAAAAAAABQQ/g0c6ItO8SaQ/s1600/icono-backlinks.gif) center left no-repeat;

}



Para las etiquetas:



#Label1 ul, #Label2 ul {

list-style-type:none;

}



#Label1 li, #Label2 li {

padding-left: 20px;

padding-top: 5px;

background: url(http://2.bp.blogspot.com/_Zuzii37VUO4/Rkqpd5yax-I/AAAAAAAABQw/GgkWpItuen4/s1600/icono-etiqueta-azul.gif) center left no-repeat;

}



Footer:



Para el feed:



.feed-links {

padding-left: 20px;

padding-top: 5px;

background: url(http://1.bp.blogspot.com/_Zuzii37VUO4/Rj7ME-MBRJI/AAAAAAAAAwM/IOo-YUYR5aM/s1600/icono-feed.gif) center left no-repeat;

}



Listo :) .

Barras de separación

2007-11-20T20:24:00.000+01:00

[+/-]Barras de separación



Código:
Para añadir lineas de separación verticales dentro del blog, añadiremos lo siguiente:

Añadimos en #main-wrapper { el valor

border-left: solid #000000 1px; para conseguir una barra a la izquierda de la sidebar.

border-right: solid #000000 1px; para conseguir una barra a la derecha de la sidebar.

border-right:1px dashed #ffffff; la barra se verá punteada.



Si queremos incluir las entradas dentro de una caja,es decir, barra derecha-barra izquierda-barra arriba-barra abajo, añadimos en #main-wrapper { el valor border: solid #000000 1px;

Para verla punteada: border: dashed #000000 1px;

Si queremos que las esquinas de la caja se vean redondeadas, añadimos:



-moz-border-radius: 15px;

-webkit-border-radius: 15px;



Lo mismo puede hacerse en la sidebar, añadiendo esos valores en #sidebar-wrapper {

Observaciones:

*Si os parece que el texto de las entradas queda demasiado pegado al borde que acabamos de colocar, añadís el valor padding, por ejemplo asi: padding: 0 10px 0 10px; según se varie el valor de los pixeles (px) variará la distancia del texto al borde.

Trucos Blog

2007-11-12T09:57:00.001+01:00

[+/-]Mensajes de Alerta


Con este truco podemos conseguir resaltar algo que no queramos que pase desapercibidopo.
Para eso insertaremos el siguiente código antes - ]]></b:skin>-.

/* alerta */



.alert {

background: #fff6bf url(http://img527.imageshack.us/img527/3821/exclamationfs0.png) 15px center no-repeat;

text-align: left;

padding: 5px 20px 5px 45px;

border-top: 2px solid #ffd324;

border-bottom: 2px solid #ffd324;

}


Después de aceptar y guardar podemos empezar a usarlo en cada entrada que queramos aplicarlo poniendo esto en cada entrada:
<p class="alert">ACA VA EL MENSAJE</p>

[+/-]Cartel de Mensajes


Para ello inserta el, siguiente código entre las etiquetas -head-/head-:
Código:

<style type='text/css'>



.commentbox{

background-color: #ececec;

width: 450px;

padding: 10px;

}



.commentfooter{

background: url(http://img.godlike.cl/images/fle.gif) 20px 0 no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/

padding-left: 58px;

padding-top: 1px;

margin-bottom: 2em;

font-size: 90%;

color: #4A4A4A;

}



</style>






Después de aceptar y guardar vas a elementois de página y en la sección de -HTML-Javascript-, insertas este código donde quieras situarlo:
<div class="commentfooter">

<div style=" "><span >

ACA VA LA FIRMA</span></div></div>

[+/-]Traducir post al inglés



Texto:


Para que aparezca la bandera de traducción al inglés vamos a plantilla edición HTML y después del siguiente código :<p class='post-footer-line post-footer-line-3'>

pondremos este otro código justo a continuación:

<a expr:href='"http://world.altavista.com/babelfish/trurl_pagecontent?url=" + data:post.url + "&amp;lp=es_en"' title='Spanish to English'><img src='http://1.bp.blogspot.com/_XGtsagQTuUQ/RZk8DP2JNiI/AAAAAAAAADk/eRxHS5s1f10/s320/english.jpg' alt='Eng' /> English</a>

Ejemplo: English

Accesorios

2007-11-11T21:51:00.000+01:00

Contraer todo | Expandir todo

Drop Caps

Contenido:
Es la primera letra de un párrafo más grande que el resto del texto, al estilo de los periódicos.Puede ser interesante para dar un aspecto diferente a los textos, que lo habitualmente visto hasta ahora. A continuación les detallo el correspondiente código para implantar en su plantilla.
Código:
Ir a plantilla edición HTML (no expandir artilugios) y agregas el siguiente código entre -<b:skin><![CDATA[ y ]]></b:skin>. , preferiblemente al final

.dropcaps {

float:left;

color: $headerBgColor;

font-size:100px;

line-height:80px;

padding-top:1px;

padding-right:5px;

}

Si no funciona con la parte de :$headerBgColor,lo cambias por $titlecolor .
Después sólo tienes que añadir en cada entrada el código:
<span class="dropcaps">D</span>

o para más comodidad dejarlo fijo en Opciones, Formato y pagarlo para que salga automaticamente en todas las entradas que creemos. Aceptamos y listo.En vista previa no es visible.

Leer más

Una manera de insertar la forma de ver en las entradas parte del texto escrito y que el resto del texto se vea cuando nosotros queramos, con el fin de que en textos largos no nos ocupe demasiado en cada entrada, de los muchos sistemas que hay, es que les muestro a continuación, que no resulta demasiado complicado de insertar.
Primeramente buscaremos en nuestra plantilla Edición HTML/Expandir plantilla de Artilugios las etiquetas:</b:skin> y </head>

y entre ellas pegamos el siguiente código:

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

<style type='text/css'>

.fullpost {display:inline;}

.summarypost {display:none;}

</style>

<b:else/>

<style type='text/css'>

.fullpost {display:none;}

.summarypost {display:inline;}

</style>

</b:if>

----------
Luego en cada post que deseemos que salga el "Leer más", aplicaremos este otro código
en cada entrada, donde detallaremos el texto que queremos que aparezca a simple vista y el que deseamos ocultar.
(Aquí escribimos el principio de la entrada )

<span class="summarypost">

<a href="link-de-la-entrada">Seguir Leyendo... </a>

</span>

<span class="fullpost">

( Aquí escribimos la parte de entrada que veremos extendida )

</span>

---------
Esta última parte también la podremos aplicar de forma permanente añadiando en Opciones/Formato/Plantilla de Entrada, para no tener que estar añadiéndolo en cada post, con lo cual resulta más cómodo.
Luego en la parte de "Seguir Leyendo", también se puede sus tituir por esto para que salga en su lugar una imagen:<img src="aquí-la-url-de-la-imagen" /></a>

Favicones

Contenido:
Para aplicar "favicones" (imagenes diminutas), a nuestro blog en los apartados de
Comentarios, Etiquetas, Autor o Secciones, basta añadir el siguiente código en la
parte del blog antes de :]]></b:skin>
A continuación añadiremos el código dependiendo de la parte donde queramos situarlo, según se indica:
"Imagen en Categoría o Etiquetas"

.post-labels

{ padding-left:20px;

padding-top:5px;

background: url(url_de_la_imagen) center left no-repeat; }

"Imagen en Comentarios"

.comment-link

{

padding-left:20px;

padding-top:5px;

background: url(url_de_la_imagen) center left no-repeat; }

"Imagen en (Publicado por) o Autor del blog"

.post-author

{

padding-left:20px;

padding-top:5px;

background: url(url_de_la_imagen) center left no-repeat; }

Menús

2007-11-11T11:23:00.000+01:00

Este ménu desplegable consiste en hacer clic en sobre un botón y se despliegan una lista de links, además se pueden ir añadiendo módulos -javascript-, tamtos cómo uno quiera, sólo con ir cambiando de nombre de el -id-, por ejemplo si ponemos en uno -video-, pues en otro -música-, y así sucesivamente.
A continuación les muestro el correspondiente código para añadir a su plantilla.

Contraer todo | Expandir todo

Menú desplegable

Contenido:

Código

Contenido:
Este código lo pegaremos justo antes de --]]></b:skin>)
--

.texthidden {

display:inline

}

.shown {

display:block

}

Y este otro justo antes de -/head-:
<script src='http://andrewhonors.googlepages.com/fecha.js' type='text/javascript'/>

Luego ir a añadir elementos de página y en el elemento de -HTML-Javascript-, pondremos este otro código; aceptaremos y ya está listo para disfrutar de él.
Código:
<a href="javascript:void(0);" onclick="expandcollapse('musica')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/>

<ul id="musica" class="texthidden">

<li><a href="http://www.radioblogclub.com/" target="_blank">Radio Blog</a></li>

<li><a href="http://www.goear.com/index.php" target="_blank">Goear</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('video')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/>

<ul id="video" class="texthidden">

<li><a href="http://www.youtube.com/" target="_blank">Youtube</a></li>

<li><a href="http://www.veoh.com/" target="_blank">Veoh</a></li></ul>

TITULOS

Contenido:

Trucos Blog

2007-11-10T16:26:00.000+01:00

Podemos poner los Post escritos a doble columna, estilo periódico y quedan superchulos, y además le dá un aire de elegancia al blog. A continuación les muestro el código, que tendrán que añadir a un elemento de página -HTML-Javascript-
Abrir

Contraer todo | Expandir todo

Post Doble Columna

Contenido:
<table><td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUÃ� EL TEXTO DE LA PRIMERA<br />COLUMNA DEL POST</p> <td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUÃ� EL TEXTO DE LA SEGUNDA COLUMNA DEL POST</p> </table>

Plantilla Smashing

2007-11-10T09:54:00.000+01:00

Contenido:Otra bonita plantilla sacada de la página de Ricardo Santos, es la de Smashing, algo similar a la de Blogi Illacrino, pero en otros tonos. Abajo el código

Contenido:Otra bonita plantilla sacada de la página de Ricardo Santos, es la de Smashing, algo similar a la de Blogi Illacrino, pero en otros tonos. Abajo el código:

[+/-]Abrir código

Plantilla Podsolnuh

2007-11-09T15:43:00.000+01:00

[+]

Les muestro una bonita plantilla de 3 columnas, solamente copien el código en la parte superior con clic en el signo + y añandanlo a su página

[+]

Nombre:
Email:
Motivo:
Mensaje: