Unión de Bloggers Hispanos

Hace unos días leía la noticia en Google Operating Sistem, de que Google
Pages va a cerrar a final de año, y no podía imaginar el fatal alcance de esta noticia, hasta

Ya no sólo los que se dedican a diseñar themes de wordpress, sino cualquier usuario que quiera cambiar algún aspecto de su plantilla, encontrará una excelente referencia en esta pequeña guía de etiquetas.

Free CSS Templates es un sitio que ofrece una colección de plantillas CSS
gratuitas.   Las plantillas están diseñadas de una forma que es muy raro que den problemas  y esto es debido a que no poseen tablas, son muy livianas, por lo cuál las páginas se cargan en forma rápida y como si esto fuera poco, todas cumplen con el standard de la W3C.

Muchas veces cuando vamos a buscar inspiración de diseños para un blog, es difícil encontrar las combinaciones de colores deseadas. Y es un gran lujo, poder contar con la posibilidad de poner nosotros la combinación de colores que queremos y que nos muestren una galería de diseños con esos colores.

La primera vez que descurbrí algo sobre Lorem ipsum, fue cuando era niña y mi padre nos llevaba con él a la imprenta en la que trabajaba, sus compañeros lo mencionaban constantemente en diferentes pruebas que utilizaban para ver los resultados de los textos.

A partir de la versión 2.0 de wordpress, el sistema de widgets de la columna lateral, venía integrado en el código del script.

En esta página, describen cómo incluír los códigos e incluso ponen algunos ejemplos, lo malo es que está en inglés. Yo espero describirlo en dos simples pasos.

Hace unas semanas cuando estaba calentando los motores para actualizar el blog, me puse a probar con varios menús de navegación para poder tener los cuatro servicios unidos y visibles y que fuese más fácil acceder a ellos.

Probé con un sistema complicadísimo, pero el resultado fue pésimo, hasta que Mik (repito, el que tiene un amigo tiene un tesoro), me recomendó el siguiente sistema. Muchísimo más sencillo, funcional y el estilo como veréis atractivo y perfectamente adaptable.

En el weblog de Christopher Ware, encontramos estos magníficos diseños para poner un menú de navegación en tu blog y poder destacar páginas importantes, de forma sencilla.

Podéis verlos en acción en la página de demostración, pero tranquilos que por muy complicado que parezca es muy sencillo.

Para comenzar podéis ir descargando el equipo completo,

Que consta de un archivo htlm, con los códigos que podéis necesitar para cada menú y dos imágenes por menú, si os fijáis en la demostración, cada menú va enumerado con una letra, al igual que las imágenes que necesita.

1.- Escoger un menú

Lo primero que haremos será escoger uno de los once menús, el que más os guste para vuestro blog, entonces dependiendo de la letra con la que esté enumerado buscamos las imágenes que le corresponden enumeradas con la misma letra.

2.- Subir las imágenes al servidor

Por ejemplo para el menú H, necesitaremos las imágenes tableft.gif y tbrightH.gif, y las subiremos a nuestro servidor o un servidor gratuíto, quedándonos con las rutas que las necesitaremos para añadir al código

.

tableftH

tabrightH

3.- Cómo Editar los códigos
Ahora vamos con el código, abrimos el archivo menus.htlm con vuestro editor web favorito o en su defecto con un editor de texto cualquiera.

4.- El estilo CSS

En primera instancia, vendrán ordenados los estilos css, copiáis el que corresponda a vuestro menú y lo pegáis en la hoja de estilos de vuestros blogs entre las etiquetas <style></style>

He marcado en negrita, los lugares que debéis editar y poner las rutas (url) de las imágenes que con anterioridad habéis subido al servidor, cada una lleva su nombre. No debéis tocar nada más (a no ser que queráis adaptar algún color o cualquier otra cosa).

/*- Menu Tabs H--------------------------- */

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

5.- El código htlm

Luego vamos con el código htlm que viene a continuación, os deslizáis hasta el que corresponda con vuestro menú y comenzáis a editarlo, es conveniente que tengáis claro de antemano qué páginas váis a incluír en el menú y el orden que les váis a poner:

<div id="tabsH">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
<br /><br />

Sustituyendo los siguientes campos:

# ---> Por la dirección url de las páginas que vayáis a poner, una por cada almohadilla

Link 1---> El nombre que se verá de la página, veréis que sale dos veces, editadlo las dos, porque la que corresponde a title, es la que se verá cuando pasen el puntero por encima de ella

Por defecto viene preparado para siete enlaces, dependiendo de los que le queráis poner podéis añadir (copiando y pegando) o quitar, borrando lo que sobre.

Una vez editado, lo copiáis y pegáis en el código de vuestro blog en el lugar que queráis que se vea entre las etiquetas <body></body>

Si queréis ver ejemplos en UBH utilizamos estos diseños

6.- Precauciones: Antes de andar toqueteando el código si no tienes mucha experiencia, mejor que hagas copias de seguridad antes y utilices la previsualización antes de guardar cualquier cambio.

Referencias ---> Mikitrix - ExplodingBoy - Free CSS Navigation Menú Design

El blog por alguna razón ha desaparecido de la blogosfera, espero que su administrador nos de alguna pista de su nueva ubicación, y pediros disculpa a todos los que no hayáis encontrado lo que buscábais

Difícil tarea encontrar plantillas para la nueva versión de Blogger, que se salgan un poco de lo común y le den un poco de personalidad a vuestros blogs. Pues parece que al menos de momento, debemos tener en cuenta el trabajo de este nuevo compañero de UBH, que diseña sus propias plantillas.

Plantillas NARKO-TEAM, entraba hoy en nuestro directorio produciendo la sorpresa de la administradora al revisar el blog. De momento contabilizamos 16 plantillas, de estilo propio, muy originales y gratuítas. Seguramente que poco a poco, nos van deleitando con muchas más.

Para su instalación y para todos los detalles que debéis tener en cuenta, pasaros por esta entrada, Instrucciones - Instalación, y veréis los detalles completamente en español.