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.

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.

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.

Ojala y te sean de gran utilidad.

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>

Ancho y alto de la imagen 1

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.

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:



Aquí unos ejemplos:

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:

Desplazamiento del texto (left/izquierda, right/derecha, up/arriba, down/abajo y behavior="alternate"/alternado)
Velocidad del desplazamiento del texto (varia las cifras para aumentar o disminuir la velocidad)
Color de fondo
Color del texto
Tamaño, tipo y color del borde
Tipo de letra
Tamaño de letra
Espacio horizontal para que aparesca el texto
Espacio vertical para que aparesca el texto
Borde redondeado
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 1	Subtitulo 2	Subtitulo 3
1	1	1

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.

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.

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>

Para aumentar o reducir el ancho de cada una de las columnas varia las cifras
También podrás acercarlas o alejarlas de distancia
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;
 }

Una 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:

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:





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>

Ya 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

Otras muestras:
Ubert

Box Office

Wallbase

Bionic

Carmen

Deep Blue

Lycus

Jovan

Lifetime