Iconos del Sistema Solar

Navegando por la red me tope con tre conjuntos de iconos del sistema solar en alta calidad. Y ahora se los comparto para que los puedan descargar.

Este primer paquete fue hecho por Iconka y dentro de el se encuentran 10 iconos de 9 planetas y un satélite.
Sus medidas son: 128x128px y 64x64px.
Los formatos en que se encuentran son: ICO, BIN Y PNG.

Iconos del Sistema Solar

Este fue hecho por Dan Wiersema.
Son 13 iconos del Sistema Solar inspirados en los objetos en la Vía Láctea.
Contiene el Sol, la Luna, 8 planetas y 3 planetas enanos.

Iconos del Sistema Solar

Y este tercer paquete fue hecho por WebTrance y se encuentran con medidas 256x256px y en formato PNG.
Los iconos son: Mercurio, Venus, Tierra, Marte, Júpiter, Saturno, Urano, Neptuno y Plutón. y además 4 extras del satélite lunar.

Iconos del Sistema Solar

Ojala y te sean de gran utilidad.

p1

Imagenes efecto hover con CSS

Los efectos básicos realizados con CSS no nos dejan de sorprender, en este caso el efecto hover que en una imagen se genera al colocar el puntero del mouse sobre la misma.

2 ejemplos de muestra:


Los códigos son muy sencillos:

Colocas el CSS antes de ]]></b:skin>

.Imagenhover a {
display: block;
width: 100px; /* Ancho de la imagen hover */
height: 100px; /* Alto de la imagen hover */
}
.Imagenhover a:hover, .Imagenhover a:focus, .Imagenhover a:active {
background: transparent url(Url-de-imagen-2) no-repeat;
}
.Imagenhover a:hover img, .Imagenhover a:focus img, .Imagenhover a:active img {
background: transparent;
visibility: hidden;
}

Y el siguiente HTML lo colocas en una entrada

<div class="Imagenhover">
<a href="#">
<img src="Url-de-imagen-1" width="100" height="100" />
</a>
</div>

0
Ancho y alto de la imagen 1

p1

Imagenes animadas para el telefono movil

En Fondos animados han realizado una gran cantidad de imágenes animadas para tu teléfono móvil y por que no, para tu facebook también.
Imágenes animadas para el teléfono móvil

Las encuentras en 15 categorías:



Y hasta te es proporcionado un código de cada una de ellas para incrustarlas en tu web/blog:

Imágenes animadas para el teléfono móvil

Aquí unos ejemplos:

Imágenes animadas para el teléfono móvil

p1

Desplazamiento de texto y varias cosas mas con la etiqueta marquee

Los desplazamientos de texto nos pueden servir para darle un toque llamativo al blog.
Aunque pocos somos los que usamos estos efectos, es interesante saber como generarlos. Y es por medio de la etiqueta <marquee>.

Este es un texto común desplazándose hacia la izquierda:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<marquee direction="left" scrollamount="2" scrolldelay="2" style="background-color: #EEE; color: #FF8000; border: 8px solid #FFCC00; font-family: Georgia; font-size: 100px; width: 500px; height: 130px; border-radius: 20px; box-shadow: 0 0 20px #CCC;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
</marquee>

Personalízalo como desees:

0
Desplazamiento del texto (left/izquierda, right/derecha, up/arriba, down/abajo y behavior="alternate"/alternado)
0
Velocidad del desplazamiento del texto (varia las cifras para aumentar o disminuir la velocidad)
0
Color de fondo
0
Color del texto
0
Tamaño, tipo y color del borde
0
Tipo de letra
0
Tamaño de letra
0
Espacio horizontal para que aparesca el texto
0
Espacio vertical para que aparesca el texto
0
Borde redondeado
0
Sombra del recuadro

Además de todo esto incluido le podrás agregar al texto un enlace: <a href="URL-de-enlace">Enlace</a> o una imagen de fondo: background-image: url(URL-de-tu-imagen);

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

También podrás colocar dos links para que decidas hacia donde quieres que se desplace:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

◄ Hacia la izquierda | Hacia la derecha ►
▲ Hacia arriba | Hacia abajo ▼

<marquee id="ejemplo" direction="left" scrollamount="2" scrolldelay="2" style="background-color: #EEE; color: #FF8000; border: 8px solid #FFCC00; font-family: Georgia; font-size: 20px; width: 500px; height: 25px; border-radius: 20px; box-shadow: 0 0 20px #CCC;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</marquee>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='left';">&#9668; Hacia la izquierda</a>  
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='right';">Hacia la derecha &#9658;</a>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';">&#9650; Hacia arriba</a>   
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';">Hacia abajo &#9660;</a>


Pero no solo con la etiqueta <marquee> podemos desplazar textos sino también imágenes, tablas, videos, etc,.


Titulo
Subtitulo 1Subtitulo 2Subtitulo 3
111


p1

Crear imagenes tipograficas con caracteres

Text image, es un sitio en línea que te permite convertir imágenes en tipografías con texto, caracteres o números.

La imagen ya convertida, claro que la puedes guardar haciendo una captura pero también te proporciona el código HTML de la imagen como?, dando clic derecho y seleccionas ver código fuente y otras dos opciones que tiene es que también la puedes convertir en código ASCII y efecto matrix.

Para convertir busca una imagen desde tu ordenador, coloca tus caracteres, elige si los quieres al azar o en secuencia, elige el tamaño de tu imagen, lo ancho, el color de fondo y contraste:

Una vez personalizada, das clic en convertir y listo.

Estos son algunos ejemplos:
Imágen normal:

Imagen en código HTML:

Imágen en código ASCII:

Imágen con efecto matrix:

Los formatos que acepta para convertir son: BMP,GIF, JPG Y PNG.
A pesar de que puedes convertirlas en el sitio, también te permite bajar un programa portable para Windows similar al del sitio para convertir:

Descárgalo desde el sitio del autor
La imagen que uso de ejemplo pertenece a Muri autor del mismo sitio.

p1

Columnas de texto con CSS

Cuanto más hemos visto blogs que brindan bastante información y que requieren de dos o varias columnas de texto para mostrarlo dentro de una sola entrada.
Si, ahora en esta entrada veremos como crear de dos hasta cinco columnas de texto.

Columnas de texto con CSS
Puedes ver las demostraciones aquí

Para llevar a cabo los ejemplos sigue los siguientes pasos:

Para obtener cada ejemplo de dos, tres, cuatro o cinco columnas incluye el CSS justo antes de línea ]]></b:skin> y el HTML dentro de una entrada.



Dos columnas de texto

CSS:
#columna1 {
position: absolute;
left:1%;
width:48%;
top:50px;
background-color:#DDD;
 }
#columna2 {
position: absolute;
left:51%;
width:48%;
top:50px;
background-color:#DDD;
 }

HTML:
<div id="columna1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>



Tres columnas de texto

CSS:
#columna1 {
position: absolute;
left:1%;
width:31%;
top:50px;
background-color:#DDD;
 }
#columna2 {
position: absolute;
left:34%;
width:31%;
top:50px;
background-color:#DDD;
 }
#columna3 {
position: absolute;
left:67%;
width:31%;
top:50px;
background-color:#DDD;
 }

HTML:
<div id="columna1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>



Cuatro columnas de texto

CSS:
#columna1 {
position: absolute;
left:1%;
width:23%;
top:50px;
background-color:#DDD;
 }
#columna2 {
position: absolute;
left:26%;
width:23%;
top:50px;
background-color:#DDD;
 }
#columna3 {
position: absolute;
left:51%;
width:23%;
top:50px;
background-color:#DDD;
 }
#columna4 {
position: absolute;
left:76%;
width:23%;
top:50px;
background-color:#DDD;
 }

HTML:
<div id="columna1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>



Cinco columnas de texto

CSS:
#columna1 {
position: absolute;
left:1%;
width:18%;
top:50px;
background-color:#DDD;
 }
#columna2 {
position: absolute;
left:21%;
width:18%;
top:50px;
background-color:#DDD;
 }
#columna3 {
position: absolute;
left:41%;
width:18%;
top:50px;
background-color:#DDD;
 }
#columna4 {
position: absolute;
left:61%;
width:18%;
top:50px;
background-color:#DDD;
 } 
#columna5 {
position: absolute;
left:81%;
width:18%;
top:50px;
background-color:#DDD;
 }

HTML:
<div id="columna1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

0
Para aumentar o reducir el ancho de cada una de las columnas varia las cifras
0
También podrás acercarlas o alejarlas de distancia
0
Además de cambiarle el color de fondo
#columna1 {
position: absolute;
left:1%;
width:48%;
top:50px;
background-color:#DDD;
 }
#columna2 {
position: absolute;
left:51%;
width:48%;
top:50px;
background-color:#DDD;
 }

p1

Acordeones generados con CSS

Acordeones generados con CSSUna forma de crear acordeones sencillos es por medio de código CSS.
Se trata de dos acordeones, uno de forma horizontal y uno vertical así que para colocarlos en tu blog lleva a cabo los siguientes pasos:

Ejemplo de un acordeón horizontal:

Titulo 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Titulo 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Titulo 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Titulo 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Incluye el CSS justo arriba de ]]></b:skin>
/* Acordeón en general */
#acordeonhorizontal {
 font: small/1.2 Arial, Helvetica, sans-serif;
 width: 500px;
 margin: 10px auto; }
#acordeonhorizontal div {
 float: left;
 width:25%;
 height: 298px;
 overflow: hidden; }
#acordeonhorizontal:hover div {
 width: 20px; }
#acordeonhorizontal:hover div:hover {
 width: 440px;
 overflow: auto; }

/* Colores de fondo */
#titulo1 {
 background-color: #EEE; }
#titulo2 {
 background-color: #DDD; }
#titulo3 {
 background-color: #CCC; }
#titulo4 {
 background-color: #BBB; }

/* Títulos */
h2 {
 font-size: 150%;
 margin: 10px 10px .2em 25px; }

/* Párrafos */
p {
 margin: 1em 25px; }

Ahora el HTML incluyelo en una entrada o como elemento HTML/Javascript
<div id='acordeonhorizontal'>
<div id='titulo1'>
<h2>Titulo 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id='titulo2'>
<h2>Titulo 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id='titulo3'>
<h2>Titulo 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id='titulo4'>
<h2>Titulo 4</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div style='float: none; clear: both; height: 0;'></div>
</div>

Ejemplo de un acordeón vertical:

Titulo 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Titulo 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Titulo 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Titulo 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.






De igual manera incluye el CSS justo arriba de ]]></b:skin>
/* Acordeón en general */
#acordeonvertical {
 font: small/1.2 Arial, Helvetica, sans-serif;
 width: 500px;
 height: 318px;
 margin: 10px auto; }
#acordeonvertical div {
 height:25%;
 overflow: hidden;}
#acordeonvertical:hover div {
 height: 20px; }
#acordeonvertical:hover div:hover{
 height: 340px;
 overflow: auto; }

/* Colores de fondo */
#titulo1 {
 background-color: #EEE; }
#titulo2 {
 background-color: #DDD; }
#titulo3 {
 background-color: #CCC; }
#titulo4 {
 background-color: #BBB; }

/* Títulos */
h2 {
 font-size: 150%;
 margin: 10px 10px .2em 25px; }

/* Párrafos */
p {
 margin: 1em 25px; }

Y también el HTML incluyelo en una entrada o como elemento HTML/Javascript
<div id='acordeonvertical'>
<div id='titulo1'>
<h2>Titulo 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id='titulo2'>
<h2>Titulo 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id='titulo3'>
<h2>Titulo 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id='titulo4'>
<h2>Titulo 4</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div style='float: none; clear: both; height: 0;'></div>
</div>

Por ultimo agrega más filas o columnas ya sea para el acordeon vertical u horizontal y también agrégale los párrafos que desees.
<div id='titulo1'>
<h2>Titulo 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id='titulo2'>
<h2>Titulo 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id='titulo3'>
<h2>Titulo 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id='titulo4'>
<h2>Titulo 4</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id='titulo5'>
<h2>Titulo 5</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>

p1

Plantillas originales para Blogger

Plantillas para bloggerYa te aburrio tu plantilla y deseas cambiarla por una mejor, Best theme es el sitio ideal para encontrar las plantillas más originales probadas con los cinco navegadores principales como: Mozilla firefox, Google chrome, Safari, Opera e IE. De hecho en este mismo sitio encontré esta misma plantilla que he ido personalizando:
Liquid
Plantillas para blogger y wordpress

Otras muestras:
Ubert
Plantillas para blogger

Box Office
Plantillas para blogger

Wallbase
Plantillas para blogger

Bionic
Plantillas para blogger

Carmen
Plantillas para blogger

Deep Blue
Plantillas para blogger

Lycus
Plantillas para blogger

Jovan
Plantillas para blogger

Lifetime
Plantillas para blogger

p1
                                                                                                                                                                                                                                                                                                                                                       
Ciudad Blogger

Hola, Bienvenido a Blog 2000!

Puedes seguirnos en las redes sociales o suscribirte al feed.

Blog 2000 Blog 2000 Blog 2000 Blog 2000

¡Suscríbete a nuestro blog!

Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.

Blog 2000