Enlace a Seguidores

Hace unos días que he colocado un enlace en el footer del Escaparate desde donde, quien así lo quiera, puede hacerse seguidor del blog:

Aunque no es nada nuevo, ya que puede encontrarse como hacerlo en varios "blogs de ayuda Blogger", voy a explicarlo en esta entrada ya que varias personas me han preguntado sobre esto.

Se trata de añadir un enlace que de la posibilidad a nuestras visitas de hacerse seguidor de nuestro blog, sin necesidad de mostrar el gadget de Seguidores.
Podemos hacerlo con un simple enlace de texto, una imagen o, como en mi caso, usando ambos.

El código iría colocado en un Gadget HTML en la sidebar, footer, etc.

Con enlace de texto:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"> Seguir el Escaparate</a>

Con enlace en una imagen:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"/></a>

Con enlace en texto e imagen:

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXX" target="_blank"><img src="AQUI LA URL DE LA IMAGEN"/> Seguir el Escaparate</a>

Notas:

Lo que vemos resaltado en rojo, es en cada caso lo que hemos de modificar por nuestros datos.

En el caso de blogID, tenemos que colocar sustituyendo a las XXXXXXXXX, la ID de nuestro blog, es decir, el número que se muestra en la url del navegador cuando estamos dentro de nuestro panel de Blogger en la pestaña Diseño:

Añadir otros enlaces en el gadget de páginas estáticas

Ya hemos visto que desde hace algún tiempo podemos añadir páginas estáticas fácilmente a nuestro blog.
El problema es que una vez añadidas, los enlaces en forma de menú se muestran en el blog, pero solo los enlaces que hemos creado a las páginas estáticas.

Varias personas me han preguntado como añadir en ese mismo menú enlaces a otras páginas que no sean estáticas, por ejemplo una página de etiquetas, a una entrada concreta o incluso a una página externa.

Vamos a ver como hacerlo, pero antes de empezar hemos de tener añadidas las páginas estáticas.

[1] Una vez en nuestro escritorio de Blogger, vamos a Diseño - Edición HTML.

[2] Marcamos la casilla de "Expandir las plantillas de artilugios".

[3] Como ya tenemos añadidas las páginas estáticas, localizamos en la plantilla el gadget que las muestra y que será algo como esto:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<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'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[4] Una vez localizado, añadiremos los enlaces que necesitamos justo después de </b:loop> tal como vemos en este ejemplo:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<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'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>

JUSTO AQUI AÑADIMOS LOS ENLACES

</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[5] Los nuevos enlaces los colocamos de esta manera, uno debajo de otro:

<li><a href="DIRECCION_DEL_ENLACE">TEXTO_DEL_ENLACE</a></li>

[6] Usamos "Vista previa" y tendremos que ver algo como esto, los nuevos enlaces a continuación de las páginas estáticas en el orden en que los hayamos ido colocando:

[7] Si todo está correcto, guardamos los cambios.


Nota:

Si lo necesitas, puedes ver como añadir los enlaces en un menú a distintas páginas, entradas, archivos, etc.

Enlace en el nombre de autor ( blogs compartidos)

En una entrada anterior habíamos visto como añadir un enlace en el nombre del autor de las entradas.

Esta mañana me pregunta Pedrox en un comentario de esa misma entrada:

"Lo maximo serian 2 autores para ponerle un enlace a cada uno? O se pueden más?..."


En esta entrada veremos como añadir un enlace en el nombre de cada autor cuando en el blog publican varios autores.
Esto nos permitirá añadir un enlace al perfil de cada uno, a su cuenta de Twitter, su perfil en Facebook, etc.

Otra posibilidad muy interesante, sería enlazar el nombre de cada autor con las entradas que ha escrito, para eso se me ocurre que cada autor podría añadir una etiqueta concreta a sus entradas y enlazar su nombre con esa etiqueta...

[1] En nuestro panel nos situamos en "Edición HTML" y marcamos la casilla de "Expandir las plantillas de artilugios".

[2] Localizamos esta etiqueta:

<data:post.author/>

[3] La sustituimos por este código:

<b:if cond='data:post.author == &quot;NOMBRE_DEL_AUTOR&quot;'>
<a href='ENLACE_DEL_NOMBRE' alt='NOMBRE_DEL_SITIO_ENLAZADO' title='NOMBRE_DEL_SITIO_ENLAZADO' target='_blank'><data:post.author/></a>
</b:if>

[4] Hacemos en ese código los cambios tal como están señalados en letras mayúsculas, teniendo especial cuidado al sustituir el NOMBRE_DEL_AUTOR pues este debe estar escrito tal como lo usamos en Blogger (de forma idéntica).

[5] Tendríamos ahora que colocar el mismo código de nuevo para el siguiente autor, lo hacemos justo debajo de ese que acabamos de colocar y añadimos los cambios para el nuevo autor.

Esto la hacemos tantas veces como autores publican en nuestro blog.

Recuperar los enlaces de navegación (III)

En estos últimos días he estado recibiendo consultas sobre la desaparición de los enlaces de navegación.

En un principio mis respuestas a este problema eran las soluciones que ya había recogido anteriormente en estas entradas:

Recuperar los enlaces de navegación

Recuperar los enlaces de navegación (II)

Después y gracias a las personas que me consultaban sobre esto, me di cuenta que el problema era bastante general y que los enlaces habían dejado de mostrarse sin motivo aparente, aún teniendo el código que hace que se muestren colocado en su lugar.

He comprobado que, al menos en los casos que me han estado llegando ayer y hoy, el problema se soluciona añadiendo un clear:both; en el lugar que corresponde a los enlaces en el CSS.

Localizamos este código en la plantilla y añadimos el clear:both; tal como veis en el ejemplo:

#blog-pager {
text-align: center;
font-weight:bold;
text-transform:uppercase;
clear:both;
}

Nota:

El código que está en el ejemplo es el que yo tengo en mi caso, en el Escaparate, en cada caso las líneas que se encuentran debajo de #blog-pager { serán distintas, pero la forma de hacerlo continuará siendo la misma a pesar de las diferencias en el código.

Recuperar los enlaces de navegación (II)

En una entrada anterior tuvimos ocasión de ver como recuperar los enlaces de navegación ocultos previamente mediante CSS.

En algunos casos por defecto de la plantilla o porque quien la diseñó así lo hizo, no están ocultos de esta forma que vimos anteriormente, sino que han sido eliminados directamente borrando el código HTML que hace se muestren en la plantilla.

En este segundo caso, lo que deberíamos hacer es tratar de volver a incluir ese código, así que veremos como hacerlo en esta entrada.

[1] En nuestro panel, vamos a "Edición HTML" de la plantilla y marcamos la casilla de "Expandir las plantillas de artilugios".

[2] Localizamos esta línea de código:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>

[3] Debajo de esa línea hemos de pegar este código (si has comprobado antes que no está en la plantilla o si está incompleto):

<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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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>

[4] Ahora hemos de ir bajando por el código de la plantilla desde donde hemos pegado eso y localizar este código (podría ser ligeramente distinto) para añadir la parte que veis resaltada en rojo:

<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'/>

[5] Usaremos la vista previa antes de guardar los cambios.

Menú de pestañas

Hace tiempo publiqué como instalar un menú de pestañas en Blogger usando las etiquetas.
En ese menú, cada vez que se etiqueta una entrada, una nueva pestaña aparece de forma automática en el menú, esto hace que el aspecto del menú deje bastante que desear cuando en el blog usamos demasiadas etiquetas.

Basándonos en la misma idea y usando casi el mismo código, vamos a instalar un menú con el mismo aspecto que el de pestañas con etiquetas, pero en el que incluiremos los enlaces que creamos oportuno.

Antes de empezar, podéis ver un ejemplo funcionando en este blogs de pruebas instalado sobre las entradas.

[1] Una vez en nuestro panel de Blogger vamos a Edición HTML y colocamos el CSS necesario para el menú.

El lugar adecuado para colocar cualquier código CSS es siempre entre las etiquetas <b:skin><![CDATA[/* y ]]>%lt;/b:skin> de nuestra plantilla.

En este caso estaría bien ponerlo después de la sección del header, más o menos antes de /* Outer-Wrapper-------- */ por ejemplo:

/* Menu pestañas*/

#tabsmenu {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabsmenu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsmenu li {
display:inline;
margin:0;
padding:0;
}
#tabsmenu a {
float:left;
background:url("IMAGEN IZQUIERDA (LEFT)") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsmenu a span {
float:left;
display:block;
background:url("IMAGEN DERECHA (RIGHT)") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsmenu a span {float:none;}
/* End IE5-Mac hack */
#tabsmenu a:hover {
background-position:0% -42px;
}
#tabsmenu a:hover span {
background-position:100% -42px;
}

[2] Como veis en el código, se necesitan dos imágenes para que formen las pestañas, una que irá en "IMAGEN IZQUIERDA (LEFT)" y otra en "IMAGEN DERECHA (RIGHT".

Podéis descargar las imagenes en varios colores en este archivo en formato .zip y una vez escogidas las que vais a usar, las subís a un alojamiento de imágenes o al mismo Blogger para obtener su url.
No os será dificil reconocer cual es cada imagen ya que se llaman tableft y tabright respectivamente y terminan con una letra que identifica cada pareja: tableftB, tabrightB

Guardamos los cambios.

[3] Vamos ahora a la parte de Diseño de nuestro panel, pinchamos en añadir un nuevo gadget HTML y pegamos dentro este código:

<div id="tabsmenu">
<ul>
<li><a href="#"><span>INICIO</span>
</a></li>
<li><a href="mailto:direccion email"><span>CONTACTO</span></a></li>
<li><a href="http://www.blogger.com/"><span>BLOGGER</span></a></li>
<li><a href="http://www.google.es"><span>GOOGLE</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/"><span>EL ESCAPARATE</span></a></li>
</ul>
</div>

Es aquí donde editaremos los enlaces del menú y la información que se mostrará en las pestañas.
Después arrastramos el gadget a debajo del header o a la parte del croscoll  por ejemplo.
Si necesitamos un espacio extra en esa zona podemos consultar como añadir elementos adicionales en Diseño o ver también como aprovechar la zona del croscoll.

Enlace en el nombre del autor de la entrada

Hace tiempo que he sustituido mi nombre en la firma de las entradas por una imagen y hace unas semanas que a esa imagen le he incluido un enlace a la entrada que llamo "Sobre mi".

 

Cambiemos o no la firma por una imagen podemos incluirle un enlace que lleve por ejemplo a nuestro perfil de Blogger, de Twitter, de Facebook, etc.

[1] Desde Edición HTML de nuestro panel y con la casilla de expandir las plantillas de artilugios marcada, localizamos estas líneas de código:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

[2] Incluimos la etiqueta <data:post.author/> dentro del enlace:

<a href='http://twitter.com/RosaTorre' target="_blank"><data:post.author/></a>

En el ejemplo he enlazado mi nombre (autor del post) con mi cuenta en Twitter.

[3] Si ya hemos cambiado antes la firma o nombre del autor por una imagen, la etiqueta <data:post.author/> no estará en ese código, ya que en su lugar tendremos añadida la url de la imagen, aunque la forma de incluir el enlace a la firma sería prácticamente la misma:

<a href='http://twitter.com/RosaTorre' target="_blank"><img src="Url_de_la_imagen_de_la_firma"/></a>

Mini menú

Me pregunta Surplus21 como colocar un "mini-menú" como el que tengo en el footer del Escaparate, donde he colocado algunos iconos enlazados con diferentes servicios o páginas: Mi perfil en Blogger, en Twitter, Technorati, etc...

No es más que un div al que he añadido algunos estilos y en el que he colocado los distintos iconos con enlace uno detrás de otro.

El código se coloca en un gadget HTML en la sidebar o donde queráis mostrar el mini menú:

<div style="text-align: center; background:#fff; border:2px solid #82B7C4; width: 100%;">

<span class="pushbutton"><a href="http://www.blogger.com/profile/06743611108067453905" target="_blank" title="Sobre mi"><img src="
http://4.bp.blogspot.com/_8PJ-pgoBhWQ/ScYgNwl4KeI/AAAAAAAAGYg/FL3sBqDjVlE/s320/personal.png"/></a></span>

<span class="pushbutton"><a href="mailto:lejaniaimposible@hotmail.com" title="Email"><img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/ScYgVjvmKwI/AAAAAAAAGYw/68TckepVJX8/s320/email_edit.png"/></a></span>

<span class="pushbutton"><a href="http://feeds.feedburner.com/blogspot/hnBy" target="_blank" title="Suscribe"><img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SP9USfdc9aI/AAAAAAAAEgk/LKHLLAOgJ68/s320-R/16-rss-square.png"/></a></span>

<span class="pushbutton"><a href="http://twitter.com/RosaTorre" target="_blank" title="Sigueme en Twitter"><img src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/ScYjtuhV8CI/AAAAAAAAGZA/OGZ2EDm70Uo/s320/twitter.png"/></a></span>

</div>

La primera línea del código es donde se aplican los estilos del div o contenedor:

text-align: center; La alineación del contenido (los iconos) que en este caso es al centro.
background:#fff; El color de fondo.
border:2px solid #82B7C4; El grosor, aspecto y color del borde.
width: 100%; Ocupará todo el ancho de donde esté colocado, a no ser que cambiemos 100 por un valor menor.

La parte de código que corresponde a cada icono, es la que empieza por <span class="pushbutton"> y acaba por </span> esto es una clase que he añadido a cada icono para conseguir el efecto de "botón pulsar".

He dejado mis datos en el código de cada icono para que os sirvan de guía al colocar los vuestros.

Una vez añadido el código en el gadget y hechos los cambios necesarios, colocamos además estas líneas de CSS en nuestra plantilla antes de ]]></b:skin>, esto marcará la separación entre los iconos (2px) y le dará el efecto de pulsado:

.pushbutton{padding: 2px;}
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}

También podemos usar el CSS en el mismo gadget si os resulta más cómodo, solo tenéis que pegar el código sobre el que habéis puesto para el mini menú de esta manera:

<style type="text/css">
.pushbutton{padding: 2px;}
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}
</style>

Destacar los enlaces visitados en los posts

Hace tiempo que usaba este sistema de pequeños iconos en el Escaparate para señalar los enlaces de las entradas que ya habían sido visitados, hoy he vuelto a incluirlo.

Los enlaces solo en el cuerpo de las entradas (post-body) se verán resaltados como muestra la imagen:

Como veis, para el enlace normal (a la vista) no añadiremos ningún código, con lo que mostrará el mismo aspecto que los demás enlaces del blog.
Una vez que alguien haya visitado ese enlace y vuelva después a esa entrada, el enlace se mostrará con un pequeño icono de color gris que avisa de que ya hemos pinchado antes en ese enlace.
Si aún así, pasamos el ratón sobre ese enlace, el icono gris cambiará a uno de color rojo para "reforzar" el aviso.
Por supuesto podéis usar otros iconos distintos a estos, cambiando la url en el código por la de vuestras imágenes.

Y este es el código para los enlaces, que colocaremos en el CSS (antes de ]]></b:skin>) de nuestra plantilla:

/* Posts links
----------------*/
.post-body a:visited {
color:#006699;
padding-right: 13px;
background: url(http://i33.photobucket.com/albums/d100/manas_tripathy/visitedLink.gif) no-repeat 100% 50%;
}
.post-body a:visited:hover {
background: url(http://i33.photobucket.com/albums/d100/manas_tripathy/visitedHoverLink.gif) no-repeat 100% 50%;
padding-right: 13px;
color:#4192e5;
}

color:#006699; Color del enlace visitado.
color:#4192e5; Color del enlace al paso del ratón.
padding-right: 13px; Distancia para dejar espacio al icono (el ancho del icono en pixeles).

Recuperar los enlaces de navegación

Los "enlaces de navegación" pueden verse al final de las páginas de nuestro blog y sirven, como su nombre indica, para "navegar" por las páginas anteriores o posteriores del blog.

Recibo a menudo consultas sobre como recuperarlos en plantillas que han sido diseñadas para no mostrar esos enlaces.
Aunque yo los considero imprescindibles para un blog, a menudo vemos en plantillas que se ofrecen para descarga, que quien ha diseñado o adaptado alguna de esas plantillas ha decidido ocultar esos enlaces.
En general, lo que suelen hacer en estos diseños es simplemente ocultar los enlaces mediante CSS, con lo que en nuestra plantilla tendremos algo así:

#blog-pager-older-link {
float: right;
display: none;
}
#blog-pager-newer-link {
float: left;
display: none;
}
#blog-pager {
text-align: center;
display: none;
}

Si estas líneas se encuentran en nuestra plantilla, lo único que tendríamos que hacer para recuperar nuestros enlaces de navegación sería borrar de cada una de ellas el display: none;:

#blog-pager-older-link {
float: right;
}

#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}

Menú desplegable con color

Aunque hace tiempo que publiqué como hacer un menú desplegable para incluir enlaces, se me ha ocurrido gracias a un comentario de Friol que podría hacer esta entrada para explicar un poco como personalizar este tipo de menús.

[1] Menú desplegable sencillo.

Colocamos este código en un gadget HTMLJavascript:

<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="combobox" name="SiteMap" size="1">
<option selected/>TITULO
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA

<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
</select>

Y este sería el resultado:


TITULO

TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA


[2] Menú desplegable con opción "Ir".

Colocamos este código en un gadget HTMLJavascript:

<script language="JavaScript">
function Ir_amigos(form) {var myindex=form.dest.selectedIndex
window.open(form.dest.options[myindex].value, target="_parent", "toolbar=yes,scrollbars=yes,location=yes"); }
</script>
<form name="mis_enlaces">
<select name="dest" class="combobox" SIZE=1>
<option class="amarillo" selected value="">BLOGS AMIGOS
<option class="rojo" value="URL DE LA PAGINA">LINK1
<option class="azul" value="URL DE LA PAGINA">LINK2
<option class="verde" value="URL DE LA PAGINA">LINK3
</select><input type="button" value="Ir" onClick="Ir_amigos(this.form)">
</form>

Y este sería el resultado:

BLOGS AMIGOS
LINK1
LINK2
LINK3

[3] Menú desplegable con enlaces que abren en "página nueva".

Colocamos este código en un gadget HTMLJavascript:

<script language="JavaScript">
<!--
function sitios_enlaces(form) {
var myindex=form.destino.selectedIndex
window.open(form.destino.options[myindex].value,"main",""); }
//-->
</script>
<form name="miForma">
<select name="destino" size=1>
<option selected value=""> MIS FAVORITOS
<option value="URL DE LA PAGINA">LINK1
<option value="URL DE LA PAGINA">LINK2
<option value="URL DE LA PAGINA">LINK3
<option value="URL DE LA PAGINA">LINK4
<option value="URL DE LA PAGINA">LINK5
</select><input type="button" class="boton" value="Ir" onClick="sitios_enlaces(this.form)">
</form>

Y este sería el resultado:

MIS FAVORITOS
LINK1
LINK2
LINK3
LINK4
LINK5

Como veis los tres menús son sencillos de instalar y con distintas opciones según sean nuestras necesidades.
Supongo que os habréis fijado en que he destacado en negrita alguna parte de su código, en concreto son unas "clases" añadidas en cada menú para darles color mediante CSS.

En el primer menú, la clase añadida (class="combobox") controlará tanto la "cajita" como los enlaces una vez desplegados.
Si añadimos algo como esto en el CSS de nuestra plantilla (antes de ]]></b:skin>) "ordenamos" al menú que tenga un color de fondo y que su texto sea de color blanco:

.combobox {
background-color: #009900;
color: #ffffff;
}

El resultado sería este:


TITULO
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA
TITULO DE LA PAGINA


En el segundo menú, he mantenido la clase class="combobox" pero además he añadido una clase distinta a cada enlace, así que si añadimos algo como esto en el CSS de la plantilla, cada enlace del menú se mostrará de distinto color:

.azul {
background-color: #0000FF;
color: #ffffff;
}
.rojo {
background-color: #FF0000;
color: #ffffff;
}
.verde {
background-color: #009900;
color: #ffffff;
}
.amarillo{
background-color: #FFFF00;
color: #000000;
}

El resultado sería este:

BLOGS AMIGOS
LINK1
LINK2
LINK3

En el tercer menú, lo que he hecho ha sido añadir una clase al botón imput (class="boton"), así que colocando estas líneas en el CSS, tendríamos un botón con el texto en negrita y de color amarillo, de fondo rojo y con un borde de color gris:

.boton {
color:yellow;
background-color:red;
font-weight: bold;
border: 2px solid #ddd;
}

Resultado:

MIS FAVORITOS
LINK1
LINK2
LINK3
LINK4
LINK5

Iconos en los enlaces del gadget listas "LinkList"

Gamal me pregunta en un comentario como agregar iconos o imágenes a cada elemento de un LinkList.

Solamente será necesario añadir unas líneas de código en el CSS, como siempre os digo ha de añadirse antes de ]]></b:skin>:

.LinkList a {
padding-left: 13px;
background: url (Url_del_icono) no-repeat scroll left 50%;
}

En "padding-left" tendréis que poner un valor igual al ancho que tiene el icono.

También podemos hacer que al colocar el puntero del ratón sobre el enlace, la imagen que se muestre sea diferente.
Colocáis entonces debajo de ese código, este otro:

.LinkList a:hover {
padding-left: 13px;
background: url (Url_del_icono) no-repeat scroll left 50%;
}

Si además (como podeís ver en los enlaces del Escaparate), queréis que en los enlaces que ya han sido visitados se vea un icono diferente, añadimos debajo otro código más:

.LinkList a:visited {
padding-left: 13px;
background: url (Url_del_icono) no-repeat scroll left 50%;
}

Menu minislide

Un sencillo menú con CSS y Javascript que podéis ver con el nombre de "menú uno (minislide)" en mi blog de pruebas.

[1] Necesitaremos descargar el archivo javascript a nuestro PC y subirlo depués a un alojamiento de archivos de donde, una vez subido, obtendremos su url.
Lo colocamos entonces antes del </head> de nuestra plantilla de esta manera:

<script src='URL_DEL_ARCHIVO_JAVASCRIPT' type='text/javascript'/>

[2] Incluiremos ahora el código CSS necesario antes del ]]></b:skin> de nuestra plantilla:

/*MENU UNO (Minislide)
Stephen Clark
www.sgclark.com/sandbox/minislide
----------------------------------------------------------------------- */

#nav {padding:10px 0px 0px 0; margin: 0 0 20px 0; float:left; width:100%; border-bottom:1px solid #888888;}


#minislide {
        float: left;
        margin: 0;
        padding: 0px 10px 0px 10px;
        position:relative;
        z-index:2;
        }

#minislide li {
        float: left;
        margin: 0;
        padding: 0;
        display: inline;
        list-style: none;
        position:relative;
        text-transform:uppercase;
        }

#minislide a:link, #minislide a:visited {
        float: left;
        line-height: 19px;
        font-weight: bold;
        margin: 0 10px 0px 10px;
        text-decoration: none;
        color: #888888;
        }

#minislide a.active:link, #minislide a.active:visited {
        border-bottom: 5px solid #888888;
        padding-bottom: 1px;
        color: #888888;
        }
      
#minislide a:hover {
        border-bottom: 5px solid #888888;
        padding-bottom: 1px;
        color: #CC0000;
        }
  
#animated-tab {
        position: absolute;
        z-index: 1;
        /*font-size: 85%;*/
        line-height: 19px;
        padding-bottom: 1px;
        border-bottom: 5px solid #888888;
        width:100%;
        }
      
br
        {
        clear:both;
        }

[3] Ya solo nos queda colocar el código necesario para armar los enlaces del menú, lo pondremos dentro de un gadget HTMLJavascript debajo de la cabecera o en el crosscol por ejemplo:

<div id="nav">
<ul id="minislide">
<li><a href="#">Inicio</a></li>
<li><a href="#" title="Mi perfil en Blogger">Perfil</a></li>
<li><a href="#" title="Suscribe Feed">Feed</a></li>
<li><a href="mailto:#" title="Envia un email">Contacto</a></li>
<li><a href="search/label/?max-results=999" title="Ver todas las entradas">Ver todas las entradas</a></li>
</li></ul></div>

Abrir enlaces externos en pagina nueva de forma optativa

Los visitantes de nuestro blog tendrán la posibilidad de escoger la forma de abrir los enlaces externos de nuestro blog, para ello usaremos un script y mediante una casilla en nuestra sidebar daremos la posibilidad de elección.

[1] Tendremos que copiar el script en el blog de notas por ejemplo y modificar los datos que he puesto en negrita por los vuestros .

<!--
/*
Link Target Preferences v.1.1
http://www.noscope.com/journal/2004/10/link-target-preferences
*/

// BEGIN Configuration
// estas URLs seran consideradas internas y se ignoraran
var url_1 = "http://MIBLOG.blogspot.com";
var url_2 = "http://www.google.com";

// Preferencia por defecto:
// El valor "true" abre los enlaces en nueva ventana por defecto, "false" los abre en la misma
var open_blank_default = true;

// Titulo Blog - se usa solo para no crear interfencian con las cookies
// No espacios, ni caracteres especiales

var site_title = "elescaparatederosa";
// FIN configuracion

// Cookie Functions
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
// Checkbox Loader
function loadLinkPrefs () {
if (readCookie(site_title+"_linkprefs_cookie")) {
initVal = readCookie(site_title+"_linkprefs_cookie"); // Load cookied preference
} else {
createCookie(site_title+"_linkprefs_cookie", true, 20000)
initVal = open_blank_default; // If no cookie is set
}
openBlank = initVal;
setCheckbox(eval(initVal))
}
// Set Checkbox State
function setCheckbox(state) {
openBlank = state;
document.getElementById('linkprefs').checked = state;
setTargets();
createCookie(site_title+"_linkprefs_cookie", state, 20000)
}
// Configure Link Targets
function setTargets() {
var link, l = 0;
if (openBlank == true) {
while (link = document.links[l++]) {
// Open in _blank, except all links starting with...
if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1) link.target = '_blank';
}
} else {
while (link = document.links[l++]) {
// Open in _top, except all links starting with...
if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1) link.target = '_top';
}
}
}
// Event Listener, by Scott Andrew
function addEvent(obj, evType, fn) {
if (obj.addEventListener) {
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent) {
var r = obj.attachEvent('on'+evType, fn);
return r;
} else {
return false;
}
}
//-->

[2] Una vez modificado el script lo guardamos como linkprefs.js y lo subimos a un alojamiento colocando la dirección (url) obtenida en dicho alojamiento en este código y lo colocamos antes de </head>:

<script src='URL_DEL_SCRIPT'></script>

[3] Para terminar añadimos estas líneas de código donde mostraremos la casilla optativa para abrir los enlaces:

<div class="linkprefs">
<p style="display: block;"><input id="linkprefs" value="linkprefs" name="linkprefs" onclick="setCheckbox(document.getElementById('linkprefs').checked);" type="checkbox"/>
<label for="linkprefs" title="opciones de navegacion">Abrir enlaces externos en nueva ventana</label></p><span></span>
<script type="text/javascript">addEvent(window, 'load',loadLinkPrefs);</script>
</div>

Visto en: La Blogueria

Lista de blogs (Ajax Gadget)

En una entrada anterior os explicaba como mostrar las últimas entradas de nuestro blog usando Google Ajax, hoy he encontrado una nueva modificación de este widget en Dumies Guide To Google, usado para mostrar una lista de blogs.

Puede personalizarse para mostrar el numero de entradas de cada blog añadido a la lista y en la parte superior va mostrando de forma automática, una vista previa de las entradas de los blogs.

Despues de iniciar sesión en Blogger, nos situamos en nuestro Panel -> Edición para añadir un nuevo Widget de Html y pegamos dentro el código:

<div id="feed-control">
<span style="color: #6998CA; font-size: 11px; margin: 10px; padding: 4px;"><b>Cargando...</b></span></div>
<script src="http://www.google.com/jsapi?key=notsupplied-wizard">
type="text/javascript">
</script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js">
type="text/javascript">
</script>
<style type="text/css">
/* Root */
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 12px;
border: 5px solid #BCCDF0;
}
/* Feed Title */
.gfg-title {
font-size: 15px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-title a {
color : #3366cc;
}
.gfg-subtitle {
font-size: 12px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 5px;
}
.gfg-subtitle a {
color : #3366cc;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}
.gfg-listentry-odd {
background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url('http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SN1icxHvPXI/AAAAAAAAET4/_V1bKeYDeTk/s320-R/0036_bullet02.png');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 12px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position : relative;
}
.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
</style>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'TITULO_BLOG1',
url: 'http://BLOG1.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=4'
},
{title: 'TITULO_BLOG2',
url: 'http://BLOG2.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=4'
},
{title: 'TITULO_BLOG3',
url: 'http://BLOG3.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=4'
},
{title: 'TITULO_BLOG4',
url: 'http://BLOG4.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=4'
}];
var options = {
stacked : true,
horizontal : false,
title : "Blogs amigos"
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>

Personalización:
En el código anterior sustituiremos 'TITULO_BLOG1', 'TITULO_BLOG2', etc... por los respectivos títulos de los blogs y 'BLOG1', 'BLOG2', etc... por el nombre del blog.

Para añadir más blogs a la lista añadiremos en el código tantos bloques de código como este que necesitemos:

{title: 'TITULO_BLOG1',
url: 'http://BLOG1.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=4'
},

Para sustituir el icono de la flechita que va marcando los títulos por uno propio, hemos de colocar su url en lugar de la que véis en el código:
http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SN1icxHvPXI/AAAAAAAAET4/_V1bKeYDeTk/s320-R/0036_bullet02.png

Casi al principio del código podemos ver después de .gfg-root{ una línea que dice width: 100% eso hace que el ancho del widget se adapte al 100% de la anchura del espacio donde ha sido colocado, será fácil entonces controlar su anchura modificando ese valor.

Lo demás como el color y tamaño del texto creo que no será demasiado difícil de conseguir en el css, a base de pruebas e incluso por pura intuición.

Usar el widget para mostrar las últimas entradas de un solo blog.

Haciendo uso del mismo código, podemos también mostrar en nuestro blog las últimas entradas de un solo blog que, en este caso, podría ser uno distinto al nuestro.

El código anterior quedaría entonces así:

<div id="feed-control">
<span style="color: #6998CA; font-size: 11px; margin: 10px; padding: 4px;"><b>Cargando...</b></span></div>
<script src="http://www.google.com/jsapi?key=notsupplied-wizard">
type="text/javascript">
</script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js">
type="text/javascript">
</script>
<style type="text/css">
/* Root */
.gfg-root {
width : 80%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 12px;
border: 5px solid #BCCDF0;
}
/* Feed Title */
.gfg-title {
font-size: 15px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-title a {
color : #3366cc;
}
.gfg-subtitle {
font-size: 12px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 5px;
}
.gfg-subtitle a {
color : #3366cc;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}
.gfg-listentry-odd {
background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url('http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SN1icxHvPXI/AAAAAAAAET4/_V1bKeYDeTk/s320-R/0036_bullet02.png');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 12px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position : relative;
}
.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
</style>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'El Escaparate',
url: 'http://elescaparatederosa.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=4'
},
];
var options = {
stacked : true,
horizontal : false,
title : "El Escaparate"
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>

Solo habría entonces que sustituir mis datos (en negrita en el código) por los del blog a mostrar.

Cambiar el texto de los enlaces de navegación

Son varios los que me han consultado sobre como cambiar los enlaces de navegación que se muestran al pie de nuestras entradas en forma de enlace de texto : "Página principal -> Entradas antiguas -> Entradas más recientes", por otro texto más acorde con sus gustos o necesidades.

[1] Nos situamos en nuestro panel de Blogger, Edición Html y marcamos la casilla para expandir la plantilla de artilugios.
Localizamos esta línea de código para orientarnos:

<b:includable id='nextprev'>

[2] Justo debajo de esa línea estará el código donde hemos de aplicar los cambios:

<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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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>

[3] Hemos de sustituir dentro de este código directamente, por el texto que queramos mostrar en cada caso, las etiquetas:

<data:newerPageTitle/> (Entradas más recientes)

<data:olderPageTitle/> (Entradas antiguas)

<data:homeMsg/> (Página principal)


Puedes consultar también como sustituir esos mismos enlaces por una imagen o icono.

Añadiendo iconos al blog

Aunque ya he publicado anteriormente como añadir un icono en algunos de los enlaces de nuestro blog por separado, he pensado reunir en esta entrada los ya publicados y alguno más.

Icono antes de la fecha de las entradas

Localizaremos en nuestra plantilla (Edición de Html) sin expandir artilugios esta línea de código:

h2.date-header {

Justo debajo de esa línea añadimos esto:

padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;

Icono antes del título de entradas

Localizaremos en nuestra plantilla (Edición de Html) sin expandir artilugios esta línea de código:

.post h3 {

Justo debajo de esa línea añadimos esto:

padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;

Icono antes del autor en el pie de las entradas

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

.post-author {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de la hora de publicación de entradas

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

.post-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de "comentarios" en el pie de las entradas

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

.comment-link {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de "etiquetas" en el pie de las entradas

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

.post-labels {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de la fecha de publicación de comentarios

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

.comment-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes del "Suscribirse a:"

Localizaremos en nuestra plantilla (Edición de Html) sin expandir artilugios esta línea de código:
.feed-links {
Justo debajo de esa línea añadimos esto:

.feed-links {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes del "Vínculos a esta entrada"

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

#backlinks-container h4 {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de las etiquetas en la sidebar

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

#Label1 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

En Blogger se pueden añadir las etiquetas varias veces, por lo que cada vez que queramos que el icono se vea en las nuevas etiquetas, añadiremos su id en el mismo código separada por una coma:

#Label1 li, #Label2 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

Icono antes de las listas en la sidebar

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

#LinkList1 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

En Blogger se pueden añadir más de un elemento lista, por lo que cada vez que queramos que el icono se vea en las nuevas listas, añadiremos su id en el mismo código separada por una coma:

#LinkList1 li, #LinkList2 li, #LinkList3 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

Notas:

En todos los casos hemos de sustituir url_de_nuestro_icono por la url (dirección) del icono que vayamos a colocar en cada caso.

En "padding-left" pondremos la medida en pixeles en función del tamaño del icono, si el icono mide por ejemplo 16px de ancho, con poner 20px quedará bien.

Ver también: Links externos con iconos

Enlaces en forma de nube

Hace unos días he colocado los enlaces "Imprescindibles" de mi menú en forma de Nube. Como podéis comprobar, tienen el mismo aspecto que solemos ver las nubes de etiquetas.
Hacerlo es bastante sencillo solo necesitamos un poco de CSS y algo de "trabajo manual" para colocar nuestros enlaces en un elemento HTML.



[1] Añadimos este código en el CSS de nuestra plantilla, antes de ]]></b:skin>:

/* Nube de enlaces-------*/
#tagcloud{
text-align:center;
padding:5px;
}
#tagcloud .tag1{ font-size:0.9em; color:#da080c;}
#tagcloud .tag2{ font-size:1.2em; color:#7c9fbd;}
#tagcloud .tag3{ font-size:1.4em; color:#a6c4e1;}
#tagcloud .tag4{ font-size:1.3em; color:#0fd580;}
#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }

En text-aling elegiremos la posición del texto de los enlaces dentro del elemento: center=centrados, left=izquierda, right=derecha y en padding colocamos la distancia que queremos desde los lados de nuestra nube al borde del elemento donde la hemos colocado.

He añadido en el código cuatro tipos de tags distintos, por color y tamaño de fuente. En font-size podéis cambiar el tamaño de cada tag (ese es el tamaño que tendrá el enlace) y en color es donde podéis escoger el color del texto de cada enlace.

[2] Guardamos los cambios y en la parte de "Diseño" añadimos un nuevo elemento HTML y pegamos este código dentro:

<div id="tagcloud">
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag2">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag3">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag2">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag2">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag3">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
</div>

Ahí podéis añadir tantos enlaces como querías mostrar en la nube.
Fijaros que la clase (class=) es lo que hace que cada enlace tenga las propiedades que le hemos puesto antes en el CSS.

Ranking en Technorati

Hace algún tiempo había explicado como poner un enlace en las entradas donde se mostraban las reacciones a cada post vía Technorati.
Yo misma lo use durante bastante tiempo, hasta que comprobé que algunas veces producía problemas de carga en el blog y decidí retirarlo.

Ahora he decidido incluir en la sidebar un pequeño widget de PurpleMoggi que muestra mi ranking en Technorati.

Antes de nada, hay que estar registrado en Technorati para poder usar el widget.

[1] Para incluirlo en vuestro blog, solo es necesario copiar y pegar este script en un nuevo elemento HTML, cambiando donde dice NOMBRE_DE_TU_BLOG por el vuestro (solo el nombre, sin http://):

<script src="http://purplemoggy.clawsorpaws.com/technorati/rank.php?u=NOMBRE_DE_TU_BLOG.blogspot.com" type="text/javascript"/></script>

[2] Si queréis darle un aspecto más "tipo Technorati" como el mío, es decir, color del texto en verde y el icono de Technorati delante, tendréis que añadir estas líneas de código CSS antes de ]]></b:skin>:

div.tec_name {
display:none;
}
div.tec_rank {
background: url(http://static.technorati.com/static/css/img/icn/talkbubble.png) 0 2px no-repeat;
padding-left:16px;
}
div.tec_rank a:link, div.tec_rank a:visited {
color: #390;
text-decoration:none;
}
div.tec_rank a:hover {
border-bottom:1px dashed #390;}

Menu con imagenes

Revisando los menús de CssPlay he visto este con imágenes que me ha gustado mucho.
Podéis ver como funciona en esa misma página, es el número 15.

(Pincha en la imagen para verla a mayor tamaño)

He armado el CSS necesario con las imágenes (están subidas en ImageShack) para que solo tengáis que copiar y pegar el código y luego armar el menú con vuestros propios datos.

[1] Colocamos este código en el CSS de nuestra plantilla, siempre antes de ]]></b:skin>:

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_15 */
.preload15
{background: url(http://img169.imageshack.us/img169/6923/pro151ns5.gif);
}
.pro15 {
padding:0 0 0 20px;
margin:0;
list-style:none;
height:30px;
background:#1841c8 url(http://img147.imageshack.us/img147/1695/pro150ky7.gif);
}
.pro15 li {
float:left;
}
.pro15 li a {
display:block;
float:left;
height:30px;
line-height:30px; background:url(http://img147.imageshack.us/img147/1695/pro150ky7.gif); color:#ddd;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 0 0 10px;
cursor:pointer;
font-size:11px;
}
.pro15 li a b {
float:left;
display:block; background:url(http://img147.imageshack.us/img147/1695/pro150ky7.gif) right top;
padding:0 16px 0 8px;
color:#ddd;
}
.pro15 li.current a {
color:#fff;
background:url(http://img248.imageshack.us/img248/4412/pro152xg1.gif);
}
.pro15 li.current a b {
background:url(http://img248.imageshack.us/img248/4412/pro152xg1.gif) no-repeat right top;
color:#fff;
}
.pro15 li a:hover {
color:#fff;
background: url(http://img169.imageshack.us/img169/6923/pro151ns5.gif);
}
.pro15 li a:hover b {background:url(http://img169.imageshack.us/img169/6923/pro151ns5.gif) no-repeat right top; color:#fff;
}
.pro15 li.current a:hover {
color:#fff;
background: url(http://img248.imageshack.us/img248/4412/pro152xg1.gif);
cursor:default;
}
.pro15 li.current a:hover b {
background:url(http://img248.imageshack.us/img248/4412/pro152xg1.gif) no-repeat right top;
color:#fff;
}
.pro15 li a em {
display:block;
float:left;
width:16px; height:30px;
}
.pro15 li a em.home {
background:url(http://img147.imageshack.us/img147/3286/home2yr5.gif) no-repeat center center;
}
.pro15 li a em.calendar {
background:url(http://img248.imageshack.us/img248/2245/eventstw4.gif) no-repeat center center;
}
.pro15 li a em.camera {
background:url(http://img147.imageshack.us/img147/2013/camerajc9.gif) no-repeat center center;
}
.pro15 li a em.find {
background:url(http://img147.imageshack.us/img147/3066/findou5.gif) no-repeat center center;
}
.pro15 li a em.contact {
background:url(http://img248.imageshack.us/img248/7778/contactqj3.gif) no-repeat center center;
}
.pro15 li a em.search {
background:url(http://img248.imageshack.us/img248/5774/searchnp0.gif) no-repeat center center;
}

[2] Una vez guardados los cambios, en la parte de "Diseño" de nuestra plantilla, añadimos un nuevo elemento HTML y colocamos dentro el código para armar el menú, luego podemos arrastrarlo a debajo de la cabecera:

<ul class="pro15">
<li><a href="#"><em class="home"></em><b>Inicio</b></a></li>
<li class="current"><a href="#nogo"><em class="calendar"></em><b>Archivo</b></a></li>
<li><a href="#"><em class="camera"></em><b>Imagenes</b></a></li>
<li><a href="#"><em class="find"></em><b>Paginas amigas</b></a></li>
<li><a href="#"><em class="contact"></em><b>Contacto</b></a></li>
<li><a href="#"><em class="search"></em><b>Buscador</b></a></li>
</ul>

En <a href="> colocamos la url de nuestros enlaces, sustituyendo al #.
Podemos cambiar las imágenes de las pestañas por unas propias, siempre que sean de 16x16 pixeles, no será difícil identificar cada imagen, ya que si nos fijamos en su url, vemos que por su nombre (aunque en inglés) es fácil saber cual es cual.
Lo que no deberíamos cambiar es la clase, es decir, donde vemos em class="home", por ejemplo, ya que si lo hacemos el menú no funcionará.

AVISO:

Algunas imágenes han sido borradas de ImageShack y el menú se verá imcompleto, podéis descargar aqui el pack con las imágenes y subirlas a vuestro propio alojamiento para evitar este tipo de problemas.