Imagen anclada a una palabra

Este procedimiento ancla una imagen a una palabra. Si redimensionamos la ventana del navegador, o cambiamos la resolución de la pantalla, la imagen fluirá atada a la palabra en un punto preciso, sin alterar la distribución del texto u otros elementos circundantes. Se utiliza en el blog para señalar las actualizaciones de ciertas páginas: El método es simple, consiste en variar adecuadamente los márgenes de la imágen. Veamos a el efecto paso a paso.

1

Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.

La caja verde a trazos es el contenedor general.
La caja azul contiene el texto de la palabra ANCLA y la imagen a anclar en ella.
La imagen se posiciona de forma normal a continuación de la palabra de anclaje:
ANCLA<img src="nube.png"> volutpat

2

Suspendisse enim elit, auctor rhoncus 5tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.

La nube mide 86px de alto.
Añadimos margin-top:-86px; a la imagen para dejar que sea el texto el que establezca la distancia de interlineado.

3

Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.

La nube mide 90px de ancho.
Añadimos margin-left:-90px; a la imagen para desplazarla hacia la izquierda. El texto que estaba a continuación de la imagen tambien quedará desplazado el mismo número de píxeles.

He añadido transparencia adicional al fondo de la nube para que se vea la superposición sobre la palabra ANCLA.

3b

Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.

Si desplazásemos aun más la imagen hacia la izquierda, el texto sería arrastrado con ella solapándose con el texto previo.
margin-left:-110px; hace que las palabras ANCLA y volutpat también se solapen.

3c

Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.

Para el caso anterior añadimos 20px (110-90) margin-right:20px; al margen derecho de la imagen para rectificar la separación con la palabra volutpat.

4

Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.

Si es conveniente elevamos algunos pixeles la nube definiéndolos como margen inferior margin-bottom:5px; de la imagen.

5

Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac
ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.

La nube ya estaría correctamente anclada en ANCLA, pero como hemos visto casi desde el inicio, ha quedado desbordada de los contenedores por su parte superior. Si además la palabra ANCLA queda situada al comienzo de línea, la nube se desbordaría también por la izquierda.

6

Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac
ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.

Añadimos margin-top:30px;margin-left:50px; al contenedor del texto (recuadrado en azul). Si este contenedor no dispone del espacio conveniente, en este caso arriba y a su izquierda, la imagen corre el riesgo de quedar oculta o inconvenientemente desbordada sin solución.

Anulo la transparencia adicional de la nube y quito su fondo gris para ver el efecto final.

resultado

Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ANCLA volutpat fringilla. Cras et sapien ac ipsum volutpat fringilla.

Expando el ancho del contenedor general (recuadrado a trazos verdes) al 100% para que se pueda apreciar como fluye ANCLA y su nube al redimensionar el ancho del navegador.

En resumen:
<div id="Contenedor_General"><div id="Contenedor_Texto" style="margin-top:60px;margin-left:50px;">Suspendisse enim... ...sapien ac ANCLA<img style="margin-top:-86px; margin-left:-90px; margin-bottom:5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-jjpNgJXvjgW_xyZR6JuwI3ojoYhtg-JvkeVBoHhy_Dwn3Va2MM7UboVO1UnXuxLG8EbNVV9wRDURc5OCMtxWy5dRqU08rObPOfuKvcrkzrQDV2wYFRbywKL4f6N1WwY2u4HNc-G8EZo3/s0/actualizado-18-abr-11.png" /> volutpat fringilla...</div></div>
(Tamaño de la imagen nube = 90*86px)

Tablas CSS para columnas de texto

Código moderno para generar columnas de texto de igual altura.

Código CSS:

#contenedor {
 width:80%;
 float:left;
 margin-right: 10px;
 font-family: verdana;font-size:0.8em;
 color:#9e5205;
 text-align:justify;
}
#arriba {
 border: 1px solid #9e5205;
 margin-bottom: 10px; 
 padding: 10px;
 background-color:#f5e39e;
}
#tabla {
 display: table;
 width: 100%;
 border: 1px solid #9e5205;
 border-collapse:collapse;
}
#fila {
 display: table-row;
 background-color:#f5e39e;
}
#celda-izq {
 display: table-cell;
 width: 50%;
 padding: 10px;
}
#celda-der {
 display: table-cell;
 border-left: 1px dotted #9e5205;
 width: 50%;
 padding: 10px;
}

Código HTML:

<div id="contenedor">
    <div id="arriba">Lorem ipsum dolor...</div>
   <div id="tabla">
        <div id="fila">
            <div id="celda-izq">Etiam scelerisque lorem...</div>
            <div id="celda-der">Quisque volutpat metus...</div>
        </div>
    </div>
</div>
<div><p>Sed id suscipit sapien...</p>
    <p>In arcu enim, rutrum sed...</p>
</div>

Ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac consectetur enim. Morbi ac imperdiet risus. In justo sem, sodales in feugiat at, suscipit vel purus. Morbi sed mauris et eros congue rutrum. Nam scelerisque ipsum a risus sagittis nec elementum diam pretium. In nec sapien lectus. Proin enim neque, vestibulum vitae euismod et, condimentum sit amet elit. Vivamus a turpis ipsum, a scelerisque nulla. Nam sed dolor commodo nibh ornare ornare in vel erat. Pellentesque eget vestibulum orci. Duis ullamcorper tincidunt neque, ultrices imperdiet mi iaculis quis. Maecenas egestas lobortis turpis ac fringilla. Mauris et ornare ligula. Ut adipiscing felis id nibh eleifend sodales. Praesent lacinia urna sed nunc gravida dignissim. Proin malesuada commodo urna nec dapibus.

Etiam scelerisque lorem at nibh interdum bibendum. Donec convallis lacinia tortor vel fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam scelerisque fringilla felis vitae tincidunt. Phasellus nec cursus diam. Proin tristique libero id mauris ullamcorper tincidunt vel non orci. Maecenas interdum lorem gravida nisl sagittis id porttitor tellus bibendum. Mauris vitae quam a felis euismod sollicitudin. Fusce scelerisque, metus quis imperdiet condimentum, dui ligula pellentesque velit, a accumsan dolor lectus eu augue. Pellentesque malesuada mauris a mauris blandit rutrum. Pellentesque faucibus tortor a ligula molestie sit amet iaculis libero commodo.

Quisque volutpat metus nec eros imperdiet non molestie nibh blandit. Quisque luctus, orci sed malesuada fermentum, urna sem convallis mauris, et mattis odio arcu eu neque. Integer ultrices ultricies cursus. Pellentesque eu ultricies mi. Suspendisse potenti. Cras nisl mi, mattis ac iaculis et, placerat ut quam. Integer pulvinar congue felis, at egestas mi bibendum quis. Mauris vel lectus eleifend libero pulvinar gravida id in purus. Mauris aliquam tristique porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce laoreet tellus at purus dictum nec varius ligula dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam lobortis nunc non nisl vulputate dignissim id non justo.

Sed id suscipit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna nunc, dictum vel hendrerit consequat, consequat non ipsum. Nunc eu nunc at odio placerat sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean sed gravida lorem. Nulla vel rhoncus nisl. Cras ultricies nibh velit. Proin tempor augue lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat metus eget erat aliquet porttitor. In ullamcorper dignissim risus, sit amet dictum sapien fermentum nec. Mauris tempor dolor et nisl facilisis non porttitor quam vulputate. Proin faucibus, augue at dictum ultrices, tellus tortor laoreet tellus, non vestibulum ligula neque a est. Pellentesque ultrices elit ac est porttitor vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean non odio et ligula facilisis ornare.

In arcu enim, rutrum sed viverra vel, fermentum quis justo. Donec nisi ligula, pulvinar et pharetra eget, pulvinar eget lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nunc tortor, posuere sed consectetur id, fringilla non elit. Nulla sit amet neque justo, eu dapibus magna. Etiam eget vehicula mi. Nunc metus mi, sollicitudin sit amet convallis non, facilisis et ipsum. Sed non sapien non lorem ornare rhoncus ac sit amet nisl. Duis ut nunc leo. Nam imperdiet ante augue, fringilla porta mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris quis odio odio, porta elementum velit. Praesent sit amet nisl nisl, at aliquam nunc. Quisque orci ligula, elementum in consectetur sed, imperdiet sit amet quam. Etiam fermentum elit quis lectus mollis id porta odio auctor. Integer sapien mauris, faucibus id vestibulum convallis, tristique vel nulla. In hac habitasse platea dictumst.

Escape de entidades html

Esta utilidad escapa las siguientes entidades html:
< se escapa como &lt;
> se escapa como &gt;
& se escapa como &amp;
" se escapa como &quot;

Escribe o pega en esta ventana el código

Código escapado

---

Código fuente de esta utilidad

JavaScript necesario en la cabecera

<script type='text/javascript'>
//<![CDATA[
function $(id){ return document.getElementById(id) }
    function encode_entities(s){
    var result = '';
    for (var i = 0; i < s.length; i++){
    var c = s.charAt(i);
    result += {'<':'&lt;', '>':'&gt;', '&':'&amp;','"':'&quot;'}[c] || c;
    }
    return result;
}
function do_encode(e){
    $('dst').value = encode_entities(e.value)
}
//]]>
</script>
</head>

Código necesario en el post (en azul)

<div id="form"><b>Escribe o pega en esta ventana el código</b>
<textarea cols="80" rows="16" style="float:left;" onkeyup="do_encode(this)" onchange="do_encode(this)"></textarea>
</div><div style="clear:left;"></div>
<b>Código escapado</b>
<textarea style="float:left;" id="dst" cols="80" rows="16" onfocus="this.select()" onclick="this.select()"></textarea>

Los pies de post

Adorno el pie de post metiéndolo en un recuadro blanco y delimitándolo por debajo con una línea de puntos naranja.

Añadir el siguiente código (en rojo) a la clase .post-footer

.post-footer {
  padding:0px;
  margin:0px;
  color:$footercolor;
  font-size:80%; padding:5px; /* Añado algo de espacio texto-borde */
  background-color:#ffffff;
  border-bottom-color:#e0ad12;
  border-bottom-style:dotted;
  border-bottom-width:1px;
}

Y además modifico la forma de presentación del número de comentarios en el pie de post sustituyendo el siguiente código en azul:

</span>
<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>
<span class='post--icons'>

Por el siguiente código en rojo:

</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 1'>1 Comentario
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>(VER LOS COMENTARIOS Y/O ESCRIBIR UNO)</a>
</b:if>
</b:if>
</span>
<span class='post--icons'>

Aviso pop-up asociado a un post

¡ Zona hostil para manazas !

Modificar el código de la plantilla puede ser perjudicial para el funcionamiento correcto de tu blog. Sólo deberías continuar si estás seguro de lo que estás haciendo.

Código para generar un aviso pop-up asociado a un determinado post. Se inicia con CSS y el usuario lo hace desaparecer con un pequeño JavaScript, por lo tanto es indetectable por los sistemas de protección anti-pop-up de los navegadores.

Agregar el siguiente código CSS (en rojo) a la plantilla del blog:

<style id='page-skin-1' type='text/css'><!--
.black_overlay{
  display: block;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
}
.white_content {
  display: block;
  position: fixed;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 20%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index:1002;
  overflow: auto;
}

Agregar el siguiente código (en rojo) en el inicio del post:

<div id="light" class="white_content">¡ Zona hostil para manazas !<br />Modificar el código de la plantilla puede ser perjudicial para ... <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Cerrar aviso</a></div><br /><div id="fade" class="black_overlay"></div>

Blockquotes / citas textuales

Formato para blockquote de los post definido en la sección CSS de la plantilla.

.post blockquote {
 margin: 10px 10px 6px 0px;
 width: 50%;
 background: transparent url(http://lh3.ggpht.com/_5SvLLd6obBo/quoleft.png) left top no-repeat;
 float: left;
 position: relative;
}
.post blockquote div {
 padding: 0 48px;
 background: transparent url(http://lh3.ggpht.com/_5SvLLd6obBo/quoright.png) right bottom no-repeat;
 font: normal 80% /1.7em verdana, helvetica, sans-serif;
 color: #5f5f5f;
 text-align: justify;
}

Código html para el blockquote.

<blockquote cite="http://www.lipsum.com"><div>Quisque ... ... ...in massa.</div></blockquote>

Como se ve se usan dos imágenes (quoleft.png y quoright.png) para simular las comillas de apertura y cierre que tendremos que situar en algún sitio, por ejemplo en Picasa. La primera se posiciona de forma absoluta dentro del elemento blockquote, y la segunda está posicionada en la esquina inferior derecha como imágen de fondo de dicho elemento.

En el texto de ejemplo siguiente, el código html del blockquote se encuentra justo al terminar la frase en azul y antes de empezar la frase en naranja. Redimensiona la ventana del navegador para ver como fluye el texto alrededor del blockquote.

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem lacus, adipiscing vel volutpat ac, egestas id enim. Nulla elit felis, iaculis id interdum at, euismod at enim. Morbi eget mauris velit. Aliquam arcu neque, auctor in tempus ut, condimentum quis libero. Ut tellus lacus, rhoncus ac adipiscing ut, convallis a lectus. Praesent ut odio neque, sit amet lobortis ante. Vestibulum ac semper sem. Curabitur sed lacus ut magna lobortis luctus. Pellentesque turpis est, blandit eu aliquam in, accumsan eu urna. Nullam vel mi nec massa sagittis fermentum id in lectus. Quisque blandit posuere metus ut ultrices.

Cras justo nisi, vulputate non vulputate a, iaculis nec nunc. Nullam nec leo eget tellus facilisis sodales. Vivamus posuere varius libero, sit amet faucibus risus dapibus id. Nullam a laoreet orci. Suspendisse urna massa, pretium vestibulum scelerisque sit amet, dictum ac risus. Cras tempor dui enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Quisque quis purus sem, sed elementum metus. Curabitur vehicula lacinia risus ut vestibulum. Ut quis massa vel odio tincidunt blandit. Nam tempus purus quis elit tempor ut condimentum tortor imperdiet. Fusce purus erat, vehicula quis ornare et, fringilla nec augue. Curabitur convallis libero eget libero egestas id condimentum nibh vestibulum. Donec mollis fringilla congue. Nulla placerat suscipit felis, varius scelerisque dui euismod non. Nulla nulla leo, adipiscing a suscipit lobortis, cursus quis libero. Curabitur eget iaculis tortor. Pellentesque eget nunc et nisi sagittis rutrum id eget elit. In dui lacus, ornare eleifend sagittis sit amet, laoreet eget dolor. Ut enim augue, pellentesque ac faucibus vitae, varius in massa.

Nunc faucibus urna ut nisl porta vitae cursus massa dictum. Aenean nulla odio, placerat eu facilisis a, semper et sem. Ut placerat arcu ac augue lacinia lacinia quis sed tortor.

Sed euismod facilisis neque. Duis cursus, justo a imperdiet molestie, erat nibh malesuada orci, at lobortis diam quam quis leo. Phasellus blandit tristique purus, in varius urna pellentesque vel. Ut tempus consectetur massa eget euismod. Nulla facilisi. Morbi congue luctus ultrices. Nullam nibh sapien, tristique eu sagittis rhoncus, facilisis in orci.

Nunc venenatis, felis sit amet dictum consectetur, dolor nisi dignissim eros, sed molestie ante quam vel lacus. Phasellus varius molestie dolor, a tempus tellus ultricies sit amet. Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ipsum volutpat fringilla. Mauris condimentum gravida massa, eu auctor ligula auctor vehicula. Morbi eu magna lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed quam arcu, tempus ut fringilla varius, dignissim mattis ipsum. Fusce quis dui augue, at aliquet nunc. Donec ultricies augue nec lacus sollicitudin sit amet fringilla enim vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. In vehicula dignissim tortor eu auctor. Morbi fringilla lacinia posuere. Praesent vitae ultricies lorem.

Pellentesque mollis, nunc a ullamcorper eleifend, tortor tellus rhoncus diam, eget pulvinar ligula mauris sed tortor. Nam sit amet nisi urna, quis tempor arcu. Ut sollicitudin venenatis commodo. Duis luctus nulla et massa viverra nec posuere massa ornare. Curabitur vel leo non est sollicitudin ultricies a sit amet neque. Nullam luctus placerat placerat. Vestibulum adipiscing, orci sed porttitor facilisis, lorem odio hendrerit justo, eu sodales velit felis in risus. Aliquam iaculis congue nulla, sit amet viverra odio tincidunt ac. Integer sollicitudin imperdiet neque varius vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras porttitor molestie elementum.

Redimensionado de los elementos principales

Las dimensiones de la cabecera, zona de menús, zona de posts, etc., se definen en la plantilla del blog.

... ... ...
@media all  {
   div#main {
       float:right;
       width:73%; /* amplio el ancho de la zona de posts de 66% a 73% */
       padding-top:30px;
       padding-right:0;
       padding-bottom:10px;
       padding-left:1em;
       border-left:dotted 1px #e0ad12;
       word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
       overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
   }
   div#sidebar {
       margin-top:20px;
       margin-right:0px;
       margin-bottom:0px;
       margin-left:0;
       padding:0px;
       text-align:left;
       float: left;
       width: 24%; /* reduzco el ancho de la barra de menú de 31% a 24% */
       word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
       overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
}
... ... ...
#header {
   height:113px; /* añado esta línea para fijar la altura de la cabecera */
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   border-bottom:dotted 1px #e0ad12;
   background:#F5E39e;
}

Efecto pelar esquina

Ficheros necesarios.
peel.js - JavaScript de carga
peel-large.swf - flash efecto desplegado
peeel-small.swf - flash efecto plegado
peel-ojo.jpg - imágen efecto plegado
peel-needs-you.jpg - imágen efecto desplegado

Blogger no deja guardar estos ficheros así que los situamos en otro servidor, por ejemplo en http://sites.google.com

Pero antes debemos modificar el script peel.js con los enlaces correctos (en rojo).

var jaaspeel = new Object();

jaaspeel.ad_url = escape('http://redmtb.wordpress.com'); /* <--página que aparecerá al hacer click sobre el desplegado */

jaaspeel.small_path = 'http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel-small.swf';
jaaspeel.small_image = escape('http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel-ojo.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel-large.swf';
jaaspeel.big_image = escape('http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel-needs-you.jpg');
jaaspeel.big_width = '550';
jaaspeel.big_height = '550';

Agregamos el siguiente código (en rojo) a la plantilla del blog justo después de la etiqueta body.

<body>
<script src='http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel.js' type='text/javascript'></script>

El buscador de BikerTB

El buscador de BikerTB es una pequeña customización del gadget "Cuadro de búsqueda" que podemos encontrar entre los disponibles.

La presentación original del gadget en nuestra página sería esta:

El siguiente código CSS (en rojo) customiza la caja de búsqueda tal y como aparece en BikerTB.

<style id='page-skin-1' type='text/css'><!--
.gsc-branding-text, .gsc-branding-img-noclear {
   display:none;
}
input.gsc-search-button {
   display:none;
}
input.gsc-input {
background: url(http://lh6.ggpht.com/_5SvLLd6obBo/TIqlsPhvm8I/buscar.gif) no-repeat;
background-color:#fff;
}
input.gsc-input:focus,input.gsc-input:hover {
background: #fff;
outline: none
}

Con este resultado:

Y el siguiente código CSS (en rojo) hace una customización alternativa.

<style id='page-skin-1' type='text/css'><!--
.gsc-branding-text, .gsc-branding-img-noclear {
   display:none;
}
input.gsc-search-button {
   color: #FFF;
   background: #FF55AA;
   border: 1px solid #ff0084;
}
input.gsc-input {
   border: 2px solid #D8FFEB !important;
}

Mostrandose así:

Donde:
gsc-branding-text - Define la presentación del texto "con la tecnología de"
gsc-branding-img-noclear - Controla la imágen "Google"
input.gsc-search-button - Define el botón de búsqueda.
input.gsc-input - Define el formato de la caja de búsqueda.