Entradas resumidas estilo magazine (3)

Después de haber visto cómo hacer las entradas resumidas estilo magazine uno y dos, vamos a finalizar con esta tercera opción que se adecua para los blogs de fotografía, por lo que haremos que la plantilla parezca una galería de imágenes incluyendo ventanas modales.

Puedes ver un ejemplo funcionando en este blog de pruebas y haz click en cualquier imagen.

El procedimiento es mucho más sencillo que los dos anteriores ya que no requiere de ningún script para hacer resúmenes, sólo condicionaremos la forma que se mostrarán en la portada y nos valdremos de Shadowbox para las ventanas modales aunque eso es opcional.

El primer paso es entrar a Plantilla | Edición de HTML y pegar antes de </head> lo siguiente:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#sidebar-wrapper { /* Con esto ocultamos la sidebar de la portada */
display: none;
visibility: hidden;
}
#main-wrapper {
width: 830px; /* Ancho del blog en la portada */
}
.post {
border: 10px solid #424242; /* Color y tamaño del borde */
float: left;
height: 175px; /* Alto de cada contenedor */
width: 175px; /* Ancho de cada contenedor */
margin: 6px; /* Distancia entre cada contenedor */
padding: 0;
overflow: hidden;
}
.post-body {
padding:0;
margin:0;
}
.post h3 {
padding: 0;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color: #BDBDBD; /* Color del título de las fotos */
background: #424242; /* Color de fondo del título */
margin: -5px -5px 0 -5px;
text-align: center;
}
h3.post-title, .post-header {
margin: 0;
background:#424242; /* Color de fondo del título */
}
.post img {
height: 175px; /* Alto de la foto en miniatura */
width: 175px; /* Ancho de la foto en miniatura */
float: left !important;
border: 0;
padding:0;
margin:0;
}
.post-outer, .inline-ad {
padding-top: 0px !important;
}
.post-outer {
padding-bottom: 0px;
}
h2.date-header { /* Con esto ocultamos la fecha */
display: none;
visibility: hidden;
}
#blog-pager {
clear: both;
}
</style>
</b:if>
</b:if>

Con ese simple paso ya tenemos las entradas en columnas tipo revista, ahora viene la personalización que es la parte más importante.

En la primer parte ocultamos la sidebar de la portada con el fin de que tenga más espacio para mostrar más imágenes y para que se vea realmente como una galería.

El segundo bloque que dice /* Ancho del blog en la portada */ es la suma del ancho del #main-wrapper más el ancho del #sidebar-wrapper, por ejemplo, si el #main-wrapper tiene 600px de ancho y el #sidebar-wrapper tiene 220px de ancho entonces la medida que pondremos será de 880px

El nombre de estos contenedores está basado en las plantillas clásicas de Blogger, así que en las nuevas y otras modificadas el nombre será distinto, ya será cuestión de que cada quien identifique el nombre y ancho de estos contenedores.

Ya que hemos establecido el ancho del blog entonces procederemos a ajustar el ancho y alto de los contenedores de las fotos así como el ancho y alto de las fotos miniatura. Eso se hace donde se indica en color verde, ahí tomaremos en cuenta que entre más pequeñas sean las miniaturas más columnas de fotos cabrán en el blog.

También configura el número de entradas a mostrar en la página principal de modo que nunca vaya a quedar vació un espacio, por ejemplo, si ajustaste el tamaño para mostrar columnas de tres entradas entonces deberás configurar el blog para que muestra 6, 9, 12 o 15 entradas en la página principal; si fueran columnas de dos entonces tendrás que mostrar ya sea, 4, 6, 8 o 10 entradas.
Para hacerlo ve a Configuración | Formato | Mostrar un máximo de y ahí elige el número de entradas que se mostrarán.

Un dato que hay que tomar muy en cuenta es que si agregas texto a la entrada éste deberá estar debajo de la imagen, de lo contrario el texto se mostrará encima de la miniatura y se verá mal.

Por último y a modo opcional vamos a agregar Shadowbox para que las fotos de la galería tanto en la entrada individual como en la portada se vean dentro de una ventana modal.

Para ello descarga este archivo, descomprímelo y sube los archivos a un hosting.

Luego entra de nuevo en Plantilla | Edición de HTML y antes de </head> esto:

<link href='URL del archivo css' rel='stylesheet' type='text/css'/>
<script src='URL del archivo js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: &quot;#000&quot;,
overlayOpacity: &quot;0.6&quot;,
});
</script>

Sustituye lo que está en color rojo por las URLs de los archivos que se indican y que subiste previamente.

Lo último es lo más simple, sólo creamos una entrada y cargamos la foto, en la pestaña Edición de HTML (no en la de Redactar) veremos el código de la imagen, será algo como esto:

<a rel="shadowbox" title="Título de la imagen" href="http://3.bp.blogspot.com/_dsEG33PDaHw/THf2fvKHVfI/AAAAAAAAAU8/o1827ZGOWEM/s1600/11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="http://3.bp.blogspot.com/_dsEG33PDaHw/THf2fvKHVfI/AAAAAAAAAU8/o1827ZGOWEM/s400/11.jpg" width="400" /></a>

Lo único que hacemos es agregar lo que está en color rojo y ya, con eso la imagen se abrirá en una ventana modal. Agrega donde se indica el título de la fotografía, ese título aparecerá arriba de la imagen una vez que se muestre.

Si deseas que la foto sea parte de una galería de imágenes entonces en lugar de poner rel="shadowbox", deberás agregar esto:

rel="shadowbox[galeria1]"

Cambia el nombre galeria1 por el nombre de la galería que quieras, así todas las fotos que tengan el mismo nombre de esa galería se mostrarán con flechas dentro de la ventana modal.

Como has podido ver, crear una plantilla en forma de galería no es difícil, el resultado puede ser tan espectacular como tu creatividad te lo permita.

Entradas resumidas estilo magazine (2)

En la entrada anterior vimos cómo darle un aspecto tipo revista al blog en el cual las entradas se muestran como "mini entradas" apiladas en columnas. En esta segunda parte vamos a ver cómo hacer que la primera entrada tenga un ancho más grande que las demás para darle otro estilo pero siempre dentro del tipo revista (magazine).

Puedes ver un ejemplo de cómo queda en este blog de pruebas.

Si ya hiciste el de Entradas resumidas estilo magazine (1) y quieres este método habrá que deshacer todo y empezar de nuevo ya que el script tiene algunas modificaciones que le he hecho y además hay algunas cosas más que agregar.

Bien, esta vez sin tantas palabras les diré los pasos a seguir; primero entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<data:post.body/>

Elimínala y en su lugar pon esto:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Ahora busca esta línea:

<b:include data='post' name='post'/>

Igualmente elimínala y en su lugar pon esto:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary1&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

</div>
<div class='post-footer'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Ahora antes de </head> pega lo siguiente:

<script type='text/javascript'>
summary_noimg = 200;
summary_img = 180;
img_thumb_height = 60;
img_thumb_width = 60;
summary_noimg1 = 850;
summary_img1 = 780;
img_thumb_height1 = 125;
img_thumb_width1 = 125;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg1;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = summary_img1;
}

var summary1 = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}

//]]>
</script>

Y debajo de eso pega esto:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>

#first { /* Estilos del contenedor del primer post */
margin: 0px 0 10px 7px;
padding: 0px;
width: 610px;
height: 300px;
float: left;
border: 1px solid #1c1c1c;
background: #E6E6E6;
}

.first-body { /* Estilos para el texto del post */
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align: justify;
color: #2E2E2E;
}

#first h3 { /* Estilos para el título del post */
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align:center;
line-height: 1.4em;
}

#first h3 a, #first h3 a:visited { /* Color del título */
color: #DF0174;
}

#first h3 a:hover { /* Color del título al pasar el cursor */
color: #fff;
}

#first .comment-link { /* Estilo para el link de los comentarios */
float:right;
padding: 0px 5px 15px 0px;
}

.post { /* Estilos del contenedor de los mini post */
border: 1px solid #1c1c1c;
float:left;
width: 290px;
height: 210px;
margin: 5px;
padding: 0px 5px 5px 5px;
overflow:hidden;
background: #FBEFFB;
}

.rmlink a { /* Estilos del texto Leer más */
color: #39ADCE;
text-decoration:none;
}

h2.date-header { /* Con esto ocultamos la fecha */
height:0px;
visibility:hidden;
display:none
}

.post-footer { /* Estilos del post-footer de los mini post */
text-transform:uppercase;
font: normal normal 78% &#39;Trebuchet MS&#39;, Trebuchet, Arial, Verdana, Sans-serif;
line-height: 1.4em;
}

#blog-pager {
clear:both;
}

</style>
</b:if>
</b:if>

Con todo esto hemos hecho tres cosas, una es aplicar el Leer más automático a todas las entradas, otra es darle un identificador diferente al primer post así como un Leer más exclusivo a la primer entrada, y por último condicionar el tamaño y los estilos de las entradas en la portada.

Ahora vamos a personalizar:

En los dos primeros códigos que hemos agregado aparece en color rojo el texto Leer más... ese se puede cambiar por otro o bien poner una imagen en su lugar, para tal caso se debe eliminar ese texto y poner este código:

<img src="URL de la imagen" />

Sólo agrega la URL de tu imagen donde se indica y listo. Eso deberás hacerlo en los dos texto de Leer más... para que el cambio se vea tanto en la primera entrada como en el resto de ellas.

Después viene la parte del resumen de las entradas. Debajo de </head>, al inicio del script que pegamos se encuentra esta parte:

summary_noimg = 200;
summary_img = 180;
img_thumb_height = 60;
img_thumb_width = 60;
summary_noimg1 = 850;
summary_img1 = 780;
img_thumb_height1 = 125;
img_thumb_width1 = 125;

El primer número es el número de caracteres que se motrarán en las entradas cuando no haya una imagen.
El segundo número es el número de caracteres cuando hay una imagen.
El tercero y último es el alto y ancho de la imagen en miniatura.
Lo mismo para lo que está en color azul, pero esa configuración sólo afecta al primer post. Como el primer post es más ancho entonces cabrán mayor número de caracteres y podrás hacer más grande el tamaño de la miniatura.

Y por último vienen los estilos y tamaños de las entradas. Eso último que agregamos es un código que condiciona la forma que se ven las entradas en la portada.
Ahí veremos que las partes que empiezan con #first aplican sólo al primer post de modo que donde dice:

width: 610px;
height: 300px;

Es el ancho y alto respectivamente del tamaño de la primer entrada, ahí puedes modificar los valores hasta que se ajuste al tamaño adecuado. Generalmente el ancho deberá ser el mismo que tiene el ancho normal de las entradas.

Luego, debajo de .post se encuentran las medidas para el resto de las entradas, justo en esta parte:

width: 290px;
height: 210px;

De igual modo width es el ancho y height es el alto del resto de las demás entradas. Ahí tendrás que experimentar un poco con los tamaños para que queden justo como deseas; entre más pequeños sean más entradas cabrán a lo ancho del blog.

Para finalizar configura el número de entradas a mostrar en la página principal de modo que nunca vaya a quedar vació un espacio. Para hacerlo ve a Configuración | Formato | Mostrar un máximo de y ahí elige el número de entradas que se mostrarán.

Entradas resumidas estilo magazine (1)

Las plantillas tipo magazine o tipo revista son aquellas que muestras las entradas de la portada en forma resumida apiladas en columnas tal como es el caso de la plantilla Simple Black Metal.



Hay diversas formas de lograr que las entradas se muestren así; la opción que les mostraré se logra usando el script de Leer más y una condicional que hará que los post tengan un tamaño más pequeño en la portada del blog.

Empecemos, primero entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<data:post.body/>

Elimínala y en su lugar pon esto:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Ahora pega antes de </head> lo siguiente:

<script type='text/javascript'>
summary_noimg = 200;
summary_img = 180;
img_thumb_height = 60;
img_thumb_width = 60;
</script>

<script type='text/javascript'>
//<![CDATA[

/******************************************

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Y debajo de ello pega también esto:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>

.post {
border: 1px solid #2E2E2E; /* borde de las entradas */
float:left;
height: 210px; /* alto de las entradas */
width: 290px; /* ancho de las entradas */
margin: 5px;
padding: 0px 5px 5px 5px;
overflow: hidden;
background: #D8D8D8; /* color de fondo de las entradas */
}
.post h3 a {
padding-left: 5px;
color: #5A606D; /* color del título de las entradas */
}
.rmlink a {
color: #39ADCE; /* color del texto Leer más */
text-decoration:none;
}
h2.date-header { /* Con esto escondemos la fecha */
height:0px;
visibility:hidden;
display:none
}
.post-footer { /* Estilos del post-footer */
text-transform: uppercase;
font: normal normal 68% &#39;Trebuchet MS&#39;, Trebuchet, Arial;
line-height: 1.4em;
}
#blog-pager {
clear:both;
}
</style>
</b:if>
</b:if>

Con esto ya debemos tener las entradas resumidas tipo revista, ahora viene la parte de la personalización.

En el primer código que hemos pegado aparece en color rojo el texto Leer más... ese puedes cambiarlo por otro, o si lo deseas puedes poner en su lugar una imagen usando este código:

<img src="URL de la imagen" border="0" />

Ahí cambia la URL de la imagen por la tuya y listo.

En el primer código que hemos pegado antes de </head> aparece esta parte:

summary_noimg = 200;
summary_img = 180;
img_thumb_height = 60;
img_thumb_width = 60;

El primer número es el número de caracteres que se motrarán en las entradas cuando no haya una imagen.
El segundo número es el número de caracteres cuando hay una imagen.
El tercero y último es el alto y ancho de la imagen en miniatura.

El último código pertenece a la condicional que dará los estilos a las entradas, en color verde está la indicación de para qué sirve cada cosa. Pero hay una parte muy importante a tomar en cuenta es donde dice:

height: 210px; /* alto de las entradas */
width: 290px; /* ancho de las entradas */

Eso corresponde justamente al ancho y alto de las entradas, si el ancho es muy reducido habrá más espacio para que haya más columnas, así que podrás jugar un poco con las medidas para que veas cómo se ven las entradas en columnas de dos, tres o cuatro.

Por último configura el número de entradas a mostrar en la página principal de modo que nunca vaya a quedar vació un espacio, por ejemplo, si ajustaste el tamaño para mostrar columnas de tres entradas entonces deberás configurar el blog para que muestra 6, 9, 12 o 15 entradas en la página principal; si fueran columnas de dos entonces tendrás que mostrar ya sea, 4, 6, 8 o 10 entradas.
Para hacerlo ve a Configuración | Formato | Mostrar un máximo de y ahí elige el número de entradas que se mostrarán.

Quizá todo esto pueda parecer un poco complicado pero ya en la práctica verás que no lo es.

Dividir la cabecera del blog

Dividir la cabecera del blog sirve para poder poner al lado del título del blog algún gadget como un anuncio, algún banner, un buscador, etc.
El proceso que veremos es para las plantillas basadas en la plantilla Mínima y para las que son del Diseñador de plantillas de Blogger.

Para las plantillas hechas con el Diseñador de plantillas de Blogger:

Primero entra en Diseño | Edición de HTML y SIN expandir los artilugios busca esta parte:

/* Header
----------------------------------------------- */

Debajo de ella pega lo siguiente:

.header {width:48%; float: left; margin:0 auto 1%;}
.header2 {width:47%; float: right; margin:0 auto 1%;}

Ahora busca el siguiente código y agrega lo que está en color rojo:

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

Guarda los cambios y listo. Ahora puedes ir a Diseño | Elementos de la página y ya podrás ver la cabecera dividida en dos partes.

Para las plantillas antiguas:

De igual modo entra en Diseño | Edición de HTML y SIN expandir los artilugios busca este código:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Elimínalo y en su lugar agrega este:

#header {
width: 48%;
float: left;
margin:0 auto 1%;
text-align: center;
color: #000;
}

#header2 {
width: 48%;
float: right;
margin:0 auto 1%;
text-align: center;
color: #000;
}

Ahora busca este otro código y agrega lo que está en color rojo:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

Y listo, tendrás un área para agregar un gadget junto a la cabecera.

Anuncios rotativos con jQuery

Hace ya bastante tiempo vimos cómo poner un rotador de banners en el cual es posible agregar sólo imágenes que rotarán una seguida de la otra en forma secuencial.

Con jQuery y el script InnerFade podemos crear anuncios no sólo con imágenes sino también con textos y además podemos elegir si aparecen de forma secuencial o aleatoria. En cualquiera de los casos es posible mostrarlos con un efecto de desvanecimiento entre cada uno de ellos.

En el caso de los anuncios de texto quedan perfecto para resaltar entradas que quizá están un poco olvidadas o que simplemente queremos destacar.

Y en el de las imágenes podemos usarlo también para mostrar entradas destacadas, para publicitar alguna otra cosa más, o simplemente para mostrar las imágenes que te gustan.

En ambos casos la instalción es muy sencilla. Primero hay que descargar este archivo, descomprimirlo y subir el script a un alojamiento.

Luego entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo jquery.innerfade.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(
function(){
$(&#39;#news&#39;).innerfade({
animationtype: &#39;slide&#39;,
speed: 850,
timeout: 3000,
type: &#39;random&#39;,
});

$(&#39;ul#portfolio&#39;).innerfade({
animationtype: &#39;fade&#39;,
speed: 1000,
timeout: 4000,
type: &#39;sequence&#39;,
});
});
</script>

Agrega donde se indica en color verde la URL del archivo que subiste previamente.
Ahora antes de ]]></b:skin> pega esto:

#news-div {
height:50px; /* Altura del contenedor de los anuncios de texto */
background:#FFFEB8; /* Color de fondo de los anuncios de texto */
border:1px solid #ccc;
}
#news li {list-style-type:none;}
#portfolio li {list-style-type:none;}

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega uno de estos códigos:

Para los anuncios de texto

<div id='news-div'>
<ul id='news'>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
<li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
</ul>
</div>

Agrega donde se indica la URL del enlace que tendrá el anuncio así como el texto correspondiente.

Para los anuncios de imágenes

<ul id='portfolio'>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
<li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
</ul>

De igual modo agrega las URL de los enlaces así como las URL de las imágenes.

Dentro del primer código hay unas opciones que podemos personalizar y son las que están en color azul.
animationtype Es el efecto, con slide aparecerá como diapositiva y con fade con desvanecimiento.
speed es la velocidad en milisegundos.
timeout es el tiempo en milisegundos que se muestra cada anuncio.
type define en qué orden se muestran, random es aleatorio y sequence es consecutivo.

Ocultar/Eliminar los créditos en las plantillas nuevas

Casi todos los días me preguntan cómo quitar los créditos que aparecen al final de las plantillas nuevas de Blogger.

Quiero aclarar que no es algo con lo que estoy muy de acuerdo, pero como sé que lo seguirán preguntando y de cualquier manera conseguirán hacerlo será mejor que explique cómo hacerlo de una vez.

Primero, antes de decidir si lo quitamos podemos considerar que el gadget se puede editar de forma que dentro de esos créditos pueda aparecer nuestro nombre u organización.

Para conseguirlo sólo hay que ir a Diseño | Elementos de la página y hacer click en Editar sobre el elemento llamado Attribution.

Ahí se puede agregar el nombre del autor, del blog, o de lo que sea.

Esto hará que antes de los créditos aparezca el nombre que hayamos ingresado, de manera que el lector podrá saber que el autor del blog es X persona pero que la plantilla es desarrollada por Blogger.

La otra opción es ocultar el gadget para que no aparezca en el blog. Para ello vamos a Diseño | Edición de HTML, y antes de ]]></b:skin> pegamos lo siguiente:

#Attribution1 {display:none; visibility:hidden;}

Con eso habrás ocultado los créditos, así que cuando quieras que aparezcan de nuevo sólo eliminas eso que has agregado.

La tercera opción es eliminarlo por completo. Para hacerlo entra igual en Diseño | Edición de HTML y SIN expandir los artilugios busca esta línea y elimínala:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Con eso habrás eliminado el gadget de forma permanente.

Tooltips con jQuery

En la entrada anterior vimos cómo poner tooltips sólo con CSS el cual es bastante sencillo y resulta ligero para el blog, sin embargo hay quienes prefieren algo un poco más sofisticado y un poco más fácil para agregar estos mensajes emergentes, así que usando jQuery y tinyTips podemos crear un tooltip con un efecto muy ligero de desvanecimiento pero sobre todo mucho más llamativo.

Puedes ver un ejemplo en este blog de pruebas, verás en el texto algunos enlaces que contienen tooltips así como la imagen del final.

La instalación es muy sencilla, primero descarga este archivo, descomprímelo y sube el archivo jquery.tinyTips.js a un alojamiento.

Después entra en Diseño | Edición de HTML y pega antes de </head> pega esto:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo jquery.tinyTips.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.tTip&#39;).tinyTips(&#39;title&#39;);
$(&#39;img.tTip&#39;).tinyTips(&#39;title&#39;);
});
</script>

Agrega donde se indica la URL del archivo que subiste previamente.

Después agrega antes de ]]></b:skin> lo siguiente:

.tinyTip {
width: 325px;
padding: 17px 0px 0px 0px;
display: block;
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TFBquz_sIxI/AAAAAAAAATU/SlLA5ihQmrQ/s1600/tinyTip-top.png) 0px 0px no-repeat;
}
.tinyTip .content {
padding: 0px 15px 0px 15px;
font-size: 14px;
font-family: "Lucida Sans Unicode";
color: #010101;
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TFBqtTgGbAI/AAAAAAAAATM/b_QYkpj_LGE/s1600/tinyTip-content.png) 0px 0px repeat-y;
}
.tinyTip .bottom {
height: 47px;
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TFBqrZVQluI/AAAAAAAAATE/ycv_Nj0SatM/s1600/tinyTip-bottom.png) 0px 0px no-repeat;
font: 0px/0px sans-serif;
}

Con eso ya tenemos todo listo para que los tooltips funcionen, ahora sólo cuando quieras usar uno dentro de una entrada usa el siguiente código:

<a class="tTip" href="#" title="Este es el contenido del tooltip que quieres mostrar">Texto</a>

Como puedes ver lo único que hemos hecho es agregar la clase tTip que será la que muestre la imagen del globo y dentro del atributo title, (lo que está en color verde) irá el contenido del tooltip.

Y para utilizarlo en una imagen es lo mismo, sólo usamos el siguiente código:

<img class="tTip" title="Este es el contenido del tooltip que quieres mostrar" src="URL de la imagen" />

Del mismo modo agregamos lo que está en negrita, luego el contenido del tooltip y la URL de la imagen donde se indica.

Como ves el procedimiento es mucho más sencillo que el hecho con CSS y el resultado es más llamativo, aunque quienes usen otras librerías como Scriptaculous y Mootools seguramente no podrán utilizarlo. Sin embargo después veremos otras opciones de tooltips para esas librerías.