Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Cubrir una capa con otra que se puede ocultar con un click

28/11/2011
Con este código lo que haremos será solapar una capa con el contenido que queramos, por encima de otro elemento del blog. En un primer ejemplo, esa capa solapada que se podrá cerrar con un click, la vamos a hacer translúcida, de manera que se podrá ver parcialmente la información que estuviera debajo. En otros ejemplos veremos otros casos posibles con el mismo sistema

Para ello vamos a usar un JavaScript básico que ya hemos utilizado en otras ocasiones y que por tanto, es posible que ya tengáis en vuestra plantilla. Se trata de un pequeño CSS con las clases visible e invisible y que precisamente hace que la capa bajo esa clase se vea o no se vea.

Seguido viene una función (plegardesplegar) que intercambia estas dos clases cuando nos sea necesario. Con estas dos cosas podremos conseguir a golpe de ratón, que una capa pueda desaparecer.

Este es el trozo que habría que insertar antes de vuestro </head>. Si lo tenéis, evidentemente no será necesario este paso:

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>
<script type='text/JavaScript'>
function plegardesplegar(identificacion){
var elemento = document.getElementById(identificacion);
if(elemento.className == "visible"){
elemento.className = "invisible";
}
else{
elemento.className = "visible";
}
}
</script>

Para este caso concreto, a continuación añadimos en el mismo sitio el estilo para la capa que quedará superpuesta por encima:

<style type='text/css'>
#capasuperior {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99;
opacity: 0.8;filter: alpha(opacity=80);
background: #000000;
}
</style>

Según el uso que le vayáis a dar a esto, puede que queráis cambiar el background por una imagen o modificar e incluso suprimir la transparencia (opacity).


Ahora es cuando tenemos que localizar nuestro elemento a ocultar con la capa semitransparente. Supongamos un caso fácil en el que queremos "tapar" una imagen que tenemos en un post. El código que aparecerá por defecto para una imagen está marcado en gris. Lo demás es precisamente lo que tendremos que añadir y para distinguirlo, está marcado con negrita:

<div class="separator" style="clear: both; text-align: center;position:relative;>

<div class="visible" id="capasuperior">
Aquí iría el contenido que queremos mostrar por encima del otro elemento. Podemos darle estilo metiéndolo a su vez dentro de un SPAN o en otro DIV
<p><a href="javascript:plegardesplegar ('capasuperior');">CERRAR [X]</a></p>
</div>

<a href="http://1.bp.blogspot.com/-2CKzJa0Qvgg/TtFBGqNHwGI/AAAAAAAAPow/Qab0-RUYAFs/s1600/Sunrise1.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em;"><img border="0" height="301" width="400" src="http://1.bp.blogspot.com/-2CKzJa0Qvgg/TtFBGqNHwGI/AAAAAAAAPow/Qab0-RUYAFs/s400/Sunrise1.jpg" /></a></div>

Importante insertar en la capa original (la que quedará inicialmente por debajo) un position:relative; tal y como se ve aquí arriba. Si no está contenida en un DIV y no podemos añadir ese atributo, entonces la tendremos que meter en uno tal y como veremos en el ejemplo posterior a este.

PINCHA EN "CERRAR" PARA VER LA BONITA IMAGEN QUE TE HEMOS PREPARADO.



La utilidad de esto puede ser distinta según vuestras necesidades. Por ejemplo a José le venía bien tapar cierto gadget de la barra lateral y que sólo se descubriera al pinchar sobre él.

Para hacer esto buscaríamos el código del gadget en la plantilla (con Expandir Plantillas de Artilugios seleccionado) y repetimos lo hecho anteriormente. Ahora tenemos en cuenta que el artilugio estará entre etiquetas WIDGET y que no contará con ningún sitio dónde podamos añadir el position:relative;, por lo que añadimos un DIV que englobe por entero el código del gadget tal y cómo habíamos mencionado anteriormente:

<b:widget id='Slideshow1' locked='false' title='Presentación' type='Slideshow'>
<b:includable id='main'>

<div style='position:relative;'><!-- DIV añadido -->
<div class='visible' id='capasuperior'>
Aquí iría el contenido que queremos mostrar por encima del gadget.
<p><a href='javascript:plegardesplegar ("capasuperior");'>CERRAR [X]</a></p>
</div>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='slideshow-container' expr:id='data:widget.instanceId + &quot;_slideshow&quot;'>
<span class='slideshow-status'>Loading...</span>
</div>
</div>
<b:include name='quickedit'/>

</div> <!-- Cierre DIV añadido -->

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


También se podría utilizar para plantear algún tipo de noticia, juego o acertijo, de manera que al pinchar se revele el contenido oculto:





Los milagros del maquillaje.
¿Quién es esta famosa cantante y actriz?

Descubrir nombre



Correcto. Esta es...
¡Jeniffer López!


Bueno, son cosas que sirven para ir aprendiendo a manejarse con el HTML, JavaScript y CSS. Quizás ahora no os haga falta para nada, pero recordando que esto se puede hacer, cualquier día os puede sacar de un apuro... al igual que con todo lo que vamos explicando.


Situar el gadget buscador junto al título del blog (o en otro sitio cualquiera)

24/11/2011
Parece que un buen lugar y que agrada a la mayoría para poner su buscador interno, es en la parte superior del blog, más o menos a la altura del título, dentro de la cabecera. Cómo se puede colocar ahí es lo que vamos a ver en esta entrada, aunque lo cierto es que con el mismo sistema podremos ponerlo dónde nos plazca.

Las modificaciones las he hecho desde el nuevo escritorio (nueva interfaz), así que las referencias van literales como aparecen en él. Para el clásico es más o menos lo mismo pero lo comento para evitar confusiones.


Lo primero que haremos será acceder a Plantilla ► Edición HTML para modificar la sección que corresponde a la cabecera de manera que nos admita varios widgets. Por defecto esta parte del blog viene con unos parámetros que limitan el número de artilugios que puede contener y que por otra parte, bloquea la posibilidad de añadir alguno. Respectivamente son maxwidgets y showaddelement y así es como viene si no se han modificado:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Puede que en vuestra plantilla la parte superior no tenga la misma nomenclatura (header), pero si buscáis sin expandir artilugios, lo normal es que sea la primera sección que aparezca.

Cabecera original

Los parámetros que antes hemos comentado se tienen que cambiar de la siguiente manera:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Con un 2 en maxwidgets ya nos vale para este caso (cabecera+buscador), pero si necesitáis poner más cosas por ahí arriba, podéis aumentar ese número en cualquier momento. Con respecto a showaddelement, el valor para poder añadir elementos es precisamente yes.

Ahora si vamos a Diseño, podremos ver que en la parte de la cabecera aparece un nuevo recuadro encima del elemento cabecera que nos permitirá Añadir un gadget.

Nuevo bloque para añadir gadgets en la zona de la cabecera
Ahora llega el momento de añadir el buscador. Pinchamos en Añadir un gadget, seleccionamos el que se llama Cuadro de búsqueda, marcamos las opciones que nos interesen y guardamos. Ahora lo que veremos en nuestro blog será algo similar a esto:

Cabecera con buscador encima
Ya sólo nos resta dar las propiedades adecuadas para que la caja del buscador no ocupe todo el ancho y que además se ubique a la derecha del título. Eso lo hacemos accediendo a Diseño ► Diseñador de Plantillas ► Avanzado ► Añadir CSS. Allí tecleamos o copiamos esto:

#CustomSearch1 {
float:right;
position:relative;
top:16px;
right:0px;
width:200px;
height:33px;
padding-left:36px;
background:url(http://1.bp.blogspot.com/_0eC4K-qZ7AM/Sr1bJb_EBCI/AAAAAAAAJ4w/qzUSCige6gk/s400/lupa.gif) no-repeat 0px 0px;
}

Con TOP y RIGHT podéis cambiar la ubicación exacta del buscador. El ancho (WIDTH) y el alto (HEIGHT) también los podéis modificar a vuestro gusto. Las dos últimas líneas (PADDING y BACKGROUND) son un plus que se me ha ocurrido haciendo estas pruebas y que sirven para poner un icono a la izquierda de la caja del buscador. Podéis cambiar el dibujito o directamente anularlo del código borrando esas dos líneas.

Cabecera con buscador alineado


Go Daddy simplifica el uso de dominios propios con Blogger

18/11/2011
Contratar un dominio propio cuando tienes un blog en Blogger, es sinónimo de redireccionar DNS, ajustar C-NAME, pelearse con las WWW y todas esas gaitas que siendo no muy difíciles de solucionar, sin duda te complican la vida.

Ya comentamos hace poco que cuando el dominio se lo compras al propio Google, uno ni se entera de todas estas cosas, ya que su sistema lo hace todo y nosotros sólo tenemos que dar un par de clicks en el ratón.

Sin embargo hay muchos que compran su dominio en Go Daddy y hasta ahora, hacer estos ajustes llevaban una tarea muchas veces ingrata, debido a lo novedoso del tema y al desconocimiento del comprador.

Hoy en Blogger Buzz anuncian que esto ha cambiado, porque Go Daddy ha habilitado una utilidad para hacer todo el proceso automáticamente.


Así que si tienes un dominio de Go Daddy y quieres conectarlo con tu blog de Blogger, sólo tienes que iniciar sesión en Go Daddy, acceder a la herramienta de redirección, introducir el dominio (o subdominio), confirmar y listo; registros DNS actualizados, sin necesidad siquiera de saber qué significan esas siglas ni para qué sirven.

Luego ya sólo resta acceder a Blogger, Configuración ► Básico ► Dirección del Blog y allí, Añadir un dominio personalizado. En unas 24 horas (a veces menos), el dominio será redireccionado.

Acceso a redirección de DNS Go Daddy.


Cabecera en móviles para blogs sin cabecera

CTRL+X por Ben6835 
Hace tiempo explicamos cómo eliminar el artilugio Cabecera. Con eso pretendíamos tener libertad para diseñar un encabezamiento mediante código  HTML y salirnos del encorsetado widget. El problema -menor, todo hay que decirlo- para los que quitamos ese widget, es que ahora que existen las plantillas para móviles y estas no muestran imagen alguna.

La causa es que dichas plantillas toman la imagen de este artilugio (Cabecera de página) y por tanto, si no lo tenemos en la plantilla normal, es imposible que se traslade a la plantilla para móvil.

Yo no suelo ver mi página en el teléfono y por eso no me había percatado del asunto, pero para eso tenemos al amigo Felipe de Eurowon, que no sólo nos lo ha hecho saber sino que además nos ha dado la solución mascadita.
Vamos a partir del supuesto de que ya tenéis eliminada la cabecera y tenemos un gadget HTML/Javascript que está haciendo esa función.

Lo primero es añadir de nuevo el gadget Cabecera de página, añadir una imagen (la que hará de encabezamiento en la versión móvil) y seleccionar la opción En lugar del título y la descripción. Guardamos los cambios.

Ahora editamos la plantilla con Expandir plantillas de artilugios marcado y buscamos b:widget id='Header1'.

Una vez localizada esa parte, seleccionamos para cortar todo el widget completo, desde la apertura hasta el cierre ambos inclusive:

<b:section class='sidebar' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='TITULO DEL GADGET' type='Header'>
<b:includable id='main'>
...
...
</b:includable>
</b:widget>
</b:section>

Lo único con lo que tenéis que tener cuidado ahora, es con no pasaros de largo cortando. Ir revisando las líneas -son muchas- y os detenéis en el primer cierre de widget (</b:widget>) que encontréis. Las dos líneas grises no las tenéis que tocar y sólo las he puesto cómo referencia. La primera incluso podría ser algo distinta.

Antes de cortar, nos fijamos en lo que hay dentro de title (en verde), porque eso lo tendremos que teclear ahora después en el nuevo código.

Para terminar insertamos todo esto justo dónde quitamos el anterior, entre las dos etiquetas section que ahora veremos seguidas.

<b:section class='sidebar' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='TITULO DEL GADGET' type='Header'>
<b:includable id='title'/>
<b:includable id='description'/>
<b:includable id='main'>
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section&gt;

Cambiamos el title para que sea el mismo que teníamos puesto antes y con Vista Previa comprobamos que todo va bien.

Listo (me dan ganas de decir: ¡Tatachaaaan!). Ahora nuestra página estará como siempre pero si nos metemos en la versión móvil, comprobaremos que nos sale la imagen antes cargada, cuando reinstalamos el widget cabecera.


Para que se entienda lo hecho, lo que hemos insertado en lugar de todo el código del artilugio, es sólo una pequeña fracción de este. Precisamente la parte que Blogger pone ahí para las versiones móviles.

¡Ah! Y si no tenéis un smartphone a mano, podéis añadir a vuestra dirección un ?m=1 y así ver sin esperar más, cómo queda la cosa en un móvil.

http://NOMBREBLOG.blogspot.com?m=1


Crear un sitemap con Herramientas para Webmasters

16/11/2011
Como decíamos ayer, existe una forma muy sencilla de enviar un sitemap y que este sirva para agilizar la indexación de todas nuestras URLs, utilizando nuestro feed y Webmasters Tools o Herramientas para webmasters.

En ese servicio encontraremos herramientas para administradores web y además de lo que vamos a ver específicamente hoy, también hallaremos información sobre acceso de los rastreadores a nuestro sitio, errores y estadísticas, consultas de búsquedas, enlaces de Google a nuestro sitio, palabras clave, si somos sospechosos de contener software malintencionado... y otras cosillas que conviene que veáis por vosotros mismos porque seguro que encontráis alguna de interés.


TUTORIAL

Accedemos a Herramientas para Webmasters, nos registramos con nuestra cuenta Google (sirve la misma de Blogger) y lo primero que hay que hacer es AÑADIR UN SITIO. Se abrirá una pequeña ventana y ahí teclearemos la dirección (URL) principal de nuestro blog.

Después y como es costumbre con este tipo de cosas, tenemos que demostrar que somos los propietarios del sitio. Para ello, lo más fácil es ir a la pestaña de Métodos alternativos, seleccionar Añadir una metaetiqueta a la página principal de tu sitio y seguir las instrucciones. Estas se resumen en insertar en nuestra plantilla la etiqueta META que nos facilitan y luego pinchar en el botón de más abajo

Continuamos y nos sale el contenido del Panel de control. A la izquierda podremos ver un menú con los distintos datos disponibles. Desplegamos la opción Información del sitio y encontramos en primer lugar el apartado Sitemaps.

Como se supone que es la primera vez que hacemos esto, sólo nos aparecerán una serie de encabezamientos sin contenido. Allí tenemos que pinchar en y aquí es dónde viene el truco.

Todos los blogs Blogger tienen una fuente o feed basado en el estándar ATOM (http://NOMBREBLOG.blogspot.com/atom.xml), por lo que en un principio podríamos usarlo para que desde ahí se fueran leyendo todas las direcciones de las distintas entradas. Pero el problema es que este sólo muestra las últimas 25 entradas, lo mismo que si metiéramos http://NOMBREBLOG.blogspot.com/feeds/posts/default con o sin ?orderby=updated añadido.

Así que lo que tendremos que añadir a la dirección de nuestro blog para que nos indexe hasta 500 posts, tiene que ser esto otro, que lo que hace es seleccionar 500 entradas (max-results) comenzando desde el registro número 1 (start-index):

/atom.xml?redirect=false&start-index=1&max-results=500

Como el máximo que suele funcionar bien es de 500 posts, si tenemos un número superior habrá que añadir tandas iguales como si fueran nuevos sitemaps, pero en las siguientes ocasiones, comenzando (start-index) desde el último enviado: 501, 1001, 1501...

/atom.xml?redirect=false&start-index=1&max-results=500
/atom.xml?redirect=false&start-index=501&max-results=500
/atom.xml?redirect=false&start-index=1001&max-results=500
...

El último ejemplo nos permitirá enviar hasta 1500 entradas, aunque según me han contado parece que no conviene poner más de las necesarias. Así las cosas, habrá que enviar sólo los suficientes como para cubrir las entradas que tengamos publicadas hasta la fecha y cuando pasemos algún múltiplo de 500, recordar que tenemos que dar de alta las siguientes 500.


A partir de aquí, paciencia. De momento parece que no hemos hecho nada, pero si volvéis a ese apartado de Herramientas para webmasters en días posteriores, veréis como se han enviado todas las entradas y, sobre todo, cómo el número de entradas indexadas (última columna a la derecha) va incrementándose.

Como referencia, en 8 días a mí se me han indexado 407 entradas de un total de 515, pero las que restan seguro que tardan proporcionalmente más tiempo.


Sitemaps y Blogger

15/11/2011
Este título que para algunos puede parecer un trabalenguas spanglish, es en realidad una tarea que conviene hacer para que que Google indexe de la mejor manera y lo antes posible, todos los posts que tenemos publicados en el blog. Es un truco antiguo, pero como no lo tenia publicado y ahora he tenido que refrescar la memoria al cambiar de dominio, nos pondremos al día haciéndolo.

Un sitemap es un mapa de un sitio web o dicho de otra manera, una guía ordenada de los contenidos. Para hacerse una idea, es cómo un directorio de un edificio de oficinas, dónde se nos indica de una manera estructurada qué podemos encontrar en cada planta.

La utilidad de este tipo de mapas es que los visitantes pueden con un rápido vistazo, hacerse una idea de cómo está organizada la información de esa web. Si además este se hace de una manera determinada, la información también podrá ser aprovechada por las arañas (spiders) que rastrean la web indexando páginas.

La forma habitual de hacer un sitemap es construyendo un archivo XML que incluye todas las direcciones de un sitio, a los que se adjuntan algunos metadatos como la importancia relativa de cada una de ellas, última actualización y frecuencia de modificación, por ejemplo.

Pero esto que para una web convencional más o menos estática es relativamente fácil de hacer con algunas de las herramientas que podemos encontrar en la Red, para un blog con frecuentes actualizaciones y especialmente en Blogger, resulta una tarea algo más ardua.

Sin embargo, existe una forma muy sencilla de enviar un sitemap y que este sirva para agilizar la indexación de todas nuestras URLs, todas las entradas en realidad. Se trataría de aprovechar nuestro feed que a fin de cuentas es un fichero del tipo .xml y un servicio de Google llamado Webmasters Tools o Herramientas para webmasters.

Pero esto ya lo dejo para mañana. Cómo ponían en las series antiguas: Continuará...


Facebook no permitirá importar contenido RSS a partir del 22 de Noviembre

10/11/2011
Aunque no he encontrado información oficial de boca del propio Facebook, este aviso está apareciendo en el muro de todos aquellos que importamos contenido automáticamente desde un feed:

Changes to How You Share Content in Notes

You currently automatically import content from your website or blog into your Facebook notes. Starting November 22nd, this feature will no longer be available, although you'll still be able to write individual notes. The best way to share content from your website is to post links on your Wall. Más información about notes.

En cristiano...

Cambios sobre cómo compartes contenido en Notas

Actualmente importas contenido desde tu sitio web o blog hacia las Notas de Facebook. A partir del 22 de Noviembre, esta utilidad no estará disponible, aunque todavía podrás escribir notas individuales. La mejor manera de compartir contenido desde tu sitio web es publicando los enlaces en tu muro. Más información sobre notas.

Está claro ¿no? El que quiera mostrar contenido de su sitio en Facebook, que lo haga a mano redactándolo todo allí de nuevo, que ponga un simple link (como con cualquier otro blog ajeno) o que se abstenga.


Facebook está introduciendo muchos cambios últimamente y lo hace casi al mismo ritmo que Google Plus con sus nuevas utilidades. Muchos dicen que estas dos plataformas no son comparables pero uno que usa las dos, no ve mucha diferencia, excepción hecha -sólo de momento- del usuario-tipo de cada una de ellas y la evidente posición privilegiada del señor caralibro.

No se ve clara la ventaja de hacer esta modificación porque en un principio, la primera conclusión es que van a tener una reducción de contenido. Y no sólo de particulares o aficionados, sino también de marcas.

Menos contenido = Menos visitas = Menos impresiones publicitarias


En su momento me atreví a apostar, que G+ tardaría en liberar totalmente una API por su propio interés. Que el contenido de un sitio esté bajo el control y administración de ese sitio parece un factor importante para mantener a un usuario cautivo. No es lo mismo que yo envíe automáticamente mis posts a una red social, que tenga obligatoriamente que entrar para dejar un link.

Lo segundo es cómo las ofertas de los hipermercados: entra a por esto con precio de dumping, que yo ya te pondré a la vista otras cosas que me interesa vender. Un buen porcentaje compramos siempre algo más ¿verdad?

En el caso de las redes sociales lo que interesa es recibir visitas y mandar un contenido mediante un programa no cuenta como tal. Además, como en el hiper, una vez que estás allí siempre picoteas con alguna otra cosa. Más impresiones.

Por otro lado, si un gran número de mis usuarios tienen sus propios espacios, que al menos se molesten en entrar aquí si quieren promocionarlos. Quizás con el tiempo incluso abandonen totalmente su propio sitio y se dediquen sólo a postear para mí. Más impresiones. Esto ya lleva tiempo pasando con bastantes blogueros que han 'avanzado' cerrando su sitio y pasándose a otras plataformas más ágiles -yo diría simples- y que son sencillas de mantener o incluso que no necesitan ningún mantenimiento por estar todo prediseñado.

Así las cosas, Google está adoptando lo que bueno en Facebook y Facebook ahora aprende de Google retirando la posibilidad de importar automáticamente entradas desde otros sitios.


Tengo sólo una duda y es que el aviso me sale sólo en mi perfil personal y no en las páginas que administro. Lo más lógico es que con un aviso a la persona sirva para todo lo que se administre, pero también puede que al final esté totalmente equivocado -no sería de extrañar- y a las páginas no les afecte el cambio. Veremos...


Problemas al acceder a la plantilla con la nueva interfaz de Blogger.

09/11/2011
No es que le ocurra a todos, pero al menos a mí y a Nico sí que nos pasaba. Supongo que alguno más habrá por ahí que le pase lo mismo y para ellos, va está entrada.

El problema es que cuando se accede a la sección Plantilla desde la nueva interfaz, la página se redirecciona -aparentemente hacia el Nuevo Diseñador- y se queda pillada con un icono con el logo de Blogger. Fondo gris oscuro y tres puntos blancos debajo indicando carga. De ahí no hay forma aparente de salir:


Se conoce que esta página en concreto funciona con un iframe y como por otra parte también es como si cargáramos nuestra página principal, pues sucede que no le sienta nada bien este pequeño script (o similar) que algunos tenemos puesto para evitar que otros utilicen nuestro espacio dentro de un iframe ajeno. Era por ejemplo el caso que vimos con Google Imágenes.

<script type="text/javascript">
if(top.location!=this.location) top.location=this.location;
</script>

La solución por tanto es quitar este código de nuestro plantilla. Con eso, problema solucionado.

Si alguno por necesidad propia quiere seguir teniéndolo, no tendrá más remedio que espabilarse cuando se carga la página correspondiente a la modificación de plantilla y darle rápidamente al Detener de su navegador (normalmente un icono con un aspa) antes de que termine de cargar la página. Este es el truquillo cutre para que podamos acceder sin problemas.

Actualización: En esto último, por simple que parezca, no caí hasta que me lo hizo ver Chacien, a quién se debe el merito del truco.


Presentada la VI edición de los Premios 20Blogs

08/11/2011
Ayer lunes y dentro de la I Jornada BLOGSCOM, fueron presentados los Premios 20Blogs 2011, en la que será su sexta convocatoria.

En la página oficial de los conocidos premios organizados por 20minutos, todavía no hay ningún referencia pero en este vídeo podéis oír de los propios labios del Director de la publicación, Arsenio Iglesias, un anticipo de los datos básicos.

Posiblemente cuando se publique esta entrada o ya se sabrán las bases concretas o estarán muy próximas a salir, porque el próximo jueves 10 de noviembre comienza el plazo de inscripción para el concurso, que se prolongará hasta el 9 de Diciembre.

Tienes un mes entero para apuntarte así que espabila y podrás tanto elegir como ser elegido, porque os recuerdo que una de las peculiaridades de este certamen, es que los propios blogueros participantes son los que exclusivamente eligen con sus votos a los finalistas para el Premio del Jurado, al tiempo que deciden uno de los premios importantes con dotación económica (3.000€), el Premio de los Blogueros. El otro premio con componente en metálico lo otorga un jurado que en esta ocasión incluye a Ana Pastor (TVE), Berto Romero (La Sexta), Carlos Chaguaceda (Coca Cola) y Mildred Laya (BBVA).

La fase de votación será entre el 23 de Diciembre y el 3 de Febrero, para rematar la faena en la tradicional fiesta a celebrar en esta ocasión en la semana del 13 al 19 de Febrero de 2012.

Las categorías sufren muy pocos cambios: Actualidad, Blogosfera, Ciencia Tecnología e Internet, Cine y TV, Cultura y Tendencias, Deportes, Economía, Gastronomía, Humor, Medio Ambiente, Moda y Belleza, Motor, Multimedia y Microblogs, Música, Personal, Salud y Vida Sana, Solidario, Tu ciudad, Viajes, Vídeo-juegos.

Las principales novedades son la inclusión de la temática de Belleza dentro de la categoría de Moda, la eliminación del premio Blogueros por el Mundo y la nueva Salud y Vida Sana.

También se ha presentado como novedad la incorporación de un premio especial al Diseño, pero doy fe de que no es tan novedosa como dicen.

En 2010 participaron más de 5.000 blogueros ¿serás tú uno de los de este año? Espero que sí, pero también deseo que obtengas un buen puesto en la clasificación final.


Oloblogger.com Cambio de dominio con Blogger

06/11/2011
Hala. Ya tenemos dominio propio por obra y gracia del que nos da también alojamiento o lo que es lo mismo, Google.

Desde hoy, lo que antes era oloblogger.blogspot.com, ahora es www.oloblogger.com o también en su forma más sencilla, oloblogger.com, como prefiráis.

Si eres de los que gustan seguir este sitio, nos tienes enlazados y -sobre todo- tienes ganas, puedes actualizar nuestra URL aunque en un principio todo debería seguir funcionando bien con la dirección antigua. Y si no nos tienes enlazados en tu blogroll ¡¿a qué estás esperando?!


Decía que el cambio había sido facilitado por mi proveedor habitual, porque desde Blogger es posible contratar un dominio por 10$ anuales y la gran ventaja es que el sistema hace todo lo demás.

Si hay por aquí algún interesado en darse el capricho, en el nuevo panel tenéis esa opción en Configuración ► Básico ► Dirección del Blog. Debajo del la dirección actual podréis ver un enlace que reza Añadir un dominio personalizado.


Pinchando ahí se nos despliega un pequeño cuadro desde el que se puede comprar el dominio deseado -siempre que esté disponible- y luego ya sólo hay que rellenar una serie de datos personales (obligatorios) y acceder a la pasarela de pagos.


Yo he sucumbido a la presión mediática que te hace dudar si tener un subdominio (blogspot) o un dominio propio, es mejor o peor. Todavía no lo tengo claro pero que con el tiempo se verá. En un principio sólo creo que es cuestión de imagen y los que venís habitualmente por aquí, creo que intuís que eso me da un poco lo mismo.

Entiéndase que por supuesto agrada estar bien considerado, tener un blog majo y un contenido que gusta, pero lo que quiero decir es que prefiero contenido a continente y si el blog está más o menos regular en cuanto a presencia, pues no me importa tanto.

De todas formas, llevo ya muchos años cansado de esta plantilla que es muy lenta de carga y farragosa de mantener y aunque muchas veces lo he pensado y dicho, cada vez estoy más cerca de pegarle un revolcón y hacer una cosa mucho más sencilla a la vista y para los navegadores.


Se avecinan cambios por estos lares y eso también me va empujando a hacer estas pequeñas modificaciones.


Alguien nos vigila...

05/11/2011
¿Adivinas quién?


Marcar imágenes ampliables con un puntero distinto

02/11/2011
Ahora que en Blogger se dispone de un sistema de ventanas modales para imágenes -el inicialmente problemático y ya muy conocido lightbox- quizás quieras destacar esa nueva propiedad de tus gráficos para que se sepa fácilmente que se pueden ver a un tamaño mayor. Y si eres de los que sigues usando un sistema externo distinto para el mismo fin, sigue leyendo, que también vamos a ver cómo se puede hacer esto mismo en ese otro caso.

La idea es simple, poner un puntero distinto en las imágenes con esa característica, usando algún tipo de icono alusivo a su posibilidad de ser ampliadas.

La forma genérica si todas las imágenes de tus posts son ampliables, como ocurre en el caso del lightbox de serie de Blogger, es incluir una propiedad cursor a la clase correspondiente a las entradas. En la mayoría de plantillas esta clase es denominada post y en ella es dónde tendremos que incluir la nueva propiedad:

.post img {
cursor: url(https://lh4.googleusercontent.com/-OokCVah1ves/Tj7Jl2WKO_I/AAAAAAAAOjs/6ab31vUeMZI/lupa.gif), auto !important;
}

El !important es posible que no sea necesario según que casos, pero ante la duda lo pondremos para dar prioridad a este cursor sobre otros que pudiera haber en la plantilla.

El resultado es que en lugar de salir una mano en las imágenes indicando que hay un enlace (o una flecha cuando no lo hay), tras esa modificación saldrá un dibujito distinto, que en el caso del ejemplo ha sido una especie de lupa:

La extinción de los dinosaurios


Para las utilidades externas ya tenemos que echar mano de los selectores CSS, que nos permitirán filtrar entre todas las imágenes del blog, aquellas a la que se les aplique algún tipo de ventana modal.

Lo normal en estos casos es que haya que añadir algo al enlace de una imagen, para que se active la ventana modal. Por ejemplo, con lytebox es necesario agregar la etiqueta rel="lytebox" para que el programa identifique que una determinada imagen será ampliada al hacer click en ella.

Sabiendo esto podemos crear una regla, que diga que todos los enlaces que incluyan esa etiqueta (rel) y que contengan también un valor igual a lytebox, sean cambiados en cuanto a aspecto del puntero. Usamos el * para incluir todos los casos posibles que se pueden dar con lytebox, ya que la etiqueta puede tener otros formatos. Por ejemplo, las galerías llevarían la expresión rel="lytebox[galeria]".

a[rel*='lytebox'] {
cursor: url(URL_IMAGEN), auto !important;
}

De la misma manera, los que usan lightwindow necesitan añadir a las imágenes ampliables un class="lightwindow", por lo que en este caso el código sería así:

a[class*='lightwindow'] {
cursor: url(URL_IMAGEN), auto !important;
}

Ejemplo con Lightwindow:



Si usáis otro tipo de ventanas modales distintas de las anteriores, sólo tendréis que saber la etiqueta que utiliza esa aplicación para distinguir las imágenes ampliables de las otras y ajustar el código del ejemplo para que filtre adecuadamente.


Botón para que te sigan en Google Plus

01/11/2011
Google Plus Widget nos facilita el código para poder incluir donde queramos, un botón que permitirá a tus lectores o simpatizantes, añadirte a sus círculos de Google Plus. El botón se presenta dentro de una caja totalmente personalizable en la que se puede configurar el idioma, el tamaño, la tipografía y los colores de todos los elementos, incluido el del botón. También es opcional el mostrar las últimas actualizaciones, que saldrán en su caso en modo de carrousel y mostrando las 8 últimas actualizándose casa 6 segundos.
Google Plus Widget nos facilita el código para poder incluir donde queramos, un botón que permitirá a tus lectores o simpatizantes, añadirte a sus círculos de Google Plus.

El botón se presenta dentro de una caja totalmente personalizable en la que se puede configurar el idioma, el tamaño, la tipografía y los colores de todos los elementos, incluido el del botón.

También es opcional el mostrar las últimas actualizaciones, que saldrán en su caso en modo de carrousel y mostrando las 8 últimas actualizándose casa 6 segundos.

La página está en inglés, pero comenzando por el botón GET WIDGET, accedéis al menú de opciones. Cuando hayáis terminado con GET CODE se os muestra una vista previa y el código para sólo copiar y pegar.



Un truquillo. Si queréis que algún color sea transparente, introducir un asterisco (*) en la casilla correspondiente, en lugar de un código hexadecimal.

Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba