Y otras diez plantillas más

Butterfly

Descargar

Astro

Descargar

Florascent

Descargar

Sad Fish

Descargar

Field of dreams

Descargar

Flowers

Descargar

Charcoal

Descargar

Spiderman 3

Descargar

DFire

Descargar

Nite Life

Descargar

REFERENCIAS:

Blogger-Templates

El diseñador gráfico Román Cortés ha realizado un dibujo muy complejo usando sólo CSS.

Este Homero Simpson se crea con 307 líneas de código (14135 caracteres) y puede ser visualizado correctamente en casi todas las versiones de Internet Explorer, Opera, Firefox y Safari siempre que la fuente Verdana esté disponible.

¿Una pequeña muestra de ese código?

<div style="position: absolute; padding-left: 1.47em; padding-top: 5.4em;">
  <div style="font-size: 0.66em; color: #000;">C</div>
</div>
<div style="position: absolute; padding-left: 1.62em; padding-top: 5.53em;">
  <div style="font-size: 10px">
    <div style="width: 2.2em; height: 2.2em; background-color: #FED90E;"></div>
  </div>
</div>

o

o

o

o

(

O

O

O

\

L

(

O

O

O

O

O

\

L

(

O

|

|

\

\

|

|

\

\

\

\

(

(

8

o

o

o

(

(

8

o

o

o

o

)

)

b

o

O

o

o

o

o

o

o

)

b

o

O

o

o

o

o

o

o

o

o

o

/

/

/

•

•

•

•

•

_

_

_

•

•

•

C

C

O

(

-

Para quien quiera curiosear, su blog es muy interesante y el comic llamado El Progreso, también realizado íntegramente en DHTML es una buena muestra de las capacidades de estas técnicas.

Book Flip Slideshow es un script de DyamicDrive que crea un slideshow de imágenes con un efecto similar a "dar vuelta una página".

El efecto puede ser definido como horizontal o vertical y cada imagen puede tener un enlace asociado. Para detener el slideshow basta colocar el puntero del ratón encima de una imagen.

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

var Book_Image_Width = 250; // el ancho de las imágenes a utilizar
var Book_Image_Height = 350; // el alto de las imágenes a utilizar
var Book_Border = false; // si las imágenes tienen borde, ponemos true
var Book_Border_Color = "gray";  // es el color del borde
var Book_Speed = 15;  // la velocidad del efecto
var Book_NextPage_Delay = 1500; // 1 segundo=1000
var Book_Vertical_Turn = 0;  // si queremos que sea vertical, colocamos el valor de 1

// esta es la lista de las imágenes a ser mostradas (mínimo cuatro)
Book_Image_Sources=new Array(
// si no se quiere agregar un enlace, se deja en blanco ""
"URL_imagen1","URL_enlace1",
"URL_imagen2","",
"URL_imagen3","",
"URL_imagen4","URL_enlace4"
// la última imagen no debe terminar con una coma
);

var B_CrImg=Book_Image_Sources.length/2;

var B_LI, B_MI, B_RI, B_TI;
var B_Angle=0;
var B_MaxW;
var B_Direction=1;
var B_MSz;
var B_Stppd=false;
B_Pre_Img=new Array(Book_Image_Sources.length);

function ImageBook() {
if(document.getElementById) {
for(i=0;i
B_Pre_Img[i]=new Image();
B_Pre_Img[i].src=Book_Image_Sources[i];
}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.appendChild(B_LI); 
B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI); 
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border) {
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color;
}

B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];

B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages();
}
}

function BookImages(){
if(!B_Stppd) {
if(Book_Vertical_Turn) {
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"
} else {
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction) {
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2
}
if(B_Angle>=Math.PI) {
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px";   
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;
setTimeout("Book_Next_Delay()",Book_NextPage_Delay);
} else setTimeout("BookImages()",50);
} else setTimeout("BookImages()",50);
}

function Book_Next_Delay() {
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50);
}

function B_LdLnk() {
if(this.lnk)window.location.href=this.lnk;
}

function B_Stp() {
B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default";
}

function B_Rstrt() {
B_Stppd=false;
}

// ]]>
</script>

Para insertar un slideshow, lo que necesitamos es una imagen auxiliar llamada placeholder.gif que podemos alojar en Blogger o donde nos guste.

El código HTML es muy sencillo, donde queremos mostrarlo, colocamos lo siguiente (todo en una línea si se trata de un post):

<div id="Book" style="position:relative;">
<img src="URL_placeholder.gif" width="elAncho" height="elAlto">
</div>
<script type="text/javascript">ImageBook();</script>

Para un slideshow horizontal:
elAncho es igual al doble del ancho de la imagen más cuatro
elAlto es igual al alto de la imagen más dos

Para un slideshow vertical:
elAncho es igual al alto de la imagen más dos
elAlto es igual al doble del alto de la imagen más cuatro

Maple Story es un juego/mundo online de origen coreano que tiene millones de usuarios en todo el mundo. Como siempre en estos casos, cada uno crea su avatar y allí interactua con los demás.

La noticia dice que días atrás, una mujer de Japón, 43 años, profesora de música, muy enojada luego del inesperado divorcio de su esposo virtual, en un un rapto de "locura temporal", asesinó al personaje de su ya ex-marido, un oficinista de 33 años.

Todo tomó estado público ya que la mujer utilizó la información de usuario de su amorcito (una hacker sencillita) para acceder al sitio y el hombre hizo la correspondiente denuncia policial que imagino que en algún momento seguirá su trámite judicial correspondiente , una vez que los policías se recuperen de los ataques de risa.

Mientras tanto, la mujer permanece arrestada, acusada de acceso ilegal, manipualción de datos y ... ¿avatarocidio? Sea como sea, enfrenta la posibilidad de ser sentenciada a cinco años de cárcel o a pagar una pequeña multa de cinco mil dólares.

Desde estas páginas nos solidarizamos con el deudo y le expresamos nuestras mayores condolencias.

Este es un script sencillo creado por CodeLifter que permite implementar un zoom sencillo sobre cualquier imagen para permutar entre dos tamaños con un simple click.

Para usarlo, debemos incluir el siguiente código antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  var nW,nH,oH,oW;
  function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
    oW=whichImage.style.width;oH=whichImage.style.height;
    if((oW==iWideLarge)||(oH==iHighLarge)){
      nW=iWideSmall;nH=iHighSmall;
    }else{
      nW=iWideLarge;nH=iHighLarge;
    }
    whichImage.style.width=nW;whichImage.style.height=nH;
  }
//]]>
</script>

Y luego, lo agregamos en cualquier imagen agregando unos pocos datos:

<img src="URL_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);">

Donde:

ancho1 y alto1 son el tamaño de la imagen inicial, la que vemos en la página y ancho2 y alto2 son el tamaño de la imagen amplaida, la que veremos al hacer click en la imagen.

La función puede usarse en cualquier imagen y en varias en la misma página.

Si bien lo razonable es que ancho1 y alto1 sean los mismos en los atributos de la imagen que en la función, nada impide que sean diferentes.

Hacia ya tiempo que había visto ScreenToaster al que se promocionaba como una herramienta online que nos permite crear videos de lo que hacemos en la PC (screencasts) sin necesidad de instalar ningún tipo de software.

Como aún está en modo beta, para usarlo hay que esperar una invitación. Tardó un poco pero al fin ha llegado así que me he dedicado a ver de que se trata y realmente, pese a tener limitaciones, parece ser una buena herramienta y su uso es muy sencillo.

Una vez que entramos en nuestra cuenta, se cargará la aplicación Java por única vez y en todas las páginas del servicio veremos un botón que es el que nos permitirá comenzar a grabar. Click allí y en unos segundos nos indicará que tenemos dos opciones, oprimiendo Alt+S grabará la ventana completa y Alt+Shift+S grabará sólo un área. Para detener la grabación, usaremos la misma combinación de teclas: Alt+S.

Así que nos ponemos en la ventana donde queremos comenzar y usamos la combinación de teclas. Si especificamos un área, aparecerá un selector para que definamos el espacio de la pantalla a grabar. De allí en adelante, hacemos cualquier cosa y cuando decidimos terminar, nuevamente usamos Alt+S y automáticamente nos enviará a una página donde podremos previsualizar lo grabado, colocarle un título y una descripción y, si queremos, lo guardamos haciendo click en Publish.

Tardará un rato en crearse y, aunque es bastante rápido, el tiempo dependerá de lo que hayamos hecho.

Finalizado el proceso, tendremos disponibles un enlace y también el código HTML para insertar el reproductor en cualquier página web ya que el resultado es un archivo de Flash que queda alojado en el mismo servicio y cuya calidad es realmente muy buena (miren el resultado a pantalla complet).

Por el momento, no dispone de la posibilidad de agregar audio aunque se dice que es algo que se incorporará en el futuro.

En nuestra página principal, tendremos siempre disponibles los videos creados así que podemos acceder a ellos en cualquier momento.

ENLACE	ENLACE	ENLACE
Click para ver los videos.

Es cierto, mis pruebas son un poco patéticas pero, la herramienta es realmente excelente.

Capture Fox no es Camtasia pero es una extensión simple que permite grabar un video desde el mismo Firefox con un par de clicks.

Al instalarse, se agrega un ícono con el que lanzamos las opciones de la aplicación. Podemos seleccionar grabar toda la pantalla o sólo el navegador; selecionar la calidad final y eventualmente, agregarle nuestra voz. De allí en adelante, se grabará todo lo que hagamos y un nuevo click terminará el proceso, dándonos la posibilidad de verlo o guardarlo como archivo AVI.

REFERENCIAS:

ZonaFirefox

¿Qué es Blogger?

Blogger es una herramienta para la publicación de weblogs ... Uno escribe entradas y las envía para que sean publicadas ordenadas cronológicamente teniendo como resultado, un sitio web de diseño personal.

¿Cómo funciona? ¡Es magia! y es gratuito.

Traducción más o menos libre de lo que decía la página inicial de Blogger allá por 1999 cuando aún pertenecía a la compañía Pyra.

Es que, aunque nos parezca un poco extraño, el mundo no empezó con nosotros; la rueda existe hace mucho y hubo un tiempo en que ni siquiera existía la televisión!!!!

Blogger no es la excepción y la existencia de Internet Archive WaybackMAchine nos permite recorrer ese pasado cercano y darnos cuenta de lo mucho que ha cambiado o de lo poco que ha cambiado.

Apenas nacemos ya somos parte del pasado. Prueben buscarse y encontarán cosas extrañas

En Blogger Update muestran una forma un poco diferente para que podamos navegar el blog. Aunque hablan de reemplazar el elemento Archivos, en realidad, sólo es una alternativa extra.

Lo que se hace es sencillo; utilizar JavaScript para establecer una fecha determinada, crear una dirección URL y abrir esa página. Si hay posts en esa fecha, se mostrarán y si no los hay, claro, no se mostrará nada.

Creamos un Elemento HTML y allí ponemos el script:

<script type="text/javascript">
home_page = "http://nuestroSitio.blogspot.com/";
timezone = "-03:00";
function submitdate(){
year = document.selectdate.year.options[document.selectdate.year.selectedIndex].value;month = document.selectdate.month.options[document.selectdate.month.selectedIndex].value;day = document.selectdate.day.options[document.selectdate.day.selectedIndex].value;tmax = year+"-"+month+"-"+day+"T23:59:59"+timezone;
tmin = year+"-"+month+"-"+day+"T00:00:00"+timezone;
tlink = home_page+"search?updated-max="+encodeURIComponent(tmax)+"&updated-min="+encodeURIComponent(tmin)+"&max-results=20";
if(year=="" || month=="" || day=="") {
alert("Please select a right date!"); return false;
} else {
self.location.href=tlink;
}
}
</script>

Sólo cambiamos dos datos, el nombre de la página de inicio y la zona horaria que podemos verificar en Configuraciòn | Formato:

home_page = "http://nuestroSitio.blogspot.com/";
timezone = "-03:00";

Luego, agregamos es el código HTML y cuyo esquema (es muy tedioso escribirlo todo) es el siguiente:

<form id="buscarXfecha" name="selectdate"><span>Seleccione una fecha</span>

<select name="day">
<option value="" selected="selected">DIA</option>
<option value="01">1</option> ....... <option value="31">31</option>
</select>

<select name="month">
<option value="" selected="selected">MES</option>
<option value="01">ENE</option> ....... <option value="11">NOV</option>
<option value="12">DIC</option>
</select>

<select name="year">
<option value="" selected="selected">AÑO</option>
<option value="2007">2007</option><option value="2008">2008</option>
</select>

<input type="button" onclick="submitdate()" value="BUSCAR"/>

</form>

Seleccione una fechaDIA12345678910111213141516171819202122232425262728293031 MESENEFEBMARABRMAYJUNJULAGOSEPOCTNOVDIC AÑO20072008

Para el resto, sólo hace falta un poco de CSS que agregamos antes de </b:skin> y el ejemplo tiene el siguiente:

#buscarXfecha { /* el bloque del formulario */
background-color: #243240;
border: 1px solid #4D5B68;
margin: 0 auto;
padding: 5px 0 10px;
text-align: center;
width: 250px;
}
#buscarXfecha span { /* el texto indicativo superior */
color: #FFFFFF;
display:block;
margin-bottom: 5px;
}
#buscarXfecha select { /* los elementos con las opciones */
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
font-size: 11px;
width: 50px;
}
#buscarXfecha input { /* el botón de envio */
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
cursor: pointer;
font-size: 10px;
font-weight: bold;
}

Turn your name into a face hace eso que dice el nombre; traducido: Convierte un nombre en una cara.

El sitio es una pequeña herramienta donde ingresamos el nombre y en función de un algoritmo, crea una imagen combinando 18 estilos de siluetas, ojos, nariz y boca, produciendo más de 100.000 avatares diferentes.

Bueno ... si el mio parece gracioso, ni se imaginen lo que pasa al poner otros nombre ...

Adivinen quién es quién

REFERENCIAS:

Google Blogoscoped

Click en la imagen para previsualizar un modelo reducido.
Descargar el archivo ZIP que contiene las imágenes

"Here on the Gmail team, we're always thinking of ways to help you communicate ... we present, in all their technicolor glory, emoticons in your mail ..." (The Official GMail Blog)

¿Seré yo el único que cree que son muy feos?

Seguramente ya habrán visto el nuevo juguetito de Blogger, ese que comenzaron a promocionar hace unos meses pero que no estaba disponible para los que hablamos español.

Colocarlo es muy sencillo, no tiene opciones de ninguna clase (excepto el título) y en principio, se adapta al estilo de la sidebar. En la plantilla, vamos a encontrar un código largo, muy largo que comienza con:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>

Un código bastante críptico por cierto y donde hay muy poco que podamos modificar:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>
<b:includable id='main'>

esta parte define el título:

<b:if cond='data:title != ""'>
<b:if cond='data:codeSnippet != ""'>
    <h2 class='title'><data:title/></h2>
<b:else/>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>  
</b:if>

NOTA: parece haber una opción para que en el título se muestre o no se muestre la cantidad de seguidores en función de algún dato pero, desconozco donde está. Podríamos hacerlo manualmente, eliminando esa parte y dejando sólo la parte de color.

No es el único caso donde hay opciones poco claras, en el resto siguen apareciendo:

<div expr:id='data:widget.instanceId + "-wrapper"'>
<b:if cond='data:codeSnippet != ""'>
<data:codeSnippet/>
<b:else/>
<b:if cond='data:followingLinkPresent'>

este es el enlace que por defecto dice "Seguir este blog" y que nos permite agregarnos:

<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>

este es el enlace que aparecerá si estamos siguiendo un blog y queremos dejar de hacerlo. Por defecto dice "Parar siguiente" (una traducción increible):

<div class='follow-this profile-link item-control following-stop-following-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" + data:followUri + "\");"'>
<data:stopFollowingMessage/>
</a>
</div>

</b:if>

<div class='followers-grid'>

este es el mensaje que se muestra si el blog no tiene seguidores y que por defecto dice "Sé el primero en  seguir  este blog":

<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>

este es el bucle que muestra el avatar de los seguidores con un enlace a su perfil de Blogger y con el atributo nofollow que no tiene sentido quitar ya que al no apuntar al blog, no significará un enlace valido para posicionar un sitio y de esta manera se evita el "seguimiento spam":

<!-- Relies on the js written out in navbar.gxp -->
<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>
<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='"this.onerror=null;this.src=\"" + data:anonFollowerImageUrl + "\";"' expr:onload='"setAttributeOnload(this, \"src\", \"" + data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth' src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>

<div class='clear'/>
</div>

<div class='followers-canvas profile-link'>

este es el mensaje que muestra la cantidad de seguidores:

<data:followersFooterMessage/>

este enlace permite "Ver todos los seguidores" ya que sólo se mostrará una cantidad máxima:

<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>

este enlace dice "Administrar" y sólo lo veremos nosotros si estamos logueados:

<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>

</div>
</b:if>
<b:include name='quickedit'/>
</div>

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

Los datos que podemos modificar fácilmente son los textos que muestra el gadget; basta reemplazar el código que contiene ese texto por defecto por uno nuestro o incluso por una imagen:

<data:followThisMessage/> es el texto del enlace Seguir este blog
<data:stopFollowingMessage/> es el absurdo texto del enlace Parar siguiente
<data:emptyFollowersMessage/> es el texto Sé el primero en seguir este blog.
<data:viewAllMessage/> es el texto del enlace Ver todos
<data:manageFollowersMessage/> es el texto del enlace Administrar

A diferencia de los últimos agregados de Blogger, este no es un IFRAME así que, por un lado es relativamente más rápido y por otro, nos permite utilizar CSS para modificarlo.

Como la gran mayoría de las clases y definiciones de estilo están en un archivo externo que Blogger agrega, lo ideal es hacer estas modificaciones sobrescribiendo estos datos y colocando todo en una etiqueta STYLE pero no en el encabezado de nuestra plantilla sino después de <BODY>:

<style type='text/css'>
[... aquí colocamos las definiciones ...]
</style>

Estas son definiciones generales, no son demasiado útiles salvo casos especiales:

#Followers1 h2 {
aquí podemos modificar el estilo del título
}

#Followers1-wrapper  {
este es el DIV general que contiene el elemento
}

Los enlaces usan una clase que suele estar definida en las plantillas por defecto y que se llama profile-link a la que se le suma otra que podemos cambiar de manera simple; en mi caso coloqué estas definiciones:

.follow-this {
margin: 0 5px 5px 0;
text-align: right;
}
.follow-this a { /* los enlaces superiores */
color: #7E92A6;
font-weight: normal;
font-size: 11px;
}
.follow-this a:hover {
color: #9EB2C6;
font-weight: bold;
}

.followers-canvas { /* la cantidad de seguidores */
background: transparent url(URL_imagen) no-repeat scroll left top;
color: #778899;
float: right;
font-size: 11px;
font-weight: normal;
margin: 5px 5px 0 0;
padding-left: 15px;
text-align: right;
}

.following-not-admin a { /* es el enlace "Ver Todos" */
color: #7E92A6;
display: block;
font-size: 11px;
font-weight: normal;
text-align: right;
}
.following-not-admin a:hover {
color: #9EB2C6;
font-weight: bold;
}

.blog-admin a { /* es el enlace "Administrar" */
color: #7E92A6;
font-weight: normal;
font-size: 11px;
}
.blog-admin a:hover {
color: #9EB2C6;
font-weight: bold;
}

El área donde se muestran los avatares también es configurable. Para empezar, la clase que usa Blogger es errónea, está definida como follower-grid pero, en realidad se llama followers-grid (una s no es nada, claro). Así que:

.followers-grid { /* el espacio donde se mostrarán los avatares */
margin: 0 auto; /* esto lo centra */
padding: 0;
width: anchopx; 
/* ese ancho es importante ya que define cuántas imágenes se mostrarán por línea */
}

.follower-img { /* es la imagen en si misma que tienen 28x28 */
float: left;
margin: 0;
padding: 0;
}

.follower { /* cada imagen está dentro de un DIV */
float: left;
height: valorpx;
margin: 0px;
width: valorpx}
/* ancho y alto son la imagen más los bordes y márgenes */
}

OTRA MIRADA:

Gem@ Blog

Este post está desactualizado ya que SkyDrive no permite utillizar los archivos de manera directa.

Una consulta repetida es el tema de los enlaces a ciertos archivos alojados en servicios online. Hace unos días hacía referencia a ImageShack y dónde está el enlace directo; algo similar ocurre si usamos SkyDrive aunque, en este caso, encontrar la URL del archivo que debemos utilizar es un poco más engorroso ya que no es mostrada en ninguna parte.

Para saber esa URL, debemos abrir la página del archivo, allí veremos un ícono gigante a la izquierda de la pantalla y deberemos hacer click sobre él, con el botón derecho del ratón.

Dependiendo del navegador que usemos, seleccionaremos: Copiar dirección del enlace (en Firefox) o Copiar acceso directo (en Internet Explorer):

Ahora, podemos pegar eso que hemos copiado en cualquier editor de textos o en el editor de Blogger y tendremos algo tan estrafalario como esto:

http://zvymaq.bay.livefilestore.com/y1pbItubVO5wyAV2jKWCEs6uAIhFchi84eCWuTyOVofncqqjK8JBl2aLfai_fpWxnCj825ARhP9a1E/darkbox.css?download

Allí, en la mayoría de los casos, esa parte final ?download es irrelevante así que podemos eliminarle. Lo que queda, es la URL directa al archivo que queremos utilizar.

Growl es un script para Prototype que muestra información en una ventanita con una serie de efectos. No es difícil de implementar pero parece poco flexible para usar en Blogger así que resulta mucho más cómodo usar el modelo que explicaba Gem@ hace unos días: Un cartel de aviso flotante.

Es más cómodo porque podemos agregarlo, tanto a la plantilla como a un post en particular. En ambos casos, necesitamos el script que podríamos agregar antes de </head> copiando y pegando el código:

<script type='text/javascript'>
//<![CDATA[
....... aquí copiamos el código .......
//]]>
</script>

o bien, alojarlo en un servidor y cargarlo cuando lo queremos utilizar:

<script src="URL_archivo.js"></script>

var persistclose = 1 // una vez cerrada permanece cerrada (0 se muestra cada vez que se abre la página)
var startX = 20 // posición horizontal de la ventana (en pixeles)
var startY = 5 // posición vertical de la ventana (en pixeles)
var verticalpos = "fromtop" // va arriba de la pantalla ("frombottom" va abajo)

function iecompattest() {
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar() {
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else {
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}

window.stayTopLeft=function() {
if (verticalpos=="fromtop") {
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
} else {
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar

Una vez que tenemos el script, podemos colocar el contenido en un DIV al que identifiquemos con un ID específico llamado topbar:

<div id='topbar'>
....... aquí va el contenido del mensaje a mostrar .......
<a href="javascript:void(0);" onclick="closebar(); return false">CERRAR</a>
</div>

Conviene agregarle algún enlace para cerrar la ventana o bien hacer que se cierre al hacer click en ella:

<div id="topbar" onclick="closebar(); return false">
....... aquí va el contenido del mensaje a mostrar .......
</div>

Todo lo que faltaría, sería agregar las definiciones CSS que pueden ser de cualquier tipo:

#topbar{
background-color: #F35D5D;
border: 2px solid #FFFFFF;
color: #FFFFFF;
height: 70px;
padding: 10px;
position:absolute;
width: 500px;
visibility: hidden;
z-index: 640;
}

StickyNote es un script similar de DynamicDrive pero, al que se le agrega un efecto de fade.

Lo usamos de la misma manera, necesitamos el script que insertamos de la misma manera que el anterior y un poco de CSS para establecer las propiedades del cartel:

<style type="text/css">#fadeinbox{
background-color: lightyellow;
border: 2px solid #FFFFFF;
left: 0;
padding: 10px;
position:absolute;
top: -400px;
visibility:hidden;
width: 350px;
z-index: 100;
}</style>

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

var displaymode="always";  // la forma en que se mostrará 
var enablefade="yes" // habilita el efecto fade
var autohidebox=["yes", 5] // oculta el cartel tras  cierta cantidad de tiempo
var showonscroll="yes" // se ueve mediante scroll
var IEfadelength=1 // tiempo del fade para IE
var Mozfadedegree=0.05 // datos del fade para NS6+

if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)

function displayfadeinbox() {
var ie=document.all && !window.opera
var dom=document.getElementById
iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
var docwidth=(ie)? iebody.clientWidth : window.innerWidth
docheight=(ie)? iebody.clientHeight: window.innerHeight
var objwidth=objref.offsetWidth
objheight=objref.offsetHeight
objref.style.left=docwidth/2-objwidth/2+"px"
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
if (showonscroll=="yes")
showonscrollvar=setInterval("staticfadebox()", 50)
if (enablefade=="yes" && objref.filters) {
objref.filters[0].duration=IEfadelength
objref.filters[0].Apply()
objref.filters[0].Play()
}
objref.style.visibility="visible"
if (objref.style.MozOpacity) {
if (enablefade=="yes")
mozfadevar=setInterval("mozfadefx()", 90)
else {
objref.style.MozOpacity=1
controlledhidebox()
}
} else
controlledhidebox()
}

function mozfadefx() {
if (parseFloat(objref.style.MozOpacity)<1)
objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
else {
clearInterval(mozfadevar)
controlledhidebox()
}
}

function staticfadebox() {
var ie=document.all && !window.opera
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
}

function hidefadebox() {
objref.style.visibility="hidden"
if (typeof showonscrollvar!="undefined")
clearInterval(showonscrollvar)
}

function controlledhidebox() {
if (autohidebox[0]=="yes") {
var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
setTimeout("hidefadebox()", delayvar)
}
}

function initfunction() {
setTimeout("displayfadeinbox()", 100)
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0) {
if (window.addEventListener)
window.addEventListener("load", initfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", initfunction)
else if (document.getElementById)
window.onload=initfunction
document.cookie="fadedin=yes"
}

//]]>
</script>

Para usarlo, usamos un código parecido a este:

<div id="fadeinbox" onclick="hidefadebox(); return false" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); -moz-opacity:0">
....... aquí va el contenido del mensaje a mostrar .......
</div>

Una última opción un poco más limitada pero efectiva, es usar la propiedad position: fixed de CSS y "fijar" un DIV en la pantalla sin necesidad de agregar scripts.

Es cierto que no tiene la espectacularidad del scroll pero es muy flexible y sencilla de implementar; basta declarar una clase tal como nos muestran en DailyCoding:

<style type="text/css">
.cartelFijo {
background-color: #0080FF;
border: 2px solid #FFFFFF;
color: #FFFFFF;
font-family: Tahoma;
font-weight: bold;
left: 20px; /* la coordenada horizontal donde se muestra */
padding: 10px;
position: fixed;  /* esto es lo que lo fija */
text-align: justify;
top: 30px; /* la coordenada vertical donde se muestra */
width: 200px;  /* el ancho del cartel */
z-index: 10000;
}

El HTML lo colocamos en cualquier parte, incluso dentro de un post:

<div class="cartelFijo" onclick="this.style.display='none'; return false">
....... aquí va el contenido del mensaje a mostrar .......
</div>

Como es una clase CSS, podemos aplicarla repetidas veces así que también es útil cuando se quieren mostrar varios mensajes simultánemamente.

Parece que el nuevo gadget (widget) de Blogger llamado Seguidores (followers) ya está disponible en español y se lo ve tanto en el escritorio como en Elementos de diseño.

Si queremos usarlo basta hacer click en agregar, ponerle un título y nada más; eso, lo incluirá en la plantilla como cualquier otro elemento.

No he leido mucho del tema pero lo agregaré temporalmente para ver de que se trata.

Y mientras programo este post veo que atajar me avisa de lo mismo así que debe ser algo generalizado ya que también veo entradas en el Blog de Gem@ y en El escaparate de Rosa

Ah, y por cierto, también Bonzu Pipinpadaloxicopolis III me dice que está disponible el botón de Vista Previa en los comentarios incrustados, algo de lo que realmente no me había dado cuenta. Así que parece ser que en Blogger se han dedicado a lanzar varias modificaciones todas juntas; también veo una diferencia en el código de las imágenes y vaya uno a saber que otra cosilla nos tiene escondida.