Oloblogger

Tell a friend. Gadget marcadores sociales

2009-07-15T13:49:00.000+02:00

Hace tiempo ofrecimos un sistema para colocar en nuestra plantilla, los botoncitos que posibilitan que los lectores enlacen directamente nuestras entradas, con los sistemas de promoción de noticias más conocidos. Desde entonces ha llovido mucho y actualmente hay diversos servicios online que nos permiten hacer lo mismo de una manera más fácil.

Este es el caso de Te!! a Friend (cuéntaselo a un amigo), que mediante unos pocos pasos nos facilita el código para instalar un icono que despliega un gran menú con muchos enlaces a los portales más conocidos. Realmente creo que no son muchos, sino prácticamente todos.

Es indispensable registro, porque el gadget es personalizado, aunque supongo que eso no resulta un gran problema. Una vez hecha la primera instalación, podemos modificar el aspecto del icono de enlace en cualquier momento, así como la configuración del gadget (ventana modal, menú desplegable) y los tipos de enlaces que queremos mostrar.

* MODO BPT ON - TUTORIAL
Tras acceder a la web de Tell a Friend, buscamos una pestaña naranja con el mensaje "Sign up - for me" y pinchamos en ella. Luego nos piden nuestra cuenta de correo, nuestra contraseña (dos veces) y cuando esté el formulario completo, con "Create Account", confirmamos el registro.

Tras un mensajito informativo, recibiremos un correo electrónico con un enlace. Pinchamos en él o copiamos y pegamos esa URL en nuestro navegador. Aparece una nueva pantalla para aceptar las condiciones de uso y la segunda casilla es para suscribirse a noticias del servicio. Seleccionamos/deseleccionamos respectivamente, aceptamos y ya nos sale la pantalla para hacer login (introducir usuario/password).

Una vez logueados nos sale un texto indicando que tenemos que realizar cuatro pasos. Pinchamos en el botón azul inferior (Add Widget) y una ventana modal aparece encima de la anterior, para que seleccionemos el tipo de nuestro espacio. Para un blog, es la segunda opción. Al seleccionarla aparecen varias opciones de plataformas. Seleccionar la vuestra pinchando en el recuadro correspondiente.

Continuamos en una nueva pantalla, tecleando nuestra URL y el nombre que queremos ponerle al gadget.

Ahora otra serie de opciones para marcar/desmarcar los servicios que queremos enlazar. Si queremos quitar algunos, ya navegamos por el menú de la izquierda de la ventan y vamos seleccionando/deseleccionando servicios. Si los queremos todos, directament pinchamos en Create Gadget y nos sale una última pantalla con el código HTML necesario. Copiar y pegar dónde se especifica aquí.

* MODO BPT OFF - TUTORIAL

Sobre el 20blogs... pon aquí tu comentario. Gracias

2009-07-13T20:07:00.008+02:00

El caso es que hoy ha comenzado la votación del concurso 20blogs 2009 y una vez más, el personal me ha sorprendido. En esta ocasión con un arranque del concurso fabuloso para Oloblogger. Como en el poco tiempo que esto lleva en marcha, ya habeis dejado algún que otro comentario al respecto -cosa que agradezco enormemente- por aquí y por acullá, y no quiero que las entradas se sigan "contaminando" de off-topics, aquí en este mismo post os podeis desahogar con vuestras opiniones.

Posiblemente no lo vais a creer, pero ni siquiera recordaba las fechas de votación y ha sido por un correo de esos automáticos de la organización, que he pinchado a ver que tal. "A ver que tal" ha resultado que este espacio está entre los primeros puestos de la clasificación general (3º), de la categoría ciencia/tecnología (1º y eso que no es una categoría muy adecuada) y en diseño (5º) categoría a la cual nos presentamos todos al ser gratis ;)

Claro está que esto es sólo efecto del tirón inicial de tantos amigos que tiene esta web, de la falta de muuuuuchos votantes por ejercer su derecho a sufragio y de la matemática del empate ¡pero hace mucha ilusión, coño! Y visto lo visto, me he decidido a colocar un aviso en lugar bien visible a ver si la cosa continúa así.

Aunque ahora tengo un pequeño dilema... y es que realmente no sé todavía si quiero ganar o no. Se vive muy bien siendo un internauta anónimo y no sé si me compensará la fama y la fortuna. Bueno la fortuna sí, a la fama que le den, que no da más que trabajo en blogs como este xD

Como el año pasado me quedé sin una puñetera captura de pantalla y no tengo mejor sitio dónde dejarla, pues aquí van para mi propia memoria, porque seguro que en el rato que llevo escribiendo este post, las cosas han cambiado... a peor.

De todas formas, gracias por este ratico a los que habeis votado.

Transparencia

2009-07-10T00:01:00.006+02:00

Lo de hacer un elemento semitransparente es relativamente fácil: sólo se trata de añadirle un atributo que indica tal cosa. Los problemas empiezan cuando encontramos que la transparencia es tratada por cada navegador de una manera distinta. Y ya no me refiero a diferencias entre Firefox, Internet Explorer, Opera, Chrome, Safari... si no que hay diferencias de interpretación incluso entre versiones.

En realidad, deberíamos hablar más bien de opacidad, porque así es como lo tratan la mayoría de navegadores. Podemos definir una opacidad del 100% para figuras totalmente opacas u otro valor inferior para distintos grados de imágenes traslúcidas. Olvidaros del 0% porque para ponerlo transparente del todo creo que mejor no lo ponemos ;)

Los distintos códigos que conozco en versión CSS son:

Internet Explorer --> filter:alpha(opacity=100);
Internet Explorer 8 -->
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
Firefox, Netscape, Mozilla --> -moz-opacity:0.1;
Opera, Safari, Chrome --> opacity: 0.1;
Khtml --> -khtml-opacity: 0.1;

IE fija la opacidad desde 0 (totalmente transparente) hasta 100 (totalmente opaco). El resto respectivamente entre 0 y 1. Para IE 6 no conozco ningún atributo que funcione.

Así las cosas y para evitar problemas, lo mejor que no lo más práctico, será añadir a nuestra etiqueta STYLE, todos los códigos conocidos:

Todavía no he aprendido el orden exacto en que hay que redactar códigos para distintos navegadores, pero en este caso, el código de IE8 debe ir obligatoriamente delante del de los otros IE, así que ojito con cambiarlos de orden. Si alguien conoce otros atributos que sean comunes a más navegadores u otra forma de ordenarlos para optimizar el resultado, sería eternamente agasajado.

Cuando vayamos a utilizar con cierta frecuencia el efecto de transparencia, lo más cómodo será crear una clase... o varias:

.transparencia80 {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
-khtml-opacity: 0.8;
}

.transparencia60 {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
-khtml-opacity: 0.6;
}

Luego sólo habría que aplicar la clase deseada al elemento que queramos: DIV, IMG, LI,... Por ejemplo:

<div class='transparencia50'>
Texto
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Por último otra manera algo más farragosa cuando hay que usarla para muchos elementos, pero que no falla con ningún navegador: con eventos Javascript. Así de paso le metemos un fácil rollover.

Blogger. Suprimir la fecha de los posts a discreción.

2009-07-06T18:38:00.005+02:00

Para cierto tipo de blogs que quieren mostrar un contenido fijo, a modo de post permanente, puede ser útil eliminar la fecha del mismo para conseguir el efecto de "página especial" que por ejemplo Wordpress sí permite. Este tipo de post puede ser un índice, un diccionario de términos relacionados con el blog, un tutorial,... en definitiva, cualquier cosa que el autor quiera destacar en su menú o barra lateral mediante un enlace.

El código que controla la "impresión" de la fecha de cada post está en el LOOP principal:

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>
...

Como veis, hay una condición, una clase de estilo para la fecha (normalmente DATE-HEADER), la etiqueta DATA que controla la fecha de cada post y luego los cierres de cada una de las anteriores etiquetas. La condición lo que hace es comprobar si existe o no la fecha del post. Que no exista no es muy normal, pero se suele hacer esta comprobación para evitar errores de interpretación de código.

Pues bien, para no mostrar la fecha en NINGUN POST (ojo, en ninguno) simplemente hay que borrar todo el contenido entre B:IF y /B:IF, ambos inclusive. Esto en un principio no es demasiado práctico para un blog, pero en fin, ahí queda para el que le interese.

Lo que queremos en esta ocasión es ocultar la fecha pero para un solo post y para ello, aprovecharemos la condición ya existente, pero transformándola para que nos la compare con un post en concreto. Recordamos cómo usar condiciones en Blogger:

<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.url != "URL_PAG_SIN_FECHA"'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>
...

Si la URL es distinta a la indicada la fecha se mostrará. Evidentemente, si la URL es la indicada, la fecha NO se mostrará.

Si en lugar de tener un sólo post de este tipo tenemos varios, entonces necesitaremos anidar tantos IF como posts con sus correspondientes URL's:

<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.url != "URL_PAG_SIN_FECHA"'>
<b:if cond='data:blog.url != "URL_PAG2_SIN_FECHA"'>
<b:if cond='data:blog.url != "URL_PAG3_SIN_FECHA"'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>
</b:if>
</b:if>
...

Un ejemplo del truco funcionando en este post de ejemplo.

Dedicado a Priamo que ya le venía haciendo falta este truquillo.

Bloggger. Usar condiciones

2009-06-30T18:00:00.002+02:00

Una condición se forma con una serie de instrucciones y nos permite hacer algo sólo si se cumple determinado supuesto. Básicamente sería algo así:

SI autor = oloman, imprime dibujo1
SI NO ES ASI, imprime dibujo2
CERRAR SI

Esto, claro está, hay que hacerlo en un lenguaje que nuestro ordenador entienda y en el caso concreto de Blogger, en idioma Blogger. En el caso del anterior ejemplo, el código sería de este estilo:

<b:if cond='data:comment.author == "Oloman"'> <img src='dibujo1.jpg'/>
<b:else/> <img src='dijujo2.jpg'/>
</b:if>

Las condiciones pueden ser de igualdad (==) o de desigualdad (!=) y a cada lado deben llevar algo comparable. Puede ser etiquetas DATA que contengan cualquiera de los datos de nuestro blog almacenados por Blogger o caracteres de cualquier tipo. En este último caso deberán ir entre comillas dobles, tal y como podeis ver en el código mostrado arriba como ejemplo. Como las comillas dobles no le sientan bien a nuestra parte HTML, hay que sustituirlas por " para que funcione bien el código.

La utilización de </b:else> (SI NO...) es opcional, pero todo <b:if cond... debe llevar siempre su cierre (</b:if>)

El uso de condicionales es especialmente útil para que ciertos elementos se muestren en un tipo de páginas o no. Para ello, es necesario conocer cómo las bautiza Blogger:

data:blog.pageType es una variable Blogger que guarda el tipo de página en el que estamos. Puede ser igual a:

"item", que indica la página individual de cualquier entrada (permalink)
"archive", que representa las páginas de navegación por etiquetas o siguiente-anterior
"index", la página de inicio

Sabiendo esto, si por ejemplo queremos que el gadget HTML5 de nuestra plantilla, sólo aparezca en las páginas individuales de cada entrada y no en el resto, insertaremos una condición que englobe todo el código que muestra los datos resultantes del gadget (es necesario tener plantilla de artilugios expandidos):

<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

Las líneas en verde son las que hemos insertado para conseguir que ese artilugio se vea sólo si la página en la que estamos es de una entrada individual. En todos los demás casos (Inicio, página de etiquetas, post resumidos...) no se verá el artilugio HTML5.

No se ha previsto hacer nada en el caso de que la igualdad no se cumpla. Si quisiéramos hacer algo distinto y que saliera otra cosa en las páginas que no cumplieran la condición (estaríamos en páginas que no son entradas individuales), tendríamos que usar la etiqueta </b:else> con la estructura del primer ejemplo (dibujo1-dibujo2)

Hay otras etiquetas DATA interesantes para condicionar cosas que queremos que se ejecuten en unos sitios sí y en otros no:

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

(*) Esta última relación es un extracto literal de un post de Vagabundia, dónde podeis encontrar todas las etiquetas DATA que maneja Blogger.

De esta manera, si por ejemplo queremos que cierto elemento se muestre sólo en una entrada concreta y en ningún sitio más, tendríamos que cambiar la línea que fija la condición a cumplir, de la siguiente manera:

<b:if cond='data:blog.url == "http://oloblogger.blogspot.com/2009/06/videos-aleatorios-bpt.html"'>

¿Que más podemos hacer? Pues volviendo al ejemplo del principio del todo, podemos por ejemplo conseguir, que cuando un comentario está escrito por cierto autor, el estilo del texto sea personalizado. El código ya lo facilitamos anteriormente, pero sin explicar demasiado cómo funcionaba. Realmente lo que hicimos entonces, fue comparar las etiquetas data:comment.author (autor del comentario) y data:post.author (autor del post). Si eran la misma persona se usaba un estilo y si no, pues se usaba otro distinto.

También podemos discriminar ciertos post por el nombre de alguna de sus etiquetas (data:label.name), podemos hacer cosas distintas para post con fechas distintas (data:post.dateHeader), generar algún cambio si el siguiente post en la navegación por antiguos/recientes detectamos cierto título o URL (data:newerPageTitle, data:newerPageUrl), entr otras cosas.

No sé para qué puede servir esto último, pero seguro que alguien le encuentra utilidad. Todas las etiquetas DATA son susceptibles de comparación y por tanto, con todas ellas se pueden crear condiciones.

Vídeos aleatorios. BPT.

2009-06-26T18:26:00.005+02:00

Después de mostrar cómo hacer un gadget para mostrar frases aleatoria, otro para imágenes aleatorias y otro con imágenes que incluían enlaces, que me pidais la manera de insertar vídeos aleatorios es ya de BPT... con todos mis respetos, como siempre. Así que a pesar de hacer un post completo para este tema, no puedo por menos que etiquetarlo dentro de la categoría indicada.

Quizás el mejor lugar para colocar este gadget, sería como un nuevo idem en la barra lateral, seleccionando el tipo HTML/JAVASCRIPT. El código base es este:

CODIGO_OBJECT_EMBED_VIDEO_X es el código que por ejemplo facilita YouTube para insertar un vídeo. Hay que ponerlo tal cual, con todos sus símbolitos, entre las comillas simples.

Podeis añadir tantas líneas enlace[x] = '... como querais, pero siempre respetando la numeración consecutiva de la matriz.

Como en el ejemplo que podeis ver a continuación, los parámetros WIDTH y HEIGHT del código para embeber objetos, se puede cambiar, pero en este caso hay que respetar la proporcionalidad: a mitad de ancho, corresponde la mitad de altura.

Para comprobar que cada vez sale un vídeo distinto, teneis que refrescar la página.

Navegación Blogger. Entradas antiguas/más recientes.

2009-06-19T01:07:00.003+02:00

En Blogger, existen un par de maneras de ir navegando por los posts publicados. Una es la navegación por etiquetas, que consiste en acceder secuencialmente a las entradas que tienen una misma idem. Este es un gadget que se añade directamente desde Elementos de Página y que normamente no presenta problemas mayores.

La otra es seguir los enlaces que habitualmente están en la parte inferior del blog, justo detrás de las entradas, y que nos indican que podemos ir a "Entradas antiguas", "Entradas más recientes" o a "Inicio".

Algunas plantillas no incluyen estos enlaces, pero no es porque Blogger no incluya el código necesario, sino más bien porque no hay ningún sitio en esas plantillas que "llamen" a la ejecución de ese código. Así que vamos a ver cómo funcionan este tipo de artilugios y cómo conseguir que hagan lo que tienen que hacer.

Los artilugios de plantilla son utilidades que se incluyen dentro del LOOP de Blogger. El LOOP es un bucle en el cual se ejecutan determinadas instrucciones rutinarias, un determinado número de veces.

Los códigos en una plantilla estándar para mostrar los elementos básicos de un blog, están siempre ahí, dentro del WIDGET con ID=BLOG, que es el artilugio principal. Sin embargo, a veces no nos aparecen sus resultados o no hacen lo que deben hacer. Esto es porque desde otra parte del código hay que llamar a la rutina correspondiente para que se ejecute. Esto se hace en Blogger con una etiqueta INCLUDE. Pongamos que quiere decir "incluir" y con eso quizás estará más claro.

En esencia y dicho de otra manera, en Blogger, si existe una tarea que vamos a usar muchas veces, hacemos un trozo de código dentro de una etiqueta INCLUDABLE y luego la llamamos para que se ejecute, todas las veces que nos haga falta, con una etiqueta INCLUDE.

Dicho esto, veamos en concreto el artilugio para conseguir los enlaces Entradas antiguas / Entradas más recientes. Dentro del WIDGET antes indicado (BLOG1), podemos encontrarlo con un ID='NEXTPREV'. Aquí puedes echarle un vistazo al artilugio completo.

Esta rutina está a prueba de bomba. Podeis borrarla completa desde b:includable hasta /b:includable, guardar la plantilla y cuando volvais a editarla, comprobareis que sigue estando ahí. Se conoce que Blogger la considera indispensable y la incluye automáticamente aunque se intente borrar. Se puede modificar pero no eliminar, aunque eso es otra historia.

Entonces, ¿cómo puede ser que en mi plantilla no se vean estos enlaces si siempre está el código del INCLUDABLE? Pues por lo que hemos explicado anteriormente... el código está y lo que simplemente ocurre, es que no hemos solicitado que se ejecute mediante un INCLUDE.

Ahora que sabemos esto la solución para que veamos lo que no conseguimos ver es bien sencilla. Elegimos el lugar dónde queremos "incluir" nuestros artilugio (en este caso NEXTPREV) y ponemos:

<b:include name='nextprev'/>

Listo.

Sólo una cosa más... esta rutina o INCLUDABLE está siempre en el mismo sitio dentro de todo el código de la plantilla, pero el INCLUDE lo podemos poner dónde nos apetezca. Habitualmente se coloca después del cierre (/div) del <div class='blog-posts hfeed'>, con lo que se muestra al final de la página. Pero también lo podemos poner, por ejemplo, tras <div class='post-header-line-1'> y lo veremos después del título del post, tal y como podeis ver actualmente en las paginas individuales de este blog.

Y nada impide colocarlo más de una vez: arriba, debajo de un post, más abajo...

Problemas con fecha en Notepad Chaos y otras

2009-06-16T18:44:00.002+02:00

Como ya han sido más de dos los que me han preguntado por el "undefined" que aparece en algunas versiones de la plantilla Notepad Chaos, me parece que es hora de explicar como solucionar ese problema con las fechas.

Realmente, se trata del SCRIPT que genera dicha fecha y de hecho, afecta a varias plantillas que tienen este mismo código. Por ejemplo, le ocurre también a la plantilla Aspire. Este es el código de marras:

<div class='post-inner'>

<script type='text/javascript'>
var timestamp = "<data:post.timestamp/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>

<div class='date-tab'>

<span class='month'><script type='text/javascript'>document.write(date_mmm);</script></span>

<span class='day'><script type='text/javascript'>document.write(date_dd);</script></span>

</div>

<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>

Hay varias soluciones y esta es sólo una de ellas. En primer lugar, entramos en Configuración-->Formato y cambiamos el formato de fecha al de "13 de Junio de 2009". El SCRIPT que utilizaremos en esta ocasión, corta el texto por los espacios en blanco y por eso utilizamos ese formato. El nuevo SCRIPT, sería este:

<div class='post-inner'>

<div class='date-tab'>

<script type='text/javascript'>
function calendario (cual){
var lafecha = cual.split(' ');
fday = "<span class='day'>"+lafecha[0]+"</span>";
fmonth = "<span class='month'>"+lafecha[2]+"</span>";
fyear = "<div>"+lafecha[4]+"</div>";
document.write(fday);
document.write(fmonth);
}
</script>
<script>calendario('<data:post.dateHeader/>');</script>

</div>

<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>

El código marcado en gris es el que no hay que cambiar y se ha reproducido para situar la colocación del antiguo y del nuevo código.

Si decidís usar otro formato de fecha, hay que cambiar el elemento "divisor" en la línea var lafecha = cual.split(' '); Si por ejemplo utilizamos 13/06/2009, habría que sustituir el espacio en blanco por una barra:
var lafecha = cual.split('/');

Con el primer formato explicado las palabras "de" hacían que los números que indican la posición de los distintos cortes fueran respectivamente 0, 2 y 4. Por tanto, si cambiamos el formato de fecha, todavía habrá que hacer una sustitución más y cambiar los números entre los corchetes:

fday (día) seguiría siendo el elemento [0] (el primero), pero ahora fmonth (mes) pasaría a ser el elemento [1] (el segundo) y fyear, que no utilizamos en este caso, pero que ahí queda por si alguien lo necesita, pasaría a ser el elemento [2] (el tercero).

Actualización: En algunos casos os podeis ahorrar estos cambios, simplemente cambiando el formato de fecha en Configuración-->Formato --> Formato de cabecera de fecha. Probad esto primero en cualquier caso.

Post en forma de sumarios (leer más) en dos pasos

2009-06-13T14:43:00.000+02:00

Acabo de encontrar este SCRIPT en Quite Random y es sencillamente... cómo decirlo: ¡sencillo! Allí citan que el creador es BloggerSphera.

Sólo con dos cambios, podemos conseguir un blog estilo magazine. Incluye unos sumarios de las entradas e incorpora una imagen si el post tiene alguna. Por supuesto, incluye el consabido "leer más" y lo que es mejor, sin necesidad de incluir nada especial al crear tus entradas. Oséase... automático. Además, como no es muy largo se puede insertar directamente en la plantilla para no depender de servicios de almacenaje externos.

Quizás el único fallo es que necesita escalar la imagen para que todas se vean igualitas, en lugar de recortarlas que quizás sería lo óptimo. No obstante, el resultado me ha parecido muy bueno.

Y sin más preámbulo, el montaje del sistema:

Paso 1. Localizar el </head> y justo antes insertar este código que incluye el estilo y el SCRIPT.

Paso 2. Busca la línea <p><data:post.body/></p> y la sustituyes por esto otro.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
<a class='leermas' expr:href='data:post.url'>Leer más »</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

Puedes ver el resultado con Vista Previa y si te gusta, guardarlo.

Con esto ya tienes algo bastante majo, pero puedes personalizarlo un poco con las clases que se nombran en primer lugar y con los últimos parámetros del código del SCRIPT:

.leermas: Aspecto del enlace, como color, tamaño, tipo de letra fondo. También se puede añadir un HOVER.
.post-thumbnail: Tal como está, la imagen flota a la derecha. Se puede cambiar a la izquierda.
.centrar-imagen: Esta clase se usa cuando se escoge (más adelante) que la imagen no flote. En ese caso, la centra.

var thumbnail_float: Valor TRUE para que flote. FALSE para que se centre encima del texto del sumario.
sumario_noimg: Número de caracteres a mostrar para post sin imágenes.
sumario_img: Idem para post con imágenes. Normalmente menor que en el anterior caso para que ocupen más o menos lo mismo.
img_thumb_height: Altura de la imagen miniatura en pixels.
img_thumb_width: Anchura de la imagen miniatura en pixels.

Colocando imágenes alargadas tipo banner al principio de los posts, puede resultar muy interesante poner la variable var thumbnail_float con el valor FALSE y un ancho grande (por ejemplo 400x90px), para que simule cabecera de post.

Lista de comentaristas (Top ten)

2009-06-10T19:02:00.000+02:00

He aquí un par de artilugios, para mostrar en vuestra barra lateral una relación de los usuarios que más comentan en vuestro blog. Ambos están basados en las PIPES de Yahoo.

El primero está publicado en Vagabundia, y extrae los datos de los últimos 5.000 comentarios publicados en vuestro blog:

Basta con copiar y pegar este código en un nuevo elemento HTML en vuestra barra lateral y antes de guardar, insertar el nombre de vuestro blog (NOMBRE_BLOG), sustituir el número (10) de comentaristas a mostrar y colocar vuestro nick en el filtro (Nombre_autor). Esto último sólo si no quereis descubrir que sois los que más comentais en él :)

La segunda opción está sacada de El escaparate que nos chivó la existencia de un instalador automático para el gadget en Blogger Widgets. Aunque actualmente hay un aviso de que no funciona, lo cierto es que la he probado y hace lo que tiene que hacer. Además, tarda menos en cargar que la primera explicada, porque sólo analiza los últimos 500 comentarios y tiene una simpática novedad: el nombre del comentarista es un enlace a su perfil o a su blog. O lo que es lo mismo, una manera de regalar un enlace a vuestros comentaristas más activos. Se instala y se configura igual que el anterior, salvo que querais usar el sistema BPT.

Como siempre, podeis crear una clase para formatear el aspecto de salida de la lista y después incorporarla al DIV contenedor.

Cambiando que es gerundio

2009-06-07T20:25:00.004+02:00

Le tenía mucho cariño a mi plantilla. Más que nada porque llevaba con ella desde mis inicios. Pero resulta que un amigo no para de darme la brasa con que no se llevan los fondos oscuros, que mejor fondos claros, que si el estilo 2.0, que si... En fin, que al final ha conseguido que mirara por ahí y he encontrado otra cosa que me gustaba casi más que la plantilla histórica. Lo cierto es que al final no le he hecho demasiado caso y me ha salido algo más grunge que lo que él pretendía. Además, no es precisamente lo que se lleva.

El diseño está basado en la plantilla Notepad Chaos, que es un diseño original de Evan Eckard para WordPress y que GosuBlogger ha "Bloggerizado" convenientemente.

Siempre me ha gustado esa plantilla, porque tengo debilidad por los blogs con aspecto de cuadernos, libros o similares, pero tampoco era del todo lo que me cuadraba. Así que unos cuantos retoques para hacerla más barroca y ¡voila!.

In memoriam, dejaremos aquí una imagen con la plantilla de siempre y como parece que a mucha otra gente (no a mi colega, claro) sí que le gustaba, a ver si saco un rato para colgar la plantilla completa y que os la podais descargar.

Aunque esta nueva me he hartado de probarla, si observais algún bug, os agradecería que me dejarais un comentario aquí mismo. Gracias.

Entradas antiguas/recientes. Menú flotante.

2009-06-06T19:51:00.002+02:00

La idea es de La Mujer Quijote, a quién se le ocurrió que podía ser interesante unir el truco del boton para ir arriba y la creación de marcadores, para mostrar a manera de menú flotante, los enlaces Blogger de Entradas más recientes - Página principal - Entradas Antiguas.

Aunque es una cosa sencilla de hacer, para que el resultado quede más o menos mono, hay que retocar algunas líneas tanto de CSS como de la parte HTML .

Empezamos por la hoja de estilo (plantillas de artilugios expandidas para lo que vendrá después) y buscamos los contenedores de estos enlaces. Si no se ha modificado se llamarán BLOG-PAGER, BLOG-PAGER-NEWER-LINK y BLOG-PAGER-OLDER-LINK. Cogemos las tres clases, las borramos completas y en su lugar ponemos esto otro.

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: left;
}
#home-link {
float: left;
}
#blog-pager {
text-align: left;
position:fixed;
top:100px;
left:100px;
}
* html #blog-pager{ /*IE only*/
position:absolute;
}

Simplemente hemos alineado el NEWER y el OLDER flotando a la izquierda, hemos creado una nueva clase para el HOME, se ha reconfigurado el BLOG-PAGER para que quede fijo (flotando) a cierta distancia de los márgenes de pantalla y se ha añadido un pequeño hack para que en IE6 (cómo no) haga algo parecido a lo que queremos.

Dando a Vista Previa, ya podremos ver como funciona con el enlace a Entradas Antiguas que tengamos configurado actualmente, así como la posición que va a ocupar.

Esta posición puede configurarse, cambiando TOP por BOTTOM y/o LEFT por RIGHT. Asimismo con el valor en pixels de cada coordenada, que puede cambiar de valor o ser sustituido directamente por una distancia en porcentaje (10%, por ejemplo). Esto ya será al gusto de cada cual.

Para rematar la faena y recordando el post de cómo sustituir los enlaces de entradas anteriores/siguientes por imágenes, en este caso quedarán mejor unas pequeñas imágenes que los textos estándar, así que vamos a ello.

Os recordamos que todavía no hemos grabado nada, aunque tampoco sería un problema si lo habéis hecho. Se busca el artilugio que comienza con...

Ver todo el artilugo [+/-]

...y se sustituye entero (desde <b:includable> hasta </b:includable>, ambos inclusive) por este otro...

<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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img alt='Entradas posteriores' src='http://img37.imageshack.us/img37/2346/izda.jpg' title='Entradas posteriores'/> </a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<span id='home-link'> <a class='home-link' expr:href='data:blog.homepageUrl'><img alt='Inicio' src='http://img505.imageshack.us/img505/2268/inicio.gif' title='Inicio'/></a> </span> <b:else/> <b:if cond='data:newerPageUrl'> <span id='home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img alt='Inicio' src='http://img505.imageshack.us/img505/2268/inicio.gif' title='Inicio'/></a></a> </span> </b:if> </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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img alt='Entradas anteriores' src='http://img41.imageshack.us/img41/3490/dcha.jpg' title='Entradas anteriores'/></a>
</span>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Se ha puesto el código entero para que sólo tengais que borrar, copiar y pegar, pero sólo se han reordenado los distintos enlaces para que se muestren en el orden izquierdo-inicio-derecho, se ha incluido la clase HOME-LINK para el enlace del inicio y se han sustituido los mensajes de cada enlace por imágenes. Esas imágenes las podeis cambiar por otras que hagan juego con vuestro diseño.

25 Blogs de ayuda en castellano... más

2009-06-03T18:00:00.001+02:00

Parecía que no íbamos a encontrar muchos más sitios dónde conseguir guías, consejos y trucos para tunear nuestras bitácoras, pero internet es un pozo sin fondo...

Toca temas Blogger
Toca temas WordPress
Lleva algún tiempo sin ser actualizado
Oficialmente cerrado, pero mantiene el contenido visible.

Mostrar últimos comentarios. Otra opción.

2009-05-31T00:50:00.006+02:00

Ya se han explicado aquí otros sistemas para mostrar un resumen de los comentarios realizados en las entradas de nuestro blog, pero parece que a algunos no os acaban de convencer, como tampoco estos otros.

Aquí usamos un sistema distinto que pensaba ya había explicado, pero revisando los posts compruebo que no era así. Se trata de un SCRIPT que hace tanto tiempo que uso, que no recuerdo de quién era, pero está basado en JSON y lo he retocado un pelín para conseguir ciertas mejoras en la presentación. Puede que a otros les parezcan inconvenientes en lugar de mejoras, pero en fin...

Como es un código no muy largo, creo que lo más práctico es añadirlo directamente desde Elementos de Página --> Añadir Gadget --> HTML, en la barra lateral.

Para configurar el aspecto de salida hay que fijarse en la última parte. En primer lugar colocais en la etiqueta STYLE del DIV, los atributos que necesiteis. También se puede crear una clase nueva en el CSS y luego incorporarla a ese mismo DIV. Sólo teneis que tener en cuenta que el SCRIPT lo que genera es una lista (UL / LI), por lo que tendreis que definir también esa etiqueta para la nueva clase.

¡Y no olvides sustituir NOMBRE_BLOG al final del SCRIPT por el tuyo!

También podeis cambiar al gusto, todos estos parámetros:

numcom = número de comentarios a mostrar.
fecha = muestra la fecha del comentario (true) o la oculta (false).
titulo = muestra el título del post (true) o lo ocuta (false).
sumario = número de caracteres de cada comentario a mostrar.
colhr = color en hexadecimal de la barra de separación. Poner el color del fondo si no quereis barra.

Marcadores. Moverse rápidamente por una página.

2009-05-27T18:42:00.001+02:00

Al igual que podemos marcar el lugar por dónde vamos en la lectura de un libro, también podemos marcar partes de nuestra página para acceder rápidamente a ellas.

Quizás lo que más se utilice sea la opción del botón "Ir arriba", para que el usuario de una página web pueda acceder al principio de esta con sólo un click. Sin embargo, en alguna ocasión puede resultar conveniente utilizar más marcadores, señalando distintos puntos de la página para que el visitante puede acceder a esos apartados de una manera más ágil.

Seguro que es especialmente útil en páginas largas con muchos apartados. Por ejemplo, cuando al principio colocamos una especie de índice y queremos que se pueda acceder a los distintos capítulos desde allí mismo.

Declarar un marcador es bastante sencillo. Para ello, utilizamos la etiqueta A en asociación con NAME, de esta manera.

<a name="nombre_marcador">Texto del marcador</a>

Aunque parezca un enlace, lo que realmente estamos haciendo es indicar mediante HTML que justo delante de "Texto del marcador" queremos una marca a la que se pueda acceder cuando lo solicitemos. Podemos utilizar como marca un solo caracter de nuestro texto, una palabra, una frase o incluso una imagen. En esta entrada las marcas las hemos resaltado para que sean "visibles" con letras capitales. Hay un marcador abajo que ni siquiera tiene ningún contenido. El enlace-llamada, que será lo que veremos a continuación, nos llevará al principio de lo que marquemos.

La llamada a cada marcador se hace mediante un enlace normal HREF, pero en lugar de una dirección HTTP, utilizamos #nombre_marcador.

<a href="#nombre_marcador">Enlace al marcador</a>
...
<a href="#nombre_marcador2">Enlace al marcador2</a>
<a href="#nombre_marcador3">Enlace al marcador3</a>

Fácil ¿no?

En las siguientes imágenes y para ver el resultado, tienes enlaces que te llevan a las tres marcas que hemos colocado en este post.

No hay ningún problema en colocar distintas llamadas al mismo marcador en distintos puntos. Sin embargo el marcador en sí (su nombre), tiene que ser único para cada destino. No se puede utilizar el mismo nombre en distintos destinos... evidentemente. Una prueba de ello...

ARRIBA

CENTRO

ABAJO

También se pueden crear llamadas a marcadores en distinta página o incluso web. La página de destino tendrá que tener un marcador creado de la misma manera que se ha explicado aquí y deberás conocer su nombre. La diferencia sólo estará en el enlace HREF, que incluirá delante del nombre del marcador, la direccion completa de la página (o dirección relativa si estás dentro de la misma web).

Ver <a href="http://singenio.com/instrucciones.htm#reglas">reglas</a>

Que daría lugar a: Ver reglas

Este último ejemplo nos llevaría a un apartado (marcador) de una página web distinta a esta y no al principio de la misma que sería lo normal.

Premios 20Blogs 2009

2009-05-25T21:31:00.002+02:00

Hoy se presenta la nueva edición de unos de los certámenes blogueriles (no confundir con borreguiles) más conocidos del panorama blog: los Premios 20Blogs.

Tan reciente es la convocatoria, que algunos de los apartados fundamentales como las bases y los premios, todavía están sin publicar, pero prometen tenerlos para el 8 de Junio. A partir de esa fecha es precisamente cuando realmente empieza el concurso y hay un mes enterito (hasta el 8 de Julio) para inscribir tu blog.

Todos los blogs participantes, deberán figurar previamente en la Blogoteca, el directorio de blogs que 20minutos creó tras los premios del año pasado. Así es que si quieres ganar tiempo, ya puedes irte registrando allí y luego sólo te restará hacer la inscripcion en el certamen.

Hasta el 12 de Julio, la organización validará todos los blogs dados de alta... ¡uno por uno!... que no les pase na. Supongo que intentan evitar susceptibilidades y presuntos tongos sobre los que mucha gente se quejó el año pasado (un par de ejemplos aquí y aquí) y el anterior... y el otro...

En una tercera fase, entre el 13 de Julio y el 17 de Septiembre, todos los blogueros inscritos (y sólo ellos) podrán conceder hasta 20 votos (uno por categoría) a los blogs que su buen criterio dictamine.

El año pasado comprobamos cómo resultaba muy importante inscribirse entre los primeros. Los más rápidos disparando votos, lo hacían precisamente a esos primeros blogs y como periódicamente se publicaban listas provisionales y estos ya estaban ahí, pues cosechaban más visitas y por tanto, más votos. Además, más de uno emitía su voto útil, probablemente pensando que si estaban ahí era porque debían ser buenos. Con los que se inscribían más tarde, pasaba justo lo contrario.

Este año parece un acierto el que haya un periodo cerrado de inscripción que no coincida con el de votación: todos aparecerán al mismo tiempo. Ahora ya sólo falta solucionar el tema de que algunos usuarios se inscriban con 30 blogs "de paja" y luego se otorguen otros tantos votos al blog que realmente quieren promocionar.

Me parece curioso que los premios se hayan adelantado cuatro meses a las fechas habituales (Octubre-Diciembre) y que las votaciones se vayan a realizar justo cuando el personal tiene menos internet, oséase, en pleno verano... pero doctores tiene la Iglesia.

Animo a todos. No cuesta nada participar y podeis ser el blog revelación del año. Si un servidor pudo quedar en su primera participación en un glorioso 10º puesto (categoría de tecnología, no había otra más adecuada), cualquiera de vosotros que seguro que teneis más calidad, puede quedar todavía más arriba con sólo un poco de suerte.

Nota: No llevo comisión.

Convertir etiquetas en botones

2009-05-18T19:41:00.009+02:00

Con CSS y algo de imaginación, se pueden generar bastantes efectos quasi-profesionales. En este caso vamos a convertir la lista simple de categorías que nos proporciona Blogger, en unos botones que nos llevan a los posts de cada etiqueta.

En primer lugar, accedemos por Elementos de Página y añadimos un Nuevo Elemento, tipo Etiquetas. No importa si ya tenemos otro. Podemos probar como queda este, manipularlo y luego borrar este o el anterior que tuviéramos. Lo mejor es ponerle un título que no tengamos, para localizar mejor el código HTML que se generará en nuestra plantilla y que tendremos que modificar después. Pongamos que le llamamos "pruebabotones".

Ahora nos vamos a Diseño, Edición de HTML y expandimos Plantillas de Artilugios. En cualquier lugar, antes de ]]></b:skin>, insertamos la siguiente clase, que será la que le de aspecto de botonera a las etiquetas.

/* Botones
----------------------------------------------- */

/* Aspecto normal */
#botlista a, #botlista a:visited {
position:relative;
text-decoration:none;
text-align:center;
background-color:#990000; /* Color fondo botón */
color:#cccccc; /* Color letra */
display:block;
width:10em; /* Ancho del botón */
border:2px solid #999999; /* Tamaño del borde */
border-color:#444444 #333333 #333333 #444444; /* Color bordes */
padding:0.25em;
margin:0.5em auto;
}

/* Aspecto al pasar el puntero por encima */
#botlista a:hover {
top:0px; /* Valor distinto de 0, simula movimiento vertical */
left:0px; /* Valor distinto de 0, simula movimiento horizontal */
color:#ffffff; /* Color texto */
border-color:#333333 #444444 #444444 #333333; /* Invierte colores borde para simular pulsación */
}

Todo lo que está entre /* y */ explica qué cosas podeis modificar para dejar los botones con el mismo estilo que vuestro blog y si os estorba, podeis borrarlo después de instalarlo en vuestra plantilla.

Ahora seguimos plantilla abajo, buscando el título que le pusimos a las etiquetas (pruebabotones) y nos encontraremos con un código como éste:

<b:widget id='Label4' locked='false' title='pruebabotones' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' id='botlista'>

<b:loop values='data:labels' var='label'>

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
</b:if>


</b:loop>


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

Hay que eliminar todas las líneas en gris, marcadas con comentarios BORRAR y añadir las instrucciones en verde: id='botlist' y (<data:label.count/>). Con eso, teneis funcionando vuestras etiquetas.

Si quereis que no aparezca entre parentesis el número de post de cada categoría, teneis que borrar el segundo de los indicados en el anterior párrafo (data:label.count).

Una vez comprobeis que funciona, ya podeis cambiar colores, bordes, fondos, posiciones. Sustituir background-color:#990000; por background:url (URL_imagenfondo); da unos resultados espectaculares.

Plantilla Blogger. Crear secciones III. Columnas.

2009-05-13T16:00:00.002+02:00

Hemos visto cómo crear una sección sencilla y colocarla dónde nos interese y ahora veremos como hacer dos secciones a la misma altura, que funcionen como columnas independientes, pero que nos permitan añadir gadgets cómodamente.

Primero definimos en la parte CSS (antes de ]]></b:skin>) el ancho de los 2 contenedores (ID) necesarios y su alineación. También podemos añadir más atributos y en este ejemplo se ha incorporado la alineacion central del contenido, así como el color del texto.

Una columna flotará a la izquierda y otra a la derecha. En este caso utilizamos un ancho porcentual que en conjunto no llega al 100%, para que quede un margen entre ellas. Si se conoce el ancho del bloque donde se quieren incorporar, se puede poner un ancho fijo en pixels para cada columna, siempre que en total no superen el espacio disponible. Caso de que nos pasáramos, una columna pasaría a colocarse debajo de la otra.

#columna1 {
width:48%;
float:left;
text-align:center;
margin:0px auto;
color:red;
}

#columna2 {
width:48%;
float:right;
text-align:center;
margin:0px auto;
color:green;
}

Después necesitamos localizar el sitio dónde queremos colocar las dos columnas e insertamos las secciones. Una para cada columna. Para situarlas justo debajo de los post sería así...

Al no existir artilugios en esas secciones, no veremos nada con Vista Previa, pero si guardamos y accedemos a Elementos de Página, ya podemos comprobar que nuestras dos columnas están creadas.

Desde aquí mismo ya podemos comenzar a añadir contenido a las columnas, tal y cómo normalmente hacemos desde la barra lateral: Añadir gadget, escogemos tipo de gadget y redactamos/pegamos el contenido.

Con el mismo sistema, podemos crear más columnas:

CSS

#columna1 {
width:102px;
float:left;
}
#columna2 {
width:102px;
float:left;
}
#columna3 {
width:102px;
float:left;
}
#columna3 {
width:102px;
float:left;
}

HTML

Ver también:

Plantilla Blogger. Crear secciones II. Atributos.

2009-05-12T18:17:00.006+02:00

Si queda claro como formamos bloques contenedores con DIV's, ahora nos interesa saber como generar una sección propiamente dicha. Como se dijo anteriormente, en cualquier otro tipo de página web no nos haría falta hacer nada más, pero como dice J.Miur, "Blogger habla lenguaje Blogger" y la cosa funciona mejor aquí, haciendo uso de las secciones.

Una sección sin contenido tiene un código muy simple...

<b:section class='CLASE_ESTILO' id='NOMBRE_SECCION' />

Nota: Al no tener ningún gadget incluido, la sección se cierra con una contrabarra (/)antes del símbolo de cierre >, no necesitando una etiqueta </b:section>

En la parte de HTML Si añadimos este código tal cual, por ejemplo dentro del DIV denominado MAIN-WRAPPER y justo debajo de la sección de las entradas, veremos desde Elementos de Página como nos aparece un nuevo bloque en ese lugar para poder añadir los gadgets que queramos.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

<b:section class='CLASE_ESTILO' id='NOMBRE_SECCION'/>
</div>

La etiqueta SECTION puede incluir un par de atributos interesantes:

SHOWADDELEMENT: Sirve para que podamos añadir gadgets a cada sección. Su valor puede ser YES o NO. Si probais por ejemplo en la sección de la cabecera a cambiar el valor (normalmente viene en las plantillas ajustado como NO), vereis que aparece un nuevo recuadro arriba con el mensaje "Añadir un gadget". A partir de ese momento podeis generar nuevos gadgets ahí, que quedarán dentro del bloque de la cabecera. Esté se quedará encima de dicha cabecera, pero luego lo podreis mover. Ese mismo valor se puede cambiar en cualquier otra sección según nos interese. Puede no venir porque es opcional y caso de no ponerse, se entiende con valor YES.

MAXWIDGETS: Máximo número de gadgets que admitirá la sección. Si no se coloca, el número de artilugios no tendrá un tope. Bueno, seguramente tenga un máximo, pero tan alto que lo desconozco por innecesario. También es modificable en otras secciones que vengan "de serie".

Aunque este otro es un atributo de la etiqueta WIDGET, quizás sea oportuno que también lo conozcais:

LOCKED: Sus valores son TRUE o FALSE y sirve para bloquear/desbloquear la posibilidad de mover gadgets desde Elementos de Página.

El nombre indicado tanto en el ID del DIV como en el de la sección (SECTION), es realmente un selector de bloque. En el caso de las secciones, tiene que ser único, distinto para cada sección. Se genera en la parte CSS mediante una almohadilla (#) seguida del nombre que le asignemos y sus atributos (ancho, color, etc.) encerrados entre llaves ({}). Estos atributos afectarán a todo el bloque dentro de las etiquetas que lo incorporen. Como normalmente los atributos del DIV ya están definidos, no suele hacer falta definir también el ID de la SECTION que queda dentro.

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

Más interesante seguramente, es definir una clase (CLASS) para cada sección. Eso nos permite dar un estilo individual a cada sección si fuera necesario. A diferencia de los ID, las clases se generan con un punto (.) delante del nombre de la clase. Por ejemplo, con el uso de clases, conseguimos diferenciar el aspecto del bloque de las entradas y el de la barra lateral.

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

Ver también:

Plantilla Blogger. Crear secciones I. Estructura.

2009-05-11T23:50:00.005+02:00

Vamos a abundar un poco en el tema de los contenedores en Blogger, explicando cómo funcionan las secciones, cómo se pueden configurar y por último, ofreciendo un ejemplo de cómo crear columnas en la plantilla mediante secciones.

Aunque se intentará explicar cómo hacerlo para todas las plantillas, como muestra vamos a utilizar una plantilla Blogger Mínima. Empezamos viendo la estructura de nuestra página desde Elementos de página y nos encontramos esto:

Cada uno de los bloques que podeis ver (cabecera, entradas, sidebar y pie), son tratados por Blogger como secciones (SECTION). En realidad, se pueden crear libremente redactando en la parte HTML el código (sin utilizar secciones) y serían igualmente visibles. Lo que ocurre es que resulta más práctico usar secciones, porque así el esquema general de la página será perfectamente visible desde Elementos de Página. El uso de secciones también nos va a facilitar añadir gadgets desde ese apartado y moverlos fácilmente dentro o a otros bloques.

En primer lugar, vamos a acceder a Edición HTML y vamos a localizar las distintas secciones. No expandimos artilugios para verlos mejor y a partir del <BODY>, veremos la misma estructura pero en versión código HTML - dialecto Blogger :)

<div id='outer-wrapper'> ABRE DIV OUTER
  <div id='wrap2'> ABRE DIV WRAP2

    CODIGO

    <div id='header-wrapper'> ABRE DIV CABECERA
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> ABRE SECCION CABECERA
        <b:widget id='Header1' locked='true' title='Blog (cabecera)' type='Header'/> WIDGET
      </b:section> CIERRA SECCION CABECERA
    </div> CIERRA DIV CABECERA

    <div id='content-wrapper'> ABRE DIV CONTENIDO PRINCIPAL

  <div id='crosscol-wrapper' style='text-align:center'> ABRE DIV ENCIMA DE LAS ENTRADAS
    <b:section class='crosscol' id='crosscol' showaddelement='no'/> SECCION ENCIMA DE LAS ENTRADAS (NO VISIBLE)
  </div> CIERRA DIV ENCIMA DE LAS ENTRADAS

      <div id='main-wrapper'> ABRE DIV ENTRADAS
        <b:section class='main' id='main' showaddelement='no'> ABRE SECCION PRINCIPAL
          <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/> WIDGET QUE CONTROLA LAS ENTRADAS
        </b:section> CIERRA SECCION PRINCIPAL
      </div> CIERRA DIV ENTRADAS

      <div id='sidebar-wrapper'> ABRE DIV SIDEBAR
        <b:section class='sidebar' id='sidebar' preferred='yes'> ABRE SECCION SIDEBAR
          WIDGETS BARRA LATERAL
        </b:section> CIERRA SECCION SIDEBAR
      </div> CIERRA DIV SIDEBAR

  <div class='clear'>&#160;</div> RESETEA ELEMENTOS FLOTANTES

    </div> CIERRA CONTENIDO PRINCIPAL

    <div id='footer-wrapper'> ABRE DIV PIE
      <b:section class='footer' id='footer'/> SECCION PIE
    </div> CIERRA DIV PIE

  </div> CIERRA DIV WRAP2
</div> CIERRA DIV OUTER

Cada trozo de código del mismo color identifica cada bloque. En este dibujo podeis ver gráficamente qué parte genera cada uno:

Habreis podido comprobar, que cada sección se engloba dentro de un DIV. Lo normal será que ahí se nombre un selector ID, que en la parte CSS se habrá definido previamente con los atributos necesarios.

Si hay dos bloques dentro a su vez de otro contenedor, ambos se engloban (anidan) dentro de un DIV más general. Ejemplo: crosscol, main y sidebar. Cada uno está dentro de un DIV distinto para generar su propio estilo, pero los tres están incluidos a su vez dentro de otro contenedor llamado CONTENT-WRAPPER, que tiene unas características generales y el tamaño suficiente para contener a los tres.

Estos son los bloques que se usan en la plantilla de ilustración (Blogger Mínima). Otras plantillas pueden usar otros nombres para el mismo tipo de plantilla y, por supuesto, otras estructuras. En cualquier caso, lo importante es ser capaces de distinguir la estructura de nuestra propia plantilla para luego poder modificarla sin problemas.

Ver también:

Pie de imagen

2009-04-27T17:00:00.002+02:00

Al estilo de las que habitualmente aparecen en prensa, ciertas imágenes ilustrativas de una entrada, pueden necesitar un texto con algún tipo de información que se muestre fuera del flujo del texto principal, acompañando directamente la imagen.

Una de las fantásticas caricaturas que podeis encontrar en el blog de Kikelin.

Para conseguir esto, crearemos un bloque mediante un DIV que flotará dónde nos interese y dentro de ese bloque, pondremos la imagen y el texto.

De esta manera, sólo nos tendremos que preocupar de posicionar el DIV donde queremos, porque todo lo que lleve dentro formará un bloque compacto que se situará en esa posición.

Y después de la teoría, la práctica... Una vez redactado nuestro texto principal y desde Edición de HTML, empezamos a insertar este código allá dónde queremos que aparezca la imagen. En primer lugar creamos un bloque alineado al centro o flotando con respecto al texto principal. Esto sólo dependerá de nuestro gusto estético o del tamaño de la imagen.

/*Bloque centrado*/
<div style="text-align:center;margin:0px auto;">
</div>

/*Bloque flotando a la derecha*/
<div style="text-align:center;float:right;margin:0px 0px 10px 10px;">
</div>

/*Bloque flotando a la izquierda*/
<div style="text-align:center;float:left;margin:0px 10px 0px 10px;">
</div>

Ahora, dentro de este bloque, insertaremos la imagen y el texto. Como se ha dicho, no es necesaria ninguna etiqueta STYLE en este segundo paso, ya que los atributos del DIV serán los que prevalezcan al estar la imagen y el texto anidados dentro de él. A lo sumo, podemos incluir un display:block; en la imagen, para ahorrarnos un salto de línea tras el texto. Lo vemos para un bloque flotando a la derecha, tal y como se ha colocado la caricatura de Kikelin.

<div style="margin: 0px 0px 10px 10px; text-align: center; float: right;">Una caricatura de Kikelin<img style="display:block;" src="URL_IMAGEN"/></div>

A partir de aquí ya podemos añadir un enlace al texto, a la imagen o incluso dar formato a cualquiera de ellos. Por ejemplo, podemos hacer más pequeño el texto del pie de imagen o colocar un borde a la idem.

<div style="margin: 0px 0px 10px 10px; text-align: center; float: right;">
<span >
Una caricatura de <a href="URL_ENLACE_TEXTO">Kikelin</a>
</span>
<a href="URL_ENLACE_IMAGEN">
<img style="display:block;border:2px solid #00000;" src="URL_IMAGEN"/>
</a>
</div>

Nota: En el anterior ejemplo se han introducido saltos de línea entre etiquetas para que se aprecie más fácilmente el anidamiento de estas, pero lo correcto sería redactarlo en una sola línea.

Fotografía con hambre.

Actualización: Nos comentan que los textos largos van ampliando el DIV en lugar de irse adaptando al mismo. Esto es porque en el código de esta entrada no se ha indicado ancho alguno para dichos bloques. Para el caso de textos largos, conviene añadir a la etiqueta STYLE un atributo WIDTH con los pixeles de ancho que queremos que ocupe el bloque.

Estilo grunge para webs

2009-04-25T16:29:00.000+02:00

El grunge es un movimiento nacido a finales de los 80, con un representante muy conocido: Kurt Cobain, el malogrado vocal de Nirvana.

Al igual que cuando se habla de otros movimientos sociales, es difícil definir con exactitud qué es grunge y qué es otra cosa, pero si hay una característica común, quizás sea el gusto por lo sucio, roto y, en general, el rechazo a lo convencional.

La estética en cuanto a grupo social, se correspondería con vaqueros con agujeros, camisetas de propaganda rotas, camisas de cuadros desgastadas, jerseys viejos, deshilachados, zapatillas Converse (de imitación), pelo largo, despeinado...

Si todo esto lo trasladamos a una web, nos encontraríamos con líneas irregulares, no definidas, elementos asimétricos, desestructurados, sobrepuestos a otros y sobre todo, aspecto viejo o sucio y textos simulando la escritura manual o los graffiti.

Como una imagen vale más que...

La estética 2.0 es casi todo lo contrario: fondo blanco con líneas casi invisibles o inexistentes para delimitar cajas, texturas muy suaves, con líneas diagonales, fuente Georgia, Helvética o similar, bordes redondeados, links sin subrayado, comillas gigantes, contenido centrado, ancho fijo, imágenes cristal, 3D,...

Como le tengo un poco de manía a esa estética y además últimamente he confirmado mis sospechas de que podía pertenecer a la Generación X, voy a proponeros unos cuantos enlaces para aquellos que quieran poner un toque grunge a sus páginas. La mayoría son en inglés, pero como se trata principalmente de imágenes, no creo que haya problema. Desgraciadamente, hay pocas recopilaciones para blogger.

Estilo grunge en el diseño de webs. Smashing Magazine.
100 fuentes grunge. Hongkiat.
23 plantillas grunge para Wordpress. Designm.ag.
plantillas grunge para Blogger. BTemplates
Skings grunge. BlogSkins
Grungy, plantilla para Blogger. Blogmundi.
Iconos RSS estilo grunge. Customize.org
Iconos grunge. Dryicons.
Texturas grunge. Grunge textures.

Aspire de nuevo. Lineas laterales gadgets.

2009-04-20T00:53:00.001+02:00

Como decíamos ayer, la plantilla Aspire tienes algunos pequeños inconvenientes. Ahora nos vamos a ocupar de la desaparición de las líneas laterales que rodean los artilugios de las sidebars.

Para crear el formato de pergamino de estos gadgets, el código incluye una imagen de fondo para la cabecera y otra para el resto del contenido. Con la primera no existe ningún problema, pero en el caso de contenidos muy largos, la imagen de fondo de la parte inferior, a pesar de tener una longitud más que suficiente para el 90% de los casos, se queda corta para algunos contenidos muy extensos.

Ese fondo está alineado a la parte inferior de cada artilugio (bottom), así que cuando la longitud del gadget supera la longitud de la imagen, la imagen de fondo no llega a cubrir todo el artilugio. El resultado es que en la parte superior del contenido, no son visibles las líneas que deberían rodear el mismo. (Ver imagen de ejemplo).

Esto se podría solucionar acortando la imagen del pie y creando un tercer ID para la parte central, sólo con las líneas. Lo que ocurre es que habría que modificar manualmente todos los códigos de todos los gadgets y, además, acordarnos de modificar todos aquellos que fuéramos incorporando nuevos.

Dicho esto, vamos a hacer una chapuza que es lo nuestro y con una modificación mínima, intentaremos solucionar de una forma digna el problema. Para ello, simplemente vamos a incluir unas líneas de borde, que se superpondrán a la imagen de fondo antes mencionada. Estas líneas estarán en toda la longitud del contenido del artilugio. En todo excepto en el título).

Dónde haya imagen no se notarán porque serán del mismo color, pero dónde no llegue la imagen, si que se apreciarán, consiguiendo el resultado deseado.

Y después de todo este rollo, aquí está el código a buscar y en negro, los atributos que hay que añadir. Con Vista Previa podeis decidir si os convence o no la solución.

#sidebars .widget-content {background:url(http://www.webpagedesign.ws/aspire/sidebarbottom.jpg) center bottom no-repeat;padding:0px 10px 15px 10px;margin-left:2px;margin-right:2px;border-left:1px solid #AE8535;border-right:1px solid #AE8535;}

Aspire. Icono de edición rápida de entradas

2009-04-18T16:52:00.005+02:00

Aspire es una plantilla con mucha aceptación pero que tiene diversos problemillas en su diseño. Desde Mango Street, echan de menos el lapicero que sirve para editar desde la vista normal del blog, las entradas ya publicadas.

Aunque parece que el artilugio correspondiente no está, la realidad es que sí. El problema es que incluye un código (#160) que no es visible y que no nos permite acceder a la edición. De esta manera, la solución es bastante fácil y simplemente se de trata de sustituir dicho código por una imagen.

Acudimos a nuestra pestaña de Diseño, Edición de HTML y con artilugios expandidos, buscamos esto:

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>

En negro se ha marcado la línea en cuestión. Hay que sustituirla por la que se marca a continuación y que incluye la imagen original que Blogger coloca por defecto en sus plantillas.

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>

Un problema menos.

Aviso para la carga de una página

2009-04-12T13:40:00.000+02:00

En ocasiones es interesante indicar al usuario de una página web, que esta está en proceso de carga. Recuerdo especialmente el ejemplo del script Lightwindow. Se trataba de un fichero que tardaba un poco en cargarse y cualquier intento de utilizarlo antes de estar completamente en la caché, provocaba que no funcionara.

Cargando datos. Espere por favor.

Si queremos advertir de que algo está todavía pendiente de cargar en nuestro espacio, tendremos que colocar un aviso (texto y/o imagen) justo después de la etiqueta <BODY>, para que sea lo primero que se ejecute. Pero, una vez cargada la página, lo más normal será que deseemos quitar dicho aviso. Para ello, vamos a incorporar también, una función que oculta el mensaje una vez cargada la página. Esa función será llamada desde la propia etiqueta <BODY>.

El código, por tanto, debería quedar más o menos así:

/* Dentro de la etiqueta BODY insertamos una llamada a la función ESCONDER, pasando como parámetro el nombre del DIV (aviso) */
<body onLoad='javascript:esconder("aviso");'>


<div id='aviso' style='text-align:center;margin:0px auto;position:absolute;left:20px;top:80px;width:220px;background-color:#eeeeee;border-width:1px;border-color:#000000;padding:5px;'><img style='float:left;' src='http://i263.photobucket.com/albums/ii148/elsereno100/ajax-loader.gif'/> <span style='font-family:Verdana;font-size:10px;font-weight:bold;color:#990000;'>Cargando datos. Espere un momento.</span></div>

Podemos modificar la imagen o el texto y el aspecto del bloque cómo queramos, modificando los valores CSS de la etiqueta STYLE.

Nos queda crear el pequeño SCRIPT para esconder el DIV, para lo cual insertaremos este código antes del </head>:

<script type='text/javascript'>
function esconder(id)
{document.getElementById(id).style.visibility = "hidden"; document.getElementById(id).style.display = "none";}
</script>

Puede que en vez de un aviso, prefirais poner cualquier otra cosa que entretenga a vuestros lectores. Todo lo que querais lo podeis colocar dentro del DIV llamado aquí "aviso".

Pero usad un poco el sentido común porque con las ADSL actuales, la cosa no se verá durante mucho tiempo y tampoco es cuestión de que pongais cosas como esta...