Mensajes relacionados con miniaturas : Link Within

Se que lleva tiempo por los blogs pero yo lo acabo de instalar, me ha parecido muy simple y sobre todo muy vistoso.  Son las entradas relacionadas con una imagen que se instalan desde http://www.linkwithin.com/ casi automáticamente.

Acceder a la página web mencionada, y rellenar los datos que se piden:

Pulsar el botón Get Widget cuando este todo relleno, y en la siguiente pantalla clickar sobre Install Widget para que se instale automáticamente.  Luego solo quedará ir a Blogger, Diseño y recolocar el gadget al final de las entradas.

Día 11 / 11 / 11 comienzo con cambios en el diseño

El día ONCE del mes ONCE del año ONCE ha sido un largo día de trabajo esperando el sorteo de la ONCE (Organización Nacional de Ciegos de España).  La idea de poderme jubilar ya, se me hacía muy apetitosa … pero la diosa de la Fortuna no me tiene entre sus favoritos.

También ha sido el día en que he leído el correo que 20minutos anuncia la puesta en marcha del concurso Premios 20 Blogs.  Y como la ilusión de jubilarme se ha ido al traste he decidido distraer mi mente calenturienta participando dignamente en el concurso de los blogs, que el año pasado me sirvió para darme a conocer entre los internautas.

Viendo mis blogs un tanto sobrecargados, me parece que está todo demasiado amontonado, … he decidido adecentarlos un poco para participar en el concurso de la Blogoteca.   La idea principal es hacerlos menos densos y aprovechar la opción ‘páginas’ que Blogger instauró hace un tiempo y yo no he puesto en marcha todavía.

Así que durante un tiempo estaremos en obras.  Presento de antemano mis disculpas a los usuarios habituales.  Espero no tardar mucho en concluir los cambios, y como siempre anotaré con sumo cuidado como lo he hecho todo, no solo para que no se me vaya a olvidar, sino para que todos los lectores sepan como se hace.  Explicaré cada paso en las siguientes entradas.

Lo primero y fundamental es hacer una copia de seguridad de la página tal como está ahora … por si acaso la liamos:

1. En el escritorio de Blogger seleccionamos el blog y a la derecha de la pantalla con la opción ‘Plantilla’ hay un botón para ello: ‘Crear copia de seguridad/Restablecer’.  Pulsar el botón ‘Descargar plantilla completa’  y seguir las instrucciones.
2. No es que esté obsesionado por guardar bien mis cosas, pero hago también una copia completa con un editor de textos como Wordpad o Bloc de Notas entrando por ‘Plantilla’, ‘Edición de HTML’, seleccionando ‘Expandir plantillas de artilugios’, selecciono todo el código, y a Copiar/Pegar en el documento txt.

Después de estas imprescindibles medidas de seguridad empezamos a trabajar de verdad. 

En ‘Plantilla’, hay que pulsar el botón ‘Personalizar’  para entrar en el Diseñador de plantillas de Blogger.  Como se trata de empezar con algo muy simple he optado por la plantilla ‘Sencillo’, da igual la combinación de colores, porque luego ya la personalizaré a mi gusto.  Para la distribución del diseño he elegido las siguientes opciones: los gadgets a la derecha con una y dos columnas, y el pie de página doble.  Creo que así tendré todas las opciones de organización posibles.

 

Ya solo queda ‘Aplicar al blog’ para poder empezar a personalizarlo todo.  Pero esto … es otra historia que comentaré en las siguientes entradas.

Revolver Maps

Lo he visto como gadget en una página y resulta muy llamativo.  Es un globo terráqueo en movimiento, donde se muestra el origen de los últimos visitantes a tu página.  Está disponible como una versión de Java, así como una versión de Flash.  Cada visitante deja un punto fijo en el globo, los visitantes recientes son marcados por las etiquetas que muestran la bandera, ciudad y estado.  Para ponerlo en tu blog solo tienes que visitar la web de Revolver Maps, que en perfecto inglés te invita a instalarlo en tu página.  Como ejemplo muestro la versión estándar.

Traductor de Google

Me ha parecido recomendable incluir un traductor automático para que los que no conocen el idioma castellano (o español) puedan leer mis entradas.  He optado por incluir un gadget  que ofrece Google, tras sopesar seriamente la opción de poner iconos con banderas de los idiomas elegidos (como explica Pizcos).  Después de probar ambas opciones, esta última no funciona correctamente con mi blog, así que explico como agregar el traductor, que aunque no sea tan elegante obtiene mejores resultados.

En diseño de Blogger añadir un gadget HTML/Javascript con el siguiente texto:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'es',
    includedLanguages: 'de,ca,eu,fr,gl,en,pt'
  }, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Si queréis elegir los idiomas, o poner todos, el código se puede conseguir en Google Traductor.

Unión de varios gadgets

Para evitar la separación que genera Blogger entre los gadget, una posibilidad sencilla es unir varios de tipo HTML en uno solo.  Quiero decir, en lugar de crear uno para cada cosa que pongamos en la sidebar, habrá que copiar los códigos unos a continuación de otros.  Así podemos controlar la separación si es necesario con <br/> (salto de línea) y no tendremos la marcada por Blogger.

He hecho esto en varios de los gadgets que veis.  Entre otros:

• Estadísticas de visitas y contador de entradas y comentarios.
• Botones Añadir a favoritos y Voy a tener suerte (entradas al azar)

Solo es cuestión de gustos, y de no estirar demasiado la sidebar.

Contador de visitas

Uno de los gadgets más comunes en todos los blog.  Es muy importante conocer quienes nos visitan, de donde son, que navegadores usan para adaptar el blog, etc. 

Al principio instalé un contador simple de http://www.contadorgratis.es/.  La única ventaja es que está todo en castellano.  Pero no me aportaba suficiente información, es simplemente un contador de hits.

He optado por el contador de http://www.histats.com/.  Aunque esté en inglés es sencillo de instalar y gratuito.  Hay que registrarse con una cuenta de correo válida (Mail) y elegir una contraseña (Password).  Una vez validado el registro se pueden añadir varias páginas (Add a website), elegir uno de los miles de diseños y añadir un gadget HTML con el código que te ofrecen.

Y las estadísticas que te da son impresionantes:

• Páginas vistas, visitantes y nuevos visitantes de hoy, ayer, últimos 7, 30 o 60 días.
• Lenguaje de los visitantes, su navegador, sistema operativo y resolución de pantalla.
• Localización por países y ciudades de los visitantes.
• Desde que páginas te han enlazado.
• Buscadores que han usado y las palabras clave que han puesto.
• Y aún hay más datos que no suelo usar.

Con estos datos te puedes hacer una idea muy precisa de quien visita tu blog.

Entradas al azar

Una interesante forma de que los visitantes de tu blog vean entradas antiguas es el gadget de entradas al azar.  Lo he puesto con un simple botón input, emulando el estilo de Google “Voy a tener suerte”.

En Diseño, Elementos de la página, añadir un gadget HTML con el siguiente código:

<div id="myLuckyPost"></div>
<script type="text/javascript">
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].href;
}
}
}
function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<a href="#random" onclick="feelingLucky()" title="Entrada al azar"><input value="Voy a tener suerte" name="btnI" type="submit"/></a>

Se puede poner el botón centrado añadiendo al principio y al final las líneas <center> y </center> respectivamente.

Contador de Entradas y Comentarios

Siempre me han parecido interesantes las estadísticas.  Un gadget muy interesante para saber la evolución de tu blog es este tipo de contador.  Se crea un nuevo gadget en la sidebar con el siguiente código.

<!-- NUMERO DE COMENTARIOS Y ENTRADAS -->
<div style="float: left;"><img style="width: 48px;" src="URL de la Imagen"/></div>
<div style=" float: left;  text-align: left;">
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src="http://URL de tu BLOG/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script> <span style="font-family: trebuchet; color:
#1d0099;font-size: 10px;">ENTRADAS</span>
<br/>
<script src="http://URL de tu BLOG/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"></script> <span style="font-family: trebuchet; color:
#1d0099;font-size: 10px;">COMENTARIOS</span></div>

Recuerda cambiar la URL de tu blog, y la dirección de la imagen a mostrar.  Puedes modificar el color y el tamaño o la fuente de la letra:

"font-family: trebuchet; color:#1d0099;font-size: 10px;"

Añadir a favoritos

En un nuevo gadget he colocado un botón input para que puedan guardar el blog como favorito, y así, los interesados por tu blog pueden volver a tu página fácilmente.

En Diseño, Elementos de la página, hay que añadir un gadget HTML con el siguiente código:

<center>

<!— AÑADIR A FAVORITOS -->
<span style="CURSOR: hand" onclick="window.external.AddFavorite('URL DE TU BLOG','TITULO DE TU BLOG');"><span><input value=" Añadir a favoritos " onclick="javascript:agregar();" type="button"/></span></span>

</center>

Pon el nombre y el título de tu blog en el sitio correspondiente y a guardar.  Las líneas <center> y </center> son optativas y sirven para centrar el botón en la sidebar.  Si tuvieras un favicon personalizado, lo mostrará en la lista de favoritos.

Expandir y contraer gadget con Scriptaculous

Ya que tengo instalado el javascript de Scriptaculous (para el botón ir arriba), he decidido aprovecharlo y mantener recogido el gadget “Archivo del Blog”, que aunque me parece necesario, resulta de apariencia extraña.  Estoy convencido de que la nube de etiquetas es mas útil para la navegación por la página, y siempre queda el botón “voy a tener suerte” para aventurarse por antiguas o desconocidas entradas.

Para ello he seguido las instrucciones que describe El Escaparate de Rosa y que vienen a ser las siguientes:

En Edición HTML de nuestro panel, marcamos la casilla de expandir las plantillas de artilugios y localizamos el gadget que nos interesa por la línea de código que marca su comienzo y en la que podemos ver su título:

<b:widget id='HTML4' locked='false' title='Archivo del Blog' type='HTML'>

Una vez localizado el gadget, añadimos estas líneas de código que veis en otro color tomando como referencia el resto de código del gadget:

<b:widget id='HTML4' locked='false' title='Posts populares' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;ARCHIVOBLOG&quot;,&quot;slide&quot;); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='ARCHIVOBLOG' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Es muy importante recordar que siempre que se use el javascript de Scriptaculous hay que elegir una variable diferente para controlar correctamente el div (en este caso ARCHIVOBLOG), que tiene que ser única e irrepetible en el resto de la plantilla.

Nube de etiquetas con estilo CSS

Las etiquetas son la mejor manera de navegar por la página consiguiendo encontrar lo que buscas de una manera muy sencilla.  Una vez instalado el gadget de etiquetas original de blogger, con la opción nube, el estilo queda demasiado simple.  Para darle formato he añadido el siguiente código justo antes de la etiqueta ]]></b:skin>.

/* ESTILO NUBE */
.cloud-label-widget-content {
width:100%;
margin:0px auto;
}
.cloud-label-widget-content span {
float:center;
}
.cloud-label-widget-content span a {
line-height:12px;
}
.cloud-label-widget-content span a:hover {
background:#cbbfff;
text-decoration:none;
}
.label-size-1 a, .label-size-1 a:link, .label-size-1 a:visited {
font-size:12px;
margin:15px 0px 0px 15px;
color:#000000;
}
.label-size-2 a, .label-size-2 a:link, .label-size-2 a:visited {
font-size:14px;
margin:12px 0px 0px 12px;
color:#0066CC;
}
.label-size-3 a, .label-size-3 a:link, .label-size-3 a:visited {
font-size:16px;
margin:10px 0px 0px 10px;
color:#2BA94F;
}
.label-size-4 a, .label-size-4 a:link, .label-size-4 a:visited {
font-size:19px;
margin:8px 0px 0px 8px;
color:#9D1961;
}
.label-size-5 a, .label-size-5 a:link, .label-size-5 a:visited {
font-size:22px;
margin:5px 0px 0px 5px;
color:#999999;
}

Cambiando los códigos de color y los píxeles de los márgenes, podremos personalizarlo a nuestro gusto.  Está modificado del código que publica Oloblogger.

Botón ir arriba

Puesto que suele estar en las primeras posiciones del blog lo más interesante, y sobre todo, para ayudar a que sea lo más navegable posible, he incluido un botón en la parte inferior derecha de la pantalla para volver arriba consiguiendo un efecto scroll muy elegante.  Como en tantas ocasiones El Escaparate de Rosa ha sido de gran ayuda.

Para ello hay que incluir antes de </head> el siguiente código que cargara el script Scriptaculous, si no se ha usado antes para algún otro efecto:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous—>

Para acabar hay que insertar la imagen que queramos en una posición fija en la pantalla.  Antes de la etiqueta </body> y con Expandir plantillas de artilugios marcado, poner las siguientes líneas:

<!-- BOTON FLECHA ARRIBA -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img alt='Ir Arriba' border='0' src='Url-de-flecha-arriba' style='position:fixed; bottom:0; right:0;' title='Ir Arriba'/></a>

Sustituir la Url de la imagen que tengas seleccionada y ya se puede guardar la plantilla.

En las plantillas nuevas de Blogger también habrá que hacer lo siguiente:

Buscar esta línea:

<div class='body-fauxcolumns'>

Y cambiarla por esta otra:

<div id='outer-wrapper' class='body-fauxcolumns'>

Luego buscar esta línea:

<div class='content-cap-bottom cap-bottom'>

Y cambiarla por esta:

<div id='footer-wrapper' class='content-cap-bottom cap-bottom'>

Barra de progreso de carga

Para que se note claramente hasta cuando se están cargando datos de la página he incluido una típica barra de progreso en la sidebar.  En el momento que se termina la carga desaparece.

Se pueden encontrar muchos modelos en imágenes de Google, después de elegir el que deseamos instalar y subirlo a nuestro alojamiento (yo uso Google Sites), hay que poner el siguiente script justo antes del código </head>

<!-- SCRIPT DE USUARIO: BARRA PROGRESO DE CARGA -->
  <script type='text/javascript'>
  window.onload = detectarCarga;
  function detectarCarga(){
  document.getElementById(&quot;imgLOAD&quot;).style.display=&quot;none&quot;;
}
</script>
Luego nos quedará ir a Diseño, Elementos de página y Añadir un gadget HTML/Javascript con el siguiente bloque de código:

<div id="imgLOAD" style="TEXT-ALIGN: center">
<img src=”URL DE LA IMAGEN BARRA DE CARGA”/>
</div>

Añadir segunda sidebar

Mi idea es conseguir una plantilla de ancho fijo (en pixeles), y con el diseño optimizado para una resolución de 1024 pixeles de ancho, que hoy por hoy, es la configuración de pantalla más habitual.  Para ello he elegido “Seleccionar una plantilla nueva” en Diseño y he optado por la plantilla Mínima.

Después en Edición de HTML, y con Expandir plantillas de artilugios marcado he cambiado las dimensiones del siguiente modo:

Localizar (con control – F) en el código la etiqueta “outer-wrapper”  y he modificado los datos que están en color:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 1000px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
#main-wrapper {
  width: 650px;
  padding:5px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
#sidebar-wrapper {
  width: 150px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
Justo debajo de este código he añadido el siguiente:
#newsidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

A continuación hay que localizar el código siguiente: “div id='main-wrapper'” y justo antes de esta línea añadir el código:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Guardamos cambios en la plantilla y listo.  Tenemos una nueva sidebar en el lado izquierdo con un ancho de 200 pixeles, el bloque para las entradas de 650 pixeles, y la sidebar original a la derecha de 150 pixeles.  Sólo queda ir a Elementos de la página y organizar los gadget a nuestro gusto.