]

miércoles, 29 de octubre de 2014

CENTRAR PESTAÑAS O PÁGINAS

Cómo centrar las pestañas o páginas en Blogger 

PESTAÑAS
Las pestañas de las páginas por defecto salen a la izquierda, pero se pueden centrar para que queden así:

Tenemos que:

Ir al Diseñador de Plantillas

Avanzado

Añadir CSS

Y copiar esto en la cajita:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

Si ya tendéis un código ahí, así que lo único que tenéis que hacer es pulsar varios Intros entre uno y otro.

Es decir, si al poner el otro, teníamos que dar a Intro para que el cursor nos quedara justo debajo del  }

Estando debajo ya, añadimos dos Intros más y copiamos este otro que os acabo de dar.
Y pulsamos Intro


Y cuando el cursor nos queda justo debajo de  }


Aplicar al blog



Cómo alinear a la derecha las pestañas o páginas en Blogger

 Repetimos el mismo proceso de arriba...

Pero en lugar de copiar ese código que os he dado antes, copiamos este otro

.PageList {text-align:right !important;}
.PageList li {display:inline !important; float:none !important;}

Aplicamos al blog...

Y nos quedan alineadas a la derecha:


martes, 28 de octubre de 2014

Lista de las etiquetas data

Blogger: Lista de las etiquetas data

En Blogger hay una mezcla de idiomas de que muchas veces confunde porque ¿qué etiqueta HTML es <b:skin> </b:skin>? La respuesta es sencilla, Blogger habla lenguaje Blogger y todas esas etiquetas que comienzan con <b: y terminan con </b: son etiquetas especiales. No vamos a entrar en demasiados detalles.

Pero no son las únicas etiquetas especiales.

Muchas veces, cundo alguien cambia la plantilla o tiene algún problema, suele preguntar ¿que hago con las cosas en la sidebar? Si pregunta es porque ve la plantilla, busca eso que escribió en un elemento HTML, por ejemplo y ... no lo encuentra por ningún lado ¿dónde está? Pués están en el mismo lugar donde están los posts o por ahí cerca.

Blogger guarda todo eso y mucho más en "una base de datos" a la que no podemos acceder sino es por medio de etiquetas especiales o mediante algún script que utilice
JSON (JavaScript Object Notation) lo que suele ser bastante complicado de hacer.

Si alguien quiere saber cuál es la diferencia entre WordPress y Blogger ya tiene mi respuesta: esa imposibilidad es la "gran diferencia", lo demás es maquillaje.

Estamos limitados pero aún así podemos acceder a algunos datos ya que hay una etiqueta específica para eso y la podemos ver en cualquier plantilla. En términos generales tienen esta sintáxis:
<data:tipo[.subtipo]>
donde tipo es el nombre del dato que, en algunos casos tiene un subtipo que se separa del anterior por un punto.

Algunas de esas etiquetas (y de esos datos) sólo pueden usarse en algún lugar específico de la plantilla; otros pueden ser accesibles desde cualquier lugar.

Un detalle a tener en cuenta es que SOLO pueden estar en la plantilla así que los elementos no pueden contener etiquetas de ese tipo sino sólo HTML puro.

Un problema extra es que no hay una lista oficial de estas etiquetas y constantemente Blogger crea nuevas y se adosan a las plantillas por defecto sin que nos enteremos de su existencia hasta que las vemos.

Las etiquetas de uso general tienen el siguiente formato:
<data:blog.nombre/>
Y son las siguientes:

data:blog.title es el título del blog según lo hayamos definido en la configuración
data:blog.pageTitle es el título de la página actual que, generalmente, es el título del blog más algún otro dato adicional
data:blog.pageName es el título de la página que generalmente coincide con el título del post
data:blog.pageType es el tipo de página donde estamos (item archive index)
data:blog.homepageUrl la dirección URL de la página de inicio del blog
data:blog.url es la dirección URL de la página donde estamos
data:blog.feedLinks es lo que permite descubrir la dirección de los feeds
data:blog.encoding es el tipo de codificación (UTF-8, etc.)
data:blog.languageDirection indica la forma de escritura del lenguaje del blog

Las otras etiquetas sólo son accesibles dentro de ciertos sectores definidos con las etiquetas:
<b:includable id="tipo">
.......
</b:includable>
Ese valor indicado en el atributo ID es el que define que tipo de datos son accesibles.

Hay un dato que es común a todos los elementos:

data:title es el texto del título que le dimos al elemento

En el HEADER sólo hay uno más:

data:description es el texto con la descripción del blog definida en la configuración

En el elemento PROFILE (perfil) hay muchos y se corresponden con los datos de nuestra cuenta:

data:userUrl es la dirección URL de nuestro perfil en Blogger
data:displayname es el nombre a ser mostrado
data:location es la ubicación geográfica del administrador
data:aboutme es el texto por defecto "About Me"
data:team indica si es es un blog individual (false) o colectivo (true)

La imagen de nuestro perfil se encuentra en data:photo.subtipo:

data:photo.url es la dirección URL donde está alojada la imagen
data:photo.width es el ancho de la imagen (en pixeles)
data:photo.height es el alto de la imagen (en pixeles)
data:photo.alt es el texto del atributo ALT

En el caso de blogs colectivos, data.authors.subtipo contiene la lista de autores:

data:authors.displayname cada uno e los autores
data:authors.userURL las direcciones de los perfiles

En los elementos TEXT y HTML sólo hay un dato:

data:content que es contenido (un texto plano)

En el elemento PICTURE (imagen):

data:sourceUrl es la dirección URL de la imagen
data:width es el ancho de la imagen (en pixeles)
data:height es el alto de la imagen (en pixeles)
data:caption es el texto adicional optativo

En los elementos LABELS (etiquetas) data:labels.subtipo contiene la lista de etiquetas:

data:label.name el nombre de la etiqueta
data:label.count la cantidad de posts con esa etiqueta
data:label.url la dirección URL a la página de etiquetas

En el elemento LIST (listas) sólo hay un dato:

data:items contiene la lista de items

En el elemento LINKLIST (vínculos) la lista se encuentra en data:links.subtipo:

data:links.name el texto de los enlaces
data:links.target la dirección de cada enlace

En el elemento LOGO (el botón de Blogger):

data:fullButton es la dirección URL de la imagen elegida

En el elemento ADSENSE:

data:adStart marca el inicio del elemento
data:adCode es el contenido
data:adEnd marca el final del elemento

En el elemento ARCHIVES (archivos):

data:style indica el estilo (MENU FLAT HIERARCHY)
data:toggleopen es un dato interno usado por Blogger

Y data:data.subtipo contiene la lista de archivos:

data:data.name el título de cada entrada
data:data.url la direcciòn URL de cada entrada
data:data.post-count la cantidad de posts por fecha

Además, se usa data:interval.subtipo para los bucles internos definidos:

data:interval.expclass
data:interval.toggleId
data:intervalData.expclass
data:intervalData.url
data:intervalData.name
data:intervalData.post-count
data:intervalData.data
data:intervalData.posts

Los datos de los feeds son válidos para el elemento FEEDS, para la pagina principal, para la de items y para los comentarios:

data:feedUrl es la dirección del feed

La lista de feeds se encuentra en data:feedLinks.subtipo:

data:feedLink.url la dirección del feed
data:feedLink.name es el título y por defecto es "Posts Comments"
data:feedLink.feedType el tipo (Atom o RSS)
data:feedLink.mimeType el tipo MIME

Los items individuales en data:feedData.subtipo:

data:feedData.title el título
data:feedData.published la fecha de publicación
data:feedData.str_published el texto para indicar la fecha de publicación
data:feedData.updated la fecha de actualización
data:feedData.str_updated el texto para indicar la fecha de actualización
data:feedData.author el nombre del autor
data:feedData.summary es el contenido (snippet)

Hay información adicional se guarda en data:feedData.alternate.subtipo (sí, puede haber tantos subtipos como se le ocurra a Blogger):

data:feedData.alternate.href es la dirección del enlace (permalink)
data:feedData.alternate.type es el tipo de contenido

El área más compleja es la de los posts, el elemento POSTS, allí, hay varias secciones diferentes y cada una tiene sus propios datos.

El área de navegación que se muestra en la parte inferior el área de posts:

data:olderPageUrl es la URL al post anterior
data:olderPageTitle es el texto del enlace "Entradas antigüas"
data:newerPageUrl es la URL al post siguiente
data:newerPageTitle es el texto del enlace "Entradas recientes"

Datos que se usan en los pie de página, son textos que establecemos nosotros o que se definen por defecto:

data:commentLabel es el texto que seleccionemos "comment"
data:commentLabelPlural es el texto que seleccionemos "comments"
data:postCommentMsg es el texto "Publicar un comentario en la entrada"
data:authorLabel es el texto que muestra al autor "posted by"
data:timestampLabel es el texto que indica la fecha "posted at"
data:postLabelsLabel es el texto que señala las etiquetas "labels for this post"
data:backlinksLabel es el texto que señala los backlinks "links to this post"

data:navMessage es el mensaje que aparece al navegar por etiquetas:

data:widget.actionUrl es un dato interno de Blogger
data:widget.instanceId es un dato interno de Blogger

Hay una serie de datos agrupados en data.post.subtipo que se refieren a los artículos publicados:

data:post.dateHeader es la fecha del encabezado
data:post.id es un identificador único
data:post.title es el texto del título
data:post.body es el contenido de la entrada
data:post.url el enlace permanente (permalink)

data:post.showAuthor indica si se muestra (true) o no se muestra (false) al autor
data:post.author el nombre del autor
data:post.authorLabel el texto que precede al nombre del autor "posted by"

data:post.showTimestamp
indica si se muestra (true) o no se muestra (false) la fecha
data:post.timestamp la fecha/hora de publicación
data:post.timestampLabel el texto que precede la fecha/hora de publicación

data:post.commentLabel es el texto que seleccionemos "comment"
data:post.commentLabelPlural es el texto que seleccionemos "comments"
data:post.allowComments indica si se permiten comentarios (true) o no (false)
data:post.numComments la cantidad de comentarios
data:post.addCommentUrl la dirección URL al formulario "add a comment"
data:post.addCommentOnclick dirección URL para agregar comentario

data:post.showBacklinks indica si se muestran los backlinks (true) o no (false)
data:post.numBacklinks la cantidad de backlinks
data:post.createLinkLabel es el texto para crear un backlink a la entrada "links to this post"
data:post.createLinkUrl la dirección URL para enlazar un post
data:post.backlinksLabel es el texto que precede a la lista de backlinks

data:post.editUrl la dirección URL al formulario de edición del post
data:post.emailPostUrl la dirección URL para enviar el post via mail "email this post"
data:post.emailPostMsg es el texto alternativo para enviar el post via mail
data:post.includeAd indica si hay un elemento Adsense (true) o no (false)
data:post.adminClass es un dato interno de Blogger

A partir de la posibilidad de tener los comentarios en varias páginas cuando superan cierta cantidad se han agregado algunos datos que lo controlan:

data:post.commentPagingRequired indica si es necesario (true) o no (false)
data:post.commentRangeText el texto de la paginación
data:post.oldLinkClass es la clase CSS para "retroceder" en la paginación
data:post.olderLinkUrl la dirección URL de la página anterior
data:post.olderLinkText el texto para ir a la página anterior
data:post.oldestLinkUrl la dirección URL de la primera página
data:post.oldestLinkText el texto para ir a la primera página
data:post.newLinkClass es la clase CSS para "avanzar" en la paginación
data:post.newerLinkUrl la dirección URL de la página siguiente
data:post.newerLinkText el texto para ir a la página siguiente
data:post.newestLinkUrl la dirección URL de la última página
data:post.newestLinkText el texto para ir a la última página

La lista de feeds del post está en data:post.feedLinks.subtipo:

data:post.feedLinks.url la URL de los feeds
data:post.feedLinks.name el lugar donde están (Posts o Comments)
data:post.feedLinks.feedType el tipo (Atom o RSS).
data:post.feedLinks.url la URL de los feeds
data:post.feedLinks.name el lugar donde están (Posts o Comments)
data:post.feedLinks.feedType el tipo (Atom o RSS).

La lista de etiquetas se encuentra en data:post.label.subtipo:

data:label.name el nombre de cada etiqueta
data:label.url la dirección URL de la página de etiquetas
data:label.isLast indica si es la última etiqueta de la lista (true) o hay más (false)

En las páginas individuales (items) la lista de datos de los comentarios se encuentra en data:comment.subtipo:

data:comment.id es el identificador único de cada comentario
data:comment.body es el contenido
data:comment.timestamp la fecha de publicación
data:comment.author el nombre del autor o "Anonymous"
data:comment.authorUrl la dirección URL del autor
data:comment.deleteUrl la dirección URL al formulario para eliminarlo
data:comment.isDeleted indica si fue eliminado (true)
data:comment.adminClass es un dato interno de Blogger

En las páginas individuales también hay una lista de backlinks en data:post.backlink.subtipo:

data:backlink.title el título del enlace
data:backlink.url la dirección URL del enlace
data:backlink.snippet es el contenido
data:backlink.author el nombre del autor
data:backlink.timestamp la fecha
data:backlink.deleteUrl la dirección URL al formulario para eliminarlo
data:backlink.adminClass es un dato interno de Blogger

Hay toda una serie de datos que se ven en algunas plantillas que parecen contener muchos de los mismos datos de anteriores data:top.subtipo:

data:top.showAuthor como data:post.showAuthor
data:top.authorLabel como data:post.authorLabel
data:top.timestampLabel como data:post.timestampLabel
data:top.showTimestamp como data:post.timestamp
data:top.commentLabel como data:post.commentLabel
data:top.commentLabelPlural como data:post.commentLabelPlural
data:top.showTimestamp como data:post.showTimestamp
data:top.backlinkLabel como data:post.backlinksLabel
data:top.showBacklink como data:post.showBacklinks
data:top.emailPostMsg como data:post.emailPostMsg

Cuando los datos son parte de una lista, se guardan en un array por lo que deben ser leídos mediante un bucle:
<b:loop values='data:posts' var='i'>
<li>
<a expr:href='data:i.url'>
<data:i.title/>
</a>
</li>
</b:loop>

De: http://vagabundia.blogspot.com/2008/07/blogger-lista-de-las-etiquetas-data.html



Poner música en blog


¿Cómo poner y/o añadir Música en un Blog de Blogger?

Es muy muy fácil. Vamos a Youtube, escogemos el vídeo con la canción que nos gusta y damos click en "Compartir".

Click en el botón "Insertar".


En las opciones que aparecen buscamos y marcamos el último recuadro que dice "Utilizar el antigüo código de inserción".

codigo-youtube-musica
Copiamos todo el código y lo pegamos en un archivo de texto. (Utilizaré un código cualquiera como ejemplo).
Primera Opción: Reproductor Invisible

Si queremos que la Música comience a escucharse inmediatamente al entrar a nuestro Blog, buscamos lo siguiente en el código que tenemos:
<object height="420" width="315"><param name="movie" value="http://www.youtube.com/v/Aq4eqLSFbHw?version=3&amp;hl=es_ES" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/Aq4eqLSFbHw?version=3&amp;hl=es_ES" type="application/x-shockwave-flash" width="420" height="215" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Sustituimos en donde dice [version=3 por autoplay=1] en los dos lugares que les indiqué en color rojo y colocamos "000" en width y "010" en height (en donde dice: width="420" height="315").
Quedaría así: width="000" height="010".

Ejemplo:
<object height="000" width="010"><param name="movie" value="http://www.youtube.com/v/Aq4eqLSFbHw?autoplay=1&amp;hl=es_ES" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/Aq4eqLSFbHw?autoplay=1&amp;hl=es_ES" type="application/x-shockwave-flash" width="000" height="010" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Actualización hoy 20 Enero 2013: Modificar el valor por "000" en width y "010" en height *Recuerden hacerlo en los dos width y height*.

Nota: Con esta opción sus visitantes se podrían sentir incómodos, porque no encontrarán de donde viene la música y en caso de que no les guste, no podrán quitarla. Ojo, que no a todos nos gusta el mismo tipo de música y lo que buscamos es hacerlos sentir bien, para que quieran regresar no?. Bueno, está opción no es la más indicada, pero la decisión será de ustedes. ;)

Segunda Opción: Reproductor Visible - Pequeño

Sería el mismo código anterior, sólo modificaremos las medidas de ancho y alto de la siguiente manera:
<object height="235" width="25"><param name="movie" value="http://www.youtube.com/v/Aq4eqLSFbHw?autoplay=1&amp;hl=es_ES" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/Aq4eqLSFbHw?autoplay=1&amp;hl=es_ES" type="application/x-shockwave-flash" width="235" height="25" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Ya con el código modificado y listo, entramos a la pestaña de Diseño de nuestro Blog, agregamos un gadget.

Anadir-gadget

Copiamos el código en un Nuevo elemento HTML, click en Guardar.

colocar-codigo-musica

Vamos al Blog a ver cómo nos quedó. Y listo!. Nuestro Reproductor se vería así:

reproductor-youtube-visible

Espero haberme explicado bien y les sea de utilidad para todos aquellos que buscan una opción para tener Música de Fondo en su Blog.

Nota: *Si alguna de estas opciones no te funcionó, visita este otro post sobre cómo poner un
Reproductor de música.


lunes, 27 de octubre de 2014

CABECERA



PONER EL TITULO DE CABECERA EN EL CENTRO

.header .widget {
 text-align:center;}
.header img {margin:0 auto;}



http://ciudadblogger.com/2010/08/dividir-la-cabecera-del-blog.html
Dividir la cabecera del blog sirve para poder poner al lado del título del blog algún gadget como un anuncio, algún banner, un buscador, etc.
El proceso que veremos es para las plantillas basadas en la plantilla Mínima y para las que son del Diseñador de plantillas de Blogger.
Para las plantillas hechas con el Diseñador de plantillas de Blogger:

Primero entra en Diseño | Edición de HTML y SIN expandir los artilugios busca esta parte:
/* Header
----------------------------------------------- */
Debajo de ella pega lo siguiente:

.header {width:48%; float: left; margin:0 auto 1%;}
.header2 {width:47%; float: right; margin:0 auto 1%;}

Ahora busca el siguiente código y agrega lo que está en color rojo:

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

Guarda los cambios y listo. Ahora puedes ir a Diseño | Elementos de la página y ya podrás ver la cabecera dividida en dos partes.
Cabecera doble


Para las plantillas antiguas:

De igual modo entra en Diseño | Edición de HTML y SIN expandir los artilugios busca este código:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Elimínalo y en su lugar agrega este:

#header {
width: 48%;
float: left;
margin:0 auto 1%;
text-align: center;
color: #000;
}

#header2 {
width: 48%;
float: right;
margin:0 auto 1%;
text-align: center;
color: #000;
}

Ahora busca este otro código y agrega lo que está en color rojo:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

Y listo, tendrás un área para agregar un gadget junto a la cabecera.








Cuando subimos una imagen a la cabecera de nuestro blog se puede presentar uno de estos casos:
  1. Que la imagen sea más ancha que la cabecera: En esta caso la imagen se saldrá de la cabecera, y por tanto se debe descartar.
  2. Que la imagen tenga el mismo ancho de la cabecera: En este caso la imagen encajará perfectamente, y es una imagen que se puede aceptar ya que no afectará la simetría del blog. Es la opción ideal.
  3. Que la imagen sea menos ancha que la cabecera del blog: En esta caso la imagen nos aparecerá, por defecto, en el lado izquierdo. Si queremos que, para un mejor diseño, la imagen aparezca en el centro de la cabecera, debemos efectuar las siguientes modificaciones en nuestra plantilla (tomando como ejemplo un blog diseñado con el Nuevo Diseñador de Plantillas, y la plantilla Picture Window):
Vamos a Editar HTML:
Diseño
Editar HTML
Click dentro del editor
Ctrl+f
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEaMkX_54cV96o3DFeJfZ91JvMH80Sxdh-EtqJ_oe9ial7IiFnWgSX16AypXE5oqrRnhNCLO7KoS4miZHOcBxWP3z2EpbSMPVS6dCs8SP0snwdRdfSqPkvSCj0NNw9R9Znhg4buo0dVrTO/s1600/Buscador_HTML_3.png
Ponemos dentro del rectángulo de búsqueda (search) esto:
/* Header
para localizar el encabezado de la sección CSS de la cabecera, que es éste:
/* Header
----------------------------------------------- */
...e inmediatamente debajo pegamos este código:
.header .widget {
margin-top: 4px;
margin-bottom: 4px;
width: 663px;
padding: 0 95px;
}
  • margin-top: 4px; corresponde a la distancia de la imagen al borde superior de la cabecera.
  • margin-bottom: 4px; corresponde a la distancia de la imagen al borde inferior de la cabecera.
  • width: 663px; corresponde a una imagen con 663 pixeles de ancho.
  • padding: 0 95px; corresponde a la distancia entre la imagen y los bordes laterales de la cabecera.
En el ejemplo de este tutorial, la imagen está centrada así: al ancho de la imagen corresponde un padding de 0 95px, con esta plantilla.
Dependiendo del ancho de la imagen (width) podemos centrarla aumentando o disminuyendo la distancia en pixeles (0 95px) entre la imagen y los bordes laterales (padding) de la cabecera, observando la ubicación de la imagen en la Vista previa, antes de guardar plantilla.
Para seguir conservando la simetría en la apariencia de nuestro blog, centramos, dentro de la imagen, el título del blog, así:
Siguiendo hacia abajo en la sección CSS de la cabecera (header), localizamos este código:
.Header h1 {
  font: $(header.font);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
...y le agregamos esta línea:
  text-align:center;
Debiendo quedarnos así:
.Header h1 {
  text-align:center;
  font: $(header.font);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
Observamos Vista previa y guardamos plantilla.


MENÚ 2 CON CSS3

ESPECTACULARES MENÚS HECHOS CON CSS3 PARA BLOGGER

Introducir en el contenido de un gadget hatml/java, lo siguiente[1]:
<style type="text/css">#cssmenu{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenu ul{background:#333;height:35px;list-style:none;margin:0;padding:0}#cssmenu li{float:left;padding:0}#cssmenu li a{background:#333url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5j5NNEDjDzpb83TdzBT84K9qGIod4Z3S-7Cl8_jrzGjrhV8dbcXNNvwgPZeOrFduRgpFK3JZz6H6ZmzXIh6x4fWL3X6EuM2b4YaLOEdpt2HGaJ5NYE-_SSlx8Z1I419qWhU8QuQw5Gdpp/s1600/seperator.gif') bottom right no-repeat;display:block;font-weight:normal;line-height:35px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#cssmenu > ul > li > a{color:#ccc}#cssmenu ul ul a{color:#ccc}#cssmenu li > a:hover,#cssmenu ul li:hover > a{background:#2580a2url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0D3u6fCz_Ss7NSDVUqsD6bjh6_j5xoAa-d942yx9W3wVfKgOz-SHFzQZyYM6QAz7Xmy3cD-3sRCqbdmMZbv-EY-0REHYQMQs3WDNG1VhQzssRvFh7w2jpg62LMwpHwJUEYjyElqt6KDUk/s1600/hover.png') bottom center no-repeat;color:#FFF;text-decoration:none}#cssmenu li ul{background:#333;display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu li:hover ul{display:block}#cssmenu li li{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXenyjHZNv8u7X4CE-x4zPfENRkE1_g_LqrJlSOsTyw2a5QrDdXiY6EY8Zskmd3PG9AG2NS3Km0R3Epb2vAPoTF-JAvWQ4P56k9dkX0lc97XrsNic94jg62wBCYQJKxQqX2x66TfTZpEuF/s1600/sub_sep.gif') bottom left no-repeat;display:block;float:none;margin:0;padding:0;width:225px}#cssmenu li:hover li a{background:none}#cssmenu li ul a{display:block;height:35px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover,#cssmenu li ul li:hover > a{background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6VF09gy54uRhJnKHBrpB1T17L1yZDuVQy2pkRjZhLSiW4-bhW_mTVR5SPhtlrBWHiu7Z0pPCQgfFy9aPyF5RtJsTwgdVsT0DQCAyW92DpuTFWT3EbQZIfPHbUNePfvu91jhrNkOTf0db_/s1600/hover_sub.png') center left no-repeat;border:0;color:#fff;text-decoration:none}#cssmenu p{clear:left}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->



<!-- customize your menus Links -->

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

index.html à ahí hay que poner el url de la página a la que se quiere ir



Y allí buscar por ejemplo "Home", y etc., y reemplazarla por la palabra que quieras, y las partes que tengan # debes reemplazarlo por tu URL.
Inicio    final
<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Menu1</span></a></li>
<li class="has-sub"><a href="#"><span>Menu2</span></a>
<ul>
<li><a href="#"><span>Submenu21</span></a></li>
<li><a href="#"><span>Submenu22</span></a></li>
<li class="last"><a href="#"><span>Submenu23</span></a></li>
</ul>
</li>

<li class="has-sub"><a href="#"><span>Menu3</span></a>
<ul>
<li><a href="#"><span>Submenu31</span></a></li>    YYY
<li class="last"><a href="#"><span>Submenu32</span></a></li>
</ul>
</li>

<li class="last"><a href="#"><span>Menu4</span></a></li>   XXX
</ul>
</div>
DESCRIPCION MENÚ COMPLETO
Para añadir una pestaña nueva copiar la línea XXX (pero sin las X)
Para añadir submenús copiar la línea YYY (pero sin las Y)




[1] Cambios de color:
-        #333 à (cssmenu ul ) número del color que se puede cambiar (este es el color de la caja que contiene los menús) (ffffff à esto es igual a blanco
-        Left àsituation ¿?
-        333 à (cssmenu li a ) color caja de los menús principales
-        #ccc à color del texto del menú (cssmenu > ul > li > a)
-        #ccc à color del texto submenus (cssmenu ul ul a)
-        #2580a2 à cambia color cuando pasa el ratón por encima del menú (cssmenu ul li:hover > a)
-        bottom center no-repeat;color:#FFF; al pasar el ratón por las pestañas del menú, cambia el color del texto
-        text-decoration:none}#cssmenu li ul{background:#333: color de la caja de los submenus
-        #cssmenu li ul a:hover,#cssmenu li ul li:hover > a{background:#2580a2: cambia color cuando pasas ratón por encima desubmenús
Tamaños:
-        width:225px;z-index:200: ancho de las pestañas de los submenus



CAMBIA LAS PESTAÑAS POR UN MENÚ PERSONALIZADO
Lo bueno de ésta opción es que podemos diseñar los botones que funcionarán como menú, y así tenerlo todo unificado.

Aquí os enseño tres ejemplos de menús que he hecho con fuentes, recortes de fondos e imágenes: