Rotador automático de entradas recientes en blogger

Ya hemos visto cómo mostrar las últimas entradas con miniatura de imagen (Modo simple), mostrar las últimas entradas de una etiqueta específica en la barra lateral e incluso mostrar de forma aleatoria las últimas entradas en el blog.

Han sido muchos quienes me han preguntado si es posible poner un rotador de entradas recientes que se actualice de forma automática en el blog.

Sí se puede, y se realiza usando el mismo script presentado en la primera entrada sobre este tema y la librería jQuery.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade antes uno de estos dos códigos:

Para el gadget con imágenes:

<link href='https://sites.google.com/site/scriptsbalcon/b/bljjultimrotad.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>#bljArticjteSlider {
border: 3px solid #5A9CDD;
background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474;
height: 234px; width: 380px;}
.js #bljArticjteSlider .slides li .entry {background: #8CBAE8;width: 378px;}</style>

Modifica lo siguiente para personalizarlo:

border: 3px solid #5A9CDD; Representa el borde o marco azul. Modifica el ancho (3) a tu gusto, el estilo (solid) con ayuda de esta entrada y el color (#5A9CDD) haciendo uso de la tabla de colores.

background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474; Reemplaza URL IMAGEN por la dirección de tu imagen de fondo (en caso de querer utilizarla). #FBB474 Pertenece al color de fondo (anaranjado) que se utilizará si no incluyes la URL de la imagen.

height: 234px; La altura (234) del recuadro general.
width: 380px; El ancho (380) del recuadro general.

background: #8CBAE8; El color de fondo (azul) del rectángulo que contiene el título.
width: 378px; El ancho (378) del rectángulo que contiene el título.

Para el gadget sin imágenes:

<link href='https://sites.google.com/site/scriptsbalcon/b/bljjultimrotad.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>#bljArticjteSlider {
border: 3px solid #5A9CDD;
background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474;
height: 62px; width: 380px;}
.js #bljArticjteSlider .slides li .entry {background: #8CBAE8;width: 378px;}
#bljArticjteSlider .slides li{height: 62px;}</style>

Modifica lo siguiente para personalizarlo:

border: 3px solid #5A9CDD; Representa el borde o marco azul. Modifica el ancho (3) a tu gusto, el estilo (solid) con ayuda de esta entrada y el color (#5A9CDD) haciendo uso de la tabla de colores.

background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474; Reemplaza URL IMAGEN por la dirección de tu imagen de fondo (en caso de querer utilizarla). #FBB474 Pertenece al color de fondo (anaranjado) que se utilizará si no incluyes la URL de la imagen.

width: 380px; El ancho (380) del recuadro general.

background: #8CBAE8; El color de fondo (azul) del rectángulo que contiene el título.
width: 378px; El ancho (378) del rectángulo que contiene el título.

Guarda la plantilla una vez hayas terminado.

Diseño>añadir gadget (elemento de página)>html-javascript

Incluye esto en su interior:

<div id="bljArticjjteSlider" onmousedown="return false" oncontextmenu="return false" onselectstart="return false"><div><script src="https://sites.google.com/site/scriptsbalcon/b/blgUltimjaime.js" type="text/javascript"></script>
<script language="JavaScript">
blcnJCaImgn = new Array();
blcnJCaImgn[0] = "";
bljjtImagn1 = true;
blcnJCantStl = true;
blcnJCantidad = 10; //
blcnJURLblog = "DIRECCION DE TU BLOG";
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/scriptsbalcon/b/jquerybljjtECycle.js" type="text/javascript"></script>
<script type="text/javascript">
$bljArticjteSlider = { context: false, tabs: false, timeout: 3000, slideSpeed: 1000,
tabSpeed: 1000, fx: 'fade',
init: function() { this.context = $('#bljArticjteSlider'); this.tabs = $('ul.slides-nav li', this.context); this.bljjtescEntrad(); }, bljjtescEntrad: function() { $('div.slides > ul', $bljArticjteSlider.context).cycle({ fx: $bljArticjteSlider.fx, timeout: $bljArticjteSlider.timeout, speed: $bljArticjteSlider.slideSpeed, fastOnEvent: $bljArticjteSlider.tabSpeed, pager: $('ul.slides-nav', $bljArticjteSlider.context), pagerAnchorBuilder: $bljArticjteSlider.prepareTabs, before: $bljArticjteSlider.activateTab, pauseOnPagerHover: true, pause: true }); }, prepareTabs: function(i, slide) { return $bljArticjteSlider.tabs.eq(i); },
activateTab: function(currentSlide, nextSlide) {
var activeTab = $('a[href="#' + nextSlide.id + '"]', $bljArticjteSlider.context);
if(activeTab.length) {
$bljArticjteSlider.tabs.removeClass('on');
activeTab.parent().addClass('on');
}
}
};
$(function() {
$('body').addClass('js');
$bljArticjteSlider.init();
});
</script><div onmousedown="return false" oncontextmenu="return false" onselectstart="return false" id="bljArticjteSlider" class="bljjt1arr"><div class="slides"><script language="JavaScript"> document.write("<script src=\""+blcnJURLblog+"feeds/posts/default/?max-results="+blcnJCantidad+"&orderby=published&alt=json-in-script&callback=blcnBlogEx\"><\/script>");</script></div></div><a href="http://goo.gl/favZ"><img src="http://1.bp.blogspot.com/-oqBw6yjCY20/TYorQxTxfpI/AAAAAAAAGPA/4XbyionN3nQ/s320/main-slider.png"/></a></div></div>

Introduce la dirección de tu blog en donde se indica (con color naranja) así como la cantidad de entradas recientes a mostrar (blcnJCantidad = 10; //).

Para modificar la velocidad a la que rotan las entradas debe aumentarse o disminuirse la cifra 3000 en timeout: 3000.

Recuerda que este truco utiliza jQuery por lo tanto, si usas Scriptaculous, Prototype o Mootools seguramente no podrás utilizarlo.

Guarda el gadget y listo.

Un gadget para que los lectores de tu blog escriban y guarden notas

Esta aplicación permite al lector de un blog dejar cuantas notas o apuntes personales desee.

Una de las grandes ventajas es la de poder guardar el contenido escrito. Tus visitantes podrán, no solo escribir notas, sino también guardarlas de tal forma que aparezcan cada vez que se pulse el botón situado en la barra lateral del blog al acceder al sitio.

Poder apuntar los ingredientes de una receta o coger ideas de un artículo sobre la alimentación del gato sin abandonar la página en la que nos encontramos es comodísimo.

¿La característica que lo hace todavía más atractivo? El uso de jQuery. El widget puede arrastrarse a donde queramos.

Si deseas verlo en acción pulsa sobre la imagen situada a la derecha del artículo. No olvides guardar tu nota al terminarla y acceder nuevamente al blog para comprobar que sigue presente.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade antes estas líneas:

<!-- Gadget Notas Balcon -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptsbalcon/b/bljaimNotas.js' type='text/javascript'/>
<link href='https://sites.google.com/site/scriptsbalcon/b/bljjNota.css' rel='stylesheet' type='text/css'/>
<!-- Fin del Gadget Notas Balcon -->

Guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript

Incluye esto en su interior:

<a href="javascript:notepad.loadpad('mynotepad1')"><img src="http://1.bp.blogspot.com/-1gL12qLy5sM/TX_TGHa3B3I/AAAAAAAABJQ/uhfe9NGIuOE/s320/jaimisnotas.png"/></a>

La línea resaltada en color verde pertenede a la URL del botón 'Mis notas'.

Si prefieres mostrar un enlace con texto en lugar de imagen utiliza este otro código:

<a href="javascript:notepad.loadpad('mynotepad1')">TEXTO</a>

Sustituye TEXTO por el título del enlace que abrirá el gadget.

Con esto incluirás una nota. Para ofrecer la opción de escribir varias notas (y por tanto mostrar más botones) introduce el mismo código, aumentando la cifra numérica del término mynotepad1 (mynotepad2).

Guarda el gadget para terminar.

Por último recuerda que el gadget usa jQuery por lo tanto, si usas Scriptaculous, Prototype o Mootools seguramente no podrás utilizarlo.

Referencia: Dynamic Drive.

Ocultar gadgets en diferentes partes del blog

Desde que publiqué cómo mostrar gadgets solo en la portada del blog o cómo mostrarlos solo al abrir las entradas de forma individual, he recibido muchas consultas acerca de cómo ocultar elementos en diferentes partes del blog.

Diseño > Edición de HTML > Sin expandir artilugios

Lo primero que necesitas es conocer la ID del gadget a ocultar. La ID es un conjunto de caracteres alfanuméricos que sirven para identificar el código perteneciente a dicho elemento de página dentro de la plantilla.

Bastará con localizar el título de nuestro gadget para dar con su respectiva ID:




Como puedes ver en el ejemplo, el marco rojo recoge un término entre comillas simples, después de id=. Este es es el nombre que necesitas.

A continuación busca la etiqueta </head> y justo antes incluye alguno de los siguientes códigos:

Gadget oculto sólo en la portada del blog

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#IDELEMENTO {visibility: hidden;display: none;}
body#layout #IDELEMENTO {display:block !important;}
</style>
</b:if>

Gadget oculto sólo al acceder a las entradas de forma individual

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#IDELEMENTO {visibility: hidden;display: none;}
body#layout #IDELEMENTO {display:block !important;}
</style>
</b:if>

Gadget oculto sólo en las páginas estáticas del blog

<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#IDELEMENTO {visibility: hidden;display: none;}
body#layout #IDELEMENTO {display:block !important;}
</style>
</b:if>

Gadget oculto sólo en una entrada específica o en entradas con una etiqueta específica

<b:if cond='data:blog.url == "DIRECCION ENTRADA O ETIQUETA"'>
<style type='text/css'>
#IDELEMENTO {visibility: hidden;display: none;}
body#layout #IDELEMENTO {display:block !important;}
</style>
</b:if>

Gadget oculto sólo en las páginas del archivo del blog

<b:if cond='data:blog.pageType == "archive"'>
<style type='text/css'>
#IDELEMENTO {visibility: hidden;display: none;}
body#layout #IDELEMENTO {display:block !important;}
</style>
</b:if>

Reemplaza IDELEMENTO por la ID del gadget que encontraste anteriormente (debe incluirse dos veces).

Guarda la plantilla y comprueba el resultado accediendo a tu sitio.

El gadget de etiquetas en forma de menú

Casi todas las semanas me preguntan cómo incluir un enlace hacia un grupo de entradas en un menú de Blogger, de tal forma que el contenido se vea organizado.

Para conseguir esto, antes es necesario ordenar los posts con etiquetas. El enlace de éstas mostrará un listado con el contenido correspondiente.

¿Y qué mejor que hacer uso del propio gadget de etiquetas ofrecido por Blogger para fabricar un menú de navegación?

A continuación puedes ver una imagen del resultado tanto en vertical como en horizontal:

Diseño > Edición de HTML > sin expandir artilugios

Localiza esta línea en tu plantilla:

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

Ahora, justo debajo añade uno de estos dos códigos:

Para el menú vertical:

<b:widget id='Label74' locked='false' title='MENU Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if><div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<div id='blcjEtiqjte'>
<ul>
<li style='border-color:#e3cf8c;background:#f4e6b8;'><a expr:href='data:blog.homepageUrl' style='color:#000000;font-weight:bold;'>Inicio</a></li>
<b:loop values='data:labels' var='label'>
<li>
<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/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</li>
</b:loop>
</ul></div><style>
#blcjEtiqjte ul li {text-indent: 0;background: #FDF7A5;border: 2px solid #F9DB7B;margin-bottom: 4px;padding: 6px 8px;list-style: none outside none;}
#blcjEtiqjte a:link, #blcjEtiqjte a:visited {color: #817143;font-family: Arial,helvetica,sans-serif;text-decoration: none;}
#blcjEtiqjte [dir="ltr"] {color:#c8141a;}
</style>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<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/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Para el menú horizontal:

<b:widget id='Label74' locked='false' title='MENU Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if><div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<div id='blcjEtiqjte'>
<ul>
<li style='border-color:#e3cf8c;background:#f4e6b8;'><a expr:href='data:blog.homepageUrl' style='color:#000000;font-weight:bold;'>Inicio</a></li>
<b:loop values='data:labels' var='label'>
<li>
<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/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</li>
</b:loop>
</ul></div><style>
#blcjEtiqjte ul li {background: #FDF7A5;border: 2px solid #F9DB7B;float: left;list-style: none outside none;margin-bottom: 4px;margin-right: 6px;padding: 6px 8px;text-indent: 0;}
#blcjEtiqjte a:link, #blcjEtiqjte a:visited {color: #817143;font-family: Arial,helvetica,sans-serif;text-decoration: none;}
#blcjEtiqjte [dir="ltr"] {color:#c8141a;}
</style>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<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/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Las líneas que destaco en color rojo pertenecen al color de fondo y al estilo del borde que presenta el menú.

background: #FDF7A5; Es el color de fondo. Haz uso de la tabla de colores para obtener el código de tu tonalidad favorita o utiliza una imagen de fondo personal, reemplazando la línea por esto:

background: url("URL IMAGEN") repeat scroll 0 0 transparent;

Inserta la dirección de la imagen en URL IMAGEN y listo.

border: 2px solid #F9DB7B; Es el aspecto del borde o marco. Modifica su grosor aumentando o disminuyendo la cifra 2. Para hacer uso de otro estilo, sustituye solid por los términos citados en este otro tutorial. Finalmente el color, #F9DB7B Con la tabla de colores podrás cambiarlo.

Guarda la plantilla y entra en Diseño > Elementos de la página para arrastrar el gadget de etiquetas hasta el lugar idóneo (bajo la cabecera para el horizontal o en la barra lateral para el vertical).

Notas:

- Para guardar los gadgets sin título revisa esta entrada.
- Accede a este artículo para eliminar el título del gadget pero conservarlo en el apartado de Diseño > Elementos de la página.
- Si tienes problemas para guardar los cambios, utiliza el buscador de tu navegador (presionando las teclas Ctrl y F) para dar con este término: Label74. Bastará con editarlo: Label75.

Gadget de visitantes recientes en Blogger

Este gadget de visitantes recientes para blogger muestra la imagen del perfil de cada usuario que ha entrado a tu blog recientemente.

1) Haz clic sobre el siguiente botón y configura el gadget a tu gusto:

Incluye un título y modifica su altura...




2) Pulsa en guardar y en unas horas notarás que tu lista de visitas recientes muestra imágenes o avatares:



Ten en cuenta que este artilugio no almacena las visitas totales de un lector, sino las recientes. No tiene una apariencia permanente, es decir, no siempre aparecerán las mismas caras.

Dependiendo del tráfico que tenga tu blog, se actualizará con mayor o menor frecuencia.

Mostrar gadgets solo en las entradas del blog

En el post anterior aprendimos a mostrar cualquier gadget sólo en la portada del blog o página principal, consiguiendo que cuando el lector haga click en una entrada los gadgets modificados permanezcan ocultos.

Ahora haremos lo opuesto, es decir, ocultar algunos gadgets en la portada y mostrarlos al acceder a cualquier otro apartado del blog (a una entrada de forma individual, a las páginas de archivo...).

Diseño>Edición de HTML>expandimos artilugios

Busca el código del gadget y añade lo que resalto en color rojo:

<b:widget id='HTML2' locked='false' title='Visitas del blog' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<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>

Como puedes ver, el procedimiento es idéntico al explicado anteriormente, con la única excepción de que la primera línea, la condicional, ha cambiado.

Al igual que expliqué en el artículo anterior, no importará que el código sea distinto por tratarse de otro gadget dado que las líneas que actuarán como guía son siempre las mismas:

<b:includable id='main'> (después de la cual se incluye la primera línea) y </b:includable> (antes de la cual incluimos el cierre).

Si no encuentras el código de un gadget en particular, sigue las pautas ofrecidas al final de este tutorial.

Guarda la plantilla y comprueba el resultado para terminar.

Video Galería en el blog

En varias ocasiones me han preguntado por la posibilidad de incluir una galería de vídeos en el blog, creando así una especie de lista de reproducción en donde podamos incrustar múltiples vídeos para que los lectores puedan elegir.

Antes de presentar nada me gustaría aclarar que al introducir vídeos en nuestras, el único parámetro que verdaderamente puede verse seriamente afectado es el tiempo que tarda en cargar la página.

Me he propuesto llevar a cabo un experimento, basándome en las consultas enviadas, que permite mostrar en el blog una video-galería con una cifra ilimitada de vídeos de YouTube a incluir.

Una de las ventajas que presenta es el hecho de que muestra un solo reproductor y las miniaturas del resto de vídeos. Esto, sin duda, acelerará la carga del blog y evitará problemas al mostrar contenido.

A continuación te muestro una imagen con el resultado:

Diseño>Edición de HTML>expandimos artilugios

Localiza la etiqueta </head> en tu plantilla y añade esto justo antes:

<script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js' type='text/javascript'/><link href='https://sites.google.com/site/scriptsbalcon/b/blJJbalconVidg.css' media='screen' rel='stylesheet' type='text/css'/>

Seguidamente guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código en su interior:

<div id="blJJVideoGal3">.</div>
<div id="blJJVideoGal1">
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO1');"><img src="http://img.youtube.com/vi/BLIDVIDEO1/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO2');"><img src="http://img.youtube.com/vi/BLIDVIDEO2/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO3');"><img src="http://img.youtube.com/vi/BLIDVIDEO3/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO4');"><img src="http://img.youtube.com/vi/BLIDVIDEO4/1.jpg" /></a>
</div>

<div id="blJJVideoGal2">Cargando ...</div><script type="text/javascript">swfobject.embedSWF(
'http://www.youtube.com/v/BLIDVIDEOGENERAL&enablejsapi=1&rel=0&fs=1',
'blJJVideoGal2',
'400','344', '8',null,null,
{allowScriptAccess: 'always',allowFullScreen: 'true'},
{id: 'balconJJrplay'}); document.write('<a href="http://goo.gl/4xVx"><img style="float:right;margin-right:10px;" src="https://lh5.googleusercontent.com/_Bvhqq3YFEx4/TVguljQ-0JI/AAAAAAAABAU/orIeAXs-ZLY/functionv.png"/></a>'); function blJJTEfun1vidjaime(id) {
var o = document.getElementById( 'balconJJrplay' );
if( o ) {o.loadVideoById( id );} } </script>

<div id="blJJVideoGal3">.</div>
<div id="blJJVideoGal1">
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO5');"><img src="http://img.youtube.com/vi/BLIDVIDEO5/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO6');"><img src="http://img.youtube.com/vi/BLIDVIDEO6/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO7');"><img src="http://img.youtube.com/vi/BLIDVIDEO7/1.jpg" /></a>
<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO8');"><img src="http://img.youtube.com/vi/BLIDVIDEO8/1.jpg" /></a>
</div>

Ahora solo tendrás que añadir los vídeos.

Reemplaza BLIDVIDEOX por la combinación de caracteres que posee la dirección de un vídeo (ten en cuenta que debe incluirse dos veces).

Para conseguir esta combinación bastará con acceder a YouTube y posteriormente abrir un video de forma individual. En la barra de direcciones de tu navegador podrás ver algo parecido a esto:



Lo que he resaltado en color rojo es la ID o número de identificación necesario. Debes extraérselo a cada video para poder insertarlo en tu galería.

Donde dice BLIDVIDEOGENERAL tendrás que escribir la ID del vídeo que aparecerá por defecto en el reproductor al abrir el blog.

Por último, cabe decir que para añadir más vídeos solo tienes que agregar líneas como esta:

<a href="javascript:blJJTEfun1vidjaime('BLIDVIDEO8');"><img src="http://img.youtube.com/vi/BLIDVIDEO8/1.jpg" /></a>

Debes hacerlo siempre antes del cierre </div>, tanto de una lista como de otra. El código general de las listas de reproducción aparece entre las líneas de color azul (éstas incluidas) por lo que podrás, o bien poner un gran número de vídeos en las dos listas actuales o bien crear listas nuevas para ordenar el contenido.

Guarda el gadget una vez hayas terminado.

Mostrar gadgets solo en la portada del blog

El tiempo de carga de una página suele ser por lo general el mayor problema que muestran todos los blogs, pudiendo no solo hacer que los lectores dejen de visitarlos sino también dificultar el acceso al contenido publicado.

Los gadgets que instalamos en la sidebar o barra lateral son, la mayoría de veces, culpables.

Algunos son fundamentales por la información o las ventajas que ofrecen pero otros no hacen más que sobre cargar el sitio web. No queremos eliminarlos y por ello simplemente haremos que se muestren exclusivamente en la página principal o portada, evitando así que el visitante pueda verlos al acceder a una entrada de forma individual.

La explicación está basada en un gadget html-javascript aunque el mismo método puede aplicarse a cualquier otro (el de Seguidores o el de Lista de blogs, por ejemplo).

Diseño>Edición de HTML>expandimos artilugios

Busca el código del gadget y añade lo que resalto en color rojo:

<b:widget id='HTML2' locked='false' title='Visitas del blog' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<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>

Tal y como puedes ver, la primera línea aparece justo después de <b:includable id='main'> y su correspondiente cierre justo antes de </b:includable>.

Con este par de aclaraciones no importará que el código sea distinto por tratarse de otro gadget dado que las líneas previamente citadas aparecerán siempre.

Recuerda que para encontrar el código de un gadget en tu plantilla con facilidad, bastará con incluirle antes de acceder al apartado de Diseño>Edición de HTML, un título único.

Posteriormente y haciendo uso del buscador de tu navegador (puede abrirse presionando las teclas Ctrl y F simultáneamente) escribiremos el título.

Aplicando el truco a varios gadgets lograremos que en la portada todos queden visibles, pero al abrir un artículo se ocultarán y quedarán visibles aquellos a los que no les hayas aplicado la modificación.

Guarda la plantilla y habrás terminado.

Tabs o pestañas en blogger (II) 20 diseños a elegir

Hace tiempo aprendimos a poner en la barra lateral del blog, un artilugio que mostraba contenido por medio de solapas: las Tabs o Pestañas. Tal y como expliqué anteriormente, resulta de mucha utilidad pues nos ayudará a encajar el contenido que por motivos de espacio no puede implementarse en la barra lateral.

En esta entrada presento una nueva versión, basada en la librería jQuery y con un total de 20 modelos a elegir, de manera que utilices el que mejor se ajuste al diseño de tu blog.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> en tu plantilla y justo antes añade esto:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>

Ahora, observando la imagen, agrega bajo los bloques que acabas de insertar, una línea de código dependiendo del modelo escogido.




Desplegar códigos [+/-]

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab1.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab2.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab3.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab4.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab5.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab6.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab7.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab8.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab9.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab10.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab11.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab12.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab13.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab14.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab15.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab16.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab17.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab18.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab19.css" type="text/css" />

<link rel="stylesheet" href="https://sites.google.com/site/scriptsbalcon/b/balconjaimeJJtab20.css" type="text/css" />

Finalmente, procederemos a introducir el contenido de cada pestaña.

Diseño>añadir gadget (elemento de página)>html-javascript

Incluye esto en su interior:

<div id="tabs">
<ul><li><a href="#tabs-1">PESTAÑA 1</a></li><li><a href="#tabs-2">PESTAÑA 2</a></li><li><a href="#tabs-3">PESTAÑA 3</a></li></ul>
<div id="tabs-1">CONTENIDO PESTAÑA 1</div>
<div id="tabs-2">CONTENIDO PESTAÑA 2</div>
<div id="tabs-3">CONTENIDO PESTAÑA 3</div>
<center><a href="http://goo.gl/favZ"><div id="bbTabsQuery"><img src="http://1.bp.blogspot.com/_Bvhqq3YFEx4/TPwSxsIYLFI/AAAAAAAAAf0/bSVBmFIq5Nc/s320/aleman.png"/></div></a></center>
</div>

Reemplaza en el código PESTAÑA X por el título que llevará la pestaña y CONTENIDO PESTAÑA X por el contenido que mostrará cada solapa.

Ten en cuenta que el término contenido abarca mucho más que texto por lo que podrás mostrar imágenes, enlaces e incluso un reproductor de música.

Guarda el gadget una vez hayas terminado.

Ultimas entradas de una etiqueta en particular en el blog (script)

Mostrar las últimas entradas en nuestro blog es un complemento muy útil para los lectores que desean acceder con facilidad y rapidez al contenido recientemente publicado. Son muchos los procedimientos que ya hemos visto para instalar esta herramienta. Ultimas entradas con miniatura de imagen, Últimas entradas en movimiento (widget de control manual) e incluso Mostrar las últimas entradas de una etiqueta específica.

Este último truco es el que precisamente explicaré en esta entrada. No se trata del mismo tutorial sino que he dado con otro procedimiento más simple y efectivo para mostrar lo mismo: una lista con los títulos de tus últimos artículos bajo una etiqueta en particular.

A continuación te muestro una imagen del resultado:

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> en tu plantilla y justo antes añade estas líneas:

<script src='https://sites.google.com/site/editoriosus/fds/UltimsblJtetiq.js'/><link href='https://sites.google.com/site/editoriosus/fds/blJtetik.css' media='screen' rel='stylesheet' type='text/css'/><style>#UltimblJtetiqu a {background: url("http://lh5.ggpht.com/_Bvhqq3YFEx4/TTMXkGiFwjI/AAAAAAAAAw8/DqiROE0Y9u4/blJJbul2.png") no-repeat scroll 0 -6px transparent;}</style>

Seguidamente guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript

Agrega esto en su interior:

<div id="UltimblJtetiqu"><script src="http://TUBLOG.blogspot.com/feeds/posts/default/-/ETIQUETA?max-results=10&alt=json-in-script&callback=blJtetiq"></script></div>

Reemplaza TUBLOG por la dirección de tu blog (no hace falta que incluyas el http:// o el .blogspot.com ya que tal y como puedes ver ha sido insertado).

En ETIQUETA escribe la etiqueta tal y como aparece en tus entradas (con sus mayúsculas, minúsculas, tildes, acentos...) de manera que los últimos posts puedan mostrarse.

En la línea max-results=10 puedes controlar el número de títulos que aparecerán. Aumenta o disminuye la cifra (10).

Guarda el gadget para terminar.