Menú Desplegable para Enlaces

Una vez que tenemos muchos enlaces o bien queremos varios grupos distintos de enlaces podemos encontrarnos con que nos ocupan demasiado espacio en el lugar donde los pongamos. Una manera sencilla pero eficaz es crear un menú desplegable para los mismos. Para los que no sabemos mucho del tema, siempre nos quedará el recurso externo así que en esta página tenéis una sencilla aplicación con la que crear un menú muy cumplidor. De todos modos, en breve dejaré por aquí otra manera de hacer lo mismo, pero mucho más vistosa, aunque también requiere más trabajo.

Un ejemplo:


Pincha un enlaceManda CaralloZona de Pruebas

Un nuevo wiki

Beatiful Beta Wiki abre finalmente sus puertas. De momento pocas novedades hay, pero es una página de obligatoria visita para los que os guste estar a la última de trucos para Blogger. Como siempre, si veo algo interesante... bueno, interesante es todo, pero algo realmente que me guste mucho, pondré aquí las explicaciones como siempre, de manera facilita para los que nos sabemos tanto. Mientras tanto podéis ir echandole un vistazo a esta nueva página dedicada al destripamiento de Blogger.

Feevy

Un servicio externo con el que poner listas de enlaces, vínculos y últimas actualizaciones de tus blogs favoritos. No hay más que registrarse en su página principal, cosa que no lleva ni 2 minutos y proporcionarles las URL de los blogs que queremos seguir. Se nos proporciona una línea de código que podremos colocar en la zona del blog que más nos guste.

He quitado el ejemplo porque ralentizaba mucho la carga de la página... tal vez tengan problemillas estos días...

Feeds y categorías

Un estupedo Widget con el que mostrar las categorías de nuestro blog y al mismo tiempo ofrecer sindicación para cada una de ellas por separado. La instalación puede hacerse de diferentes maneras, pero aquí os dejo la manera más "compacta" y sencilla que no requiere scripts ni modificaciones complejas en el modo de edición HTLM de nuestra plantilla. Simplemente hay que introducir este código justo después de un widget (tras el <:b/widget>)

<b:widget id='Label50' locked='false' title='Feeds' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://img304.imageshack.us/img304/3518/rect18st2.png'/></a>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

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

La línea en rojo se corresponde con la dirección de la imagen que aparecerá justo delante del nombre de cada categoría. Evidentemente se puede cambiar por la que creais que se ajusta mejor a vuestro diseño.

Hay que tener en cuenta que es casi seguro que en tu plantilla ya exista un widget cuya id=´label´así que en mi caso lo he llamado label50, pero se puede cambiar la numeración para evitar que coincida con alguno de vuestra plantilla. Después de haberlo instalado no tendremos más que ir al diseño de nuestro blog y colocarlo en donde más nos guste. Para verlo funcionando no hay más que echar un vistazo en la columna lateral derecha de este mismo blog.

Gracias a PurpleMoggy´s Blog

Hacer un Mapa de Imagen

Lo que vamos a intentar hacer es crear una imagen en la que dependiendo en que zona pinchemos con el ratón nos lleve a diferentes sitios. Vamos, que lo que vamos a hacer es una imágen con varias zonas con diferentes vínculos. Una vez que tenemos una imagen y la hemos subido a alguna página tenemos que definir las áreas en las que la vamos a dividir. Los parámetros que definen un mapa de imagen son los siguientes:

<MAP>....</MAP> Entre estos tags meteremos todo el código del Mapa de Imagen y deberemos definir el area que vamos a definir como activable. Se pueden usar diferentes áreas, pero aquí vamos a ir a lo sencillo, que es el rectángulo. Para ello debemos poner <AREA shape=rect coords="x,y,x2,y2" donde X,Y son las coordenadas de la esquina superior izquierda y X2,Y2 las coordenadas de la esquina inferior derecha del rectángulo que definimos.

Tal vez se vea mejor con un ejemplo:




El código usado para este ejemplo ha sido este:

<img src="http://img119.imageshack.us/img119/4982/sinttulo1gw5.jpg" usemap="#ejemplo" height="50" width="300" border=0/>
<map name="ejemplo">
<area shape="rect" coords="0,0,94,50" href="http://www.google.es">
<area shape="rect" coords="96,0,200,50" href="http://www.yahoo.es">
<area shape="rect" coords="202,0,298,49" href="http://www.altavista.com"></map>

Si quereis saber más sobre Mapa de Imágenes o ver como hacer diferentes áreas (círculos, polígonos) pasaros por esta página: Webestilo

Botones para las categorías ??

¿Será esto tal obviedad que por eso no lo había visto comentar nunca?. ¿es que no se pueden usar directamente las URL de las categorías para mostrarlas?. Vamos a probar... la URL de una categoría en el nuevo Blogger viene siendo de esta guisa:

http://TUBLOG.blogspot.com/search/label/CATEGORIA

Ahora, para el ejemplo cogeremos una imagen cualquiera para probar


La dirección en este caso es /index.htlm



Ahora es /categorias

Si pulsas en el botón verás que te lleva a la categoría correspondiente.

Lo único que tenemos que hacer es crear un hipervínculo para cada imagen con la dirección de la categoría que queramos. Luego la podemos poner en la parte del Blog que más nos guste... que es tedioso... pues si, pero simple a más no poder.

En este caso he usado Blogger para subir las imágenes, de ahí el borde, que se podría quitar, pero para el ejemplo bien valen. Desde luego se pueden hospedar en cualquier sitio.

Lo que es evidente, es que este método es lento, aburrido y demasiado de andar por casa, pero si creas una imagen (Mapa de Imagen, que veremos como se hacen) en la que haya diferentes vínculos según la zona donde pinches con el ratón, puedes hacer una imagen para la cabecera con un logo o icono para cada categoría que tengas. Eso si, esto sería mejor hacerlo una vez que tu blog tenga ya las categorías bien definidas ya que para añadir cada una de ellas necesitas una imagen o un botón nuevo para poder linkearla a la dirección de la categoría.

Para acabar, dejo aquí unas cuantas páginas con Generadores de Botones para facilitar el proceso:
- Webtaller
- Starchat1
- Buttonator

Protege una imagen

Este código sirve para que quede deshabilitado el botón derecho del ratón sobre una imagen en concreto que pongamos en el blog. Puede resultar útil si el blog que estamos creando sirve para dar a concer diseños, fotos o cualquier imagen que no queramos distribuir sin permiso, aunque también es cierto que siempre queda el recurso de "Imprimir página" y pegarla luego al photshop... pero al menos esto sirve para incordiar... ;)

Si tenemos una imagen hospedada en blogger o cualquier otra página, por ejemplo:

http://www.technewsdaily.net/uploaded_images/google-girl-780952.jpg

tenemos que añadirle el siguiente código:

<p align="center"><img oncontextmenu="alert('Mía... sólo mía.... ');return false" oncopy="alert('Mía... sólo mía.....');return false" src="http://www.technewsdaily.net/uploaded_images/google-girl-780952.jpg" /></p><p style="text-align: left;"></p>


Prueba si no...

Que conste que yo comprendería el no querer compartirla.... :P

Este truco se lo he birlado a Gem@Blog

Por cierto... hay que ver lo bien que funciona Google para según que cosas, porque indexar una página mira que le lleva tiempo, pero ha sido poner esta fóto y ya sale en mi NavBar: "Notificar a Blogger contenido de dudosa reputación"... anda que si llego a poner una foto sin camiseta... no se yo que iban a hacer :D

Mapa de Visitas

Existen numerosas utilidades que hacen lo mismo, algunas de ellas más completas con geolocalización, identificación de IP, visitantes en línea... etc. Seguramente veremos más de estas utilidades, pero la que vengo a comentar ahora es ClusterMaps, porque para mi gusto es de las más elegantes, poco chillonas y ocupa poco espacio en tu blog.

Lo único que hay que hacer es registrarse en la página principal y esperar por un password que te enviarán al mail que les hayas proporcionado. Una vez que se tiene acceso, te proporcionarán un código para que lo insertes en la zona del blog que más te guste. A partir de ese momento, todas tus visitas se mostrarán en el mapa mediante círculos que representan desde donde y qué cantidad de usuarios se conectan. Además, pulsando sobre el mapa os llevará a su página donde veréis el mapa con más detalle y un contador de visitas. Te sorprenderás de la cantidad de gente de países distintos llegan a tú página.. aunque hay que reconocerlo, muchas de las vistias de EE.UU. pertenecen a Blogger cada vez que actualizas algo en tu plantilla... :P

Zona de Pruebas :: Rounders Template

Disponible para descarga una nueva plantilla para uso y disfrute general

--------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
3 Column update by: Hoctro
Re Updated by: Zona de Pruebas
----------------------------- */











Características principales:

- Tres Columnas laterales (dos estilos)
- Categorías tipo "etiquetas" en la cabecera
- Categorías Multi Estilo
- Snap integrado
- Emoticonos
- Posts expandibles - Código de autoinstalación de Widgets
- Posibilidad de introducir código en la cabecera, las columnas laterales, el pie de la página y las zonas superior e inferior de los posts
- Dropcaps: Primera letra del post de mayor tamaño
- Bloques de citas: Personalizable desde el panel de Blogger
- Iconos de navegación
- Barra de navegación de Blogger oculta
- Comentarios con color: Personalizables desde el panel de Blogger

Vista previa

[DESCARGA]

Añadir META

El META son una serie de etiquetas que deberemos tener en el blog para que los buscadores puedan encontrar e indexar nuestra página con facilidad. Tarde o temprano cualquier página es indexada por los buscadores más potentes, pero añdiendo los META informaremos a los robots de los cambios para así indexar nuestra página más rápidamente posible, además, será más probable el que nuestra página aparezca en el buscador si introducimos en los META las palabras claves que describan mejor a nuestro blog.

El código debe ser insertado entre <Head> y </Head> y es de este estilo:

<meta content='Descripcion de nuestro Blog' name='description'/>
<meta content='Palabras Clave' name='keywords'/>
<meta content='index, follow' name='robots'/>

En el primer campo en rojo introduciremos una breve descripción de nuestro blog, de que trata... etc. En el segundo campo introduciremos las palabras clave (Keywords) que caracterizan nuestros contenidos para que los buscadores relacionen esas palabras con nuestra página. Estas palabras deben ir separadas por comas. Copiamos el código entre las etiquetas Head y listo.

Mostrar categorías como "Etiquetas"

Recientemente he cambiado la plantilla de la página y he añadido un par de cosillas nuevas que aún no había pasado a comentar. La más llamativa, que ahora recuerdo haber puesto, son las categorías que veis bajo el título del blog, que como veis, son funcionales.

No es un truco especialmente complejo, pero si es fácil hacerse un lío y además necesita que se haya retocado la plantilla con un par de trucos previos. Lo primero es adecuar nuestra plantilla para que se puedan añadir widgests en la cabecera (ver enlace para saber como).

El siguiente paso es definir el estilo de las pestañas que vamos a añadir al blog. Podemos copiar sólo la parte de la pestaña que queramos, pero yo recomiendo copiar todo el código por si en algún momento queremos cambiar el diseño:

/*- Menu Tabs A --------------------------- */


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



/*- Menu Tabs B--------------------------- */

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



/*- Menu Tabs C--------------------------- */

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



/*- Menu Tabs D--------------------------- */

#tabsD {
float:left;
width:100%;
background:#FCF3F8;
font-size:93%;
line-height:normal;
border-bottom:1px solid #F4B7D6;
}
#tabsD ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftD.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightD.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#C7377D;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsD a span {float:none;}
/* End IE5-Mac hack */
#tabsD a:hover span {
color:#C7377D;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs F--------------------------- */

#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}



/*- Menu Tabs G--------------------------- */

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


/*- 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("http://www.anniyalogam.com/labeltabs/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("http://www.anniyalogam.com/labeltabs/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;
}


/*- Menu Tabs I--------------------------- */

#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}


/*- Menu Tabs J--------------------------- */

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}


/*- Menu Tabs K--------------------------- */

#tabsK {
float:left;
width:100%;
background:#E7E5E2;
font-size:93%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
}
#tabsK a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}

Una vez tengamos el código, lo pegamos en nuestra plantilla justo encima de la etiqueta de cierre /b:skin que a su vez está encima del cierre de /HEAD (que este seguro que está más localizado a estas alturas ;) )

El último paso es el añadir el wisget en si a nuestra plantilla así que pegamos el código siguiente justo tras el cierre de cualquier widget (hay que trabajar con la plantilla con widgets expandidos)

<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Y ya está listo, sólo hay que cambiar la letra en rojo por aquella que queramos para cambiar el estilo... siempre y cuando hayamos copiado todos los estilos a nuestra plantilla.

Problemas que puedan surgir:

Obviando los evidentes de errores al copiar o pegar el código en zonas erróneas de la plantilla, un problema habitual es que estemos intentando duplicar el widget label (porque ya existe en la plantilla un widget de etiquetas). Esto se puede solucionar renombrando el widget. (widget id=´"label2"... "label3"...etc).

Otra opción es, si no se van a tener varios sistemas de categorías a la vez, es eliminar las ya existentes antes de empezar.

Original de Hoctro