Redirecciones en Blogger y el traductor de Google

Hace unos dias, Jorge A. Verón Schenone planteaba un problema que se relacionaba con el nuevo sistema de re-direcciones de Blogger que adosa el prefijo del país de quien visita nuestros sitios en al URL y que, en principio, somos muchos lo que intentamos solucionarlo con un script que haga exactamente lo contrario.

El problema se generaba cuando se usaba el traductor de Google, ya sea porque lo tenemos en algún enlace de nuestras páginas o ingresando directamente en ese servicio. En cualquier caso, el sistema enloquecía y el resultado era nulo.

Lo que se me ocurrió como solución temporal es filtrar esas direcciones, es decir, si se entra via el traductor, no ejecutar el script de re-direcciones y para eso, el código quedaría de esta manera:

<script type='text/javascript'>
//<![CDATA[
  (function(){
    var esTRADUCIR = top.location.href.indexOf("://translate.googleusercontent.com/translate_c");
    if(esTRADUCIR!=-1){
       // SE QUIERE TRADUCIR LA PAGINA Y NO HAGO NADA
    } else {
      if( document.URL.match(/\.blogspot\.(com\...\/|..\/)/) ){
        var URL = document.URL
        URL = URL.replace(URL.match(/\.blogspot\.(com\...\/|..\/)/)[0],".blogspot.com\/ncr\/")
        document.location = URL
      }
    }
  })()
//]]>
</script>

Obviamente, es una solución precaria porque mis conocimientos sobre el asunto son menos que escasos así que si alguien ( Emilio Cobos ) tiene una idea de cómo hacerlo de modo más "elegante" será bienvenida.

Google ha creado un nuevo botón que puede agregarse a cualquier página web y que, en lugar de marcar entradas con un +1, permite compartir esa entrada en Google Plus.

Para utilizarlo, basta ingresar a la página de los desarrolladores, seleccionar el tipo, tamaño y lenguaje y, eventualmente, alguna de las opciones avanzadas.

Por defecto, el código que nos dará es algo así:

<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share"></div>

<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'es', parsetags: 'onload'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Pero, si ya tenemos agregado el script con el botón de Google +1, el script es innecesario por lo tanto, basta colocar el botón de este modo, allí donde quisiéramos que se viera:

<div class="g-plus" data-action="share"></div>

o usar este otro código:

<g:plus action="share"></g:plus>

En cualquier caso, podemos eliminar el texto Compartir esto en Google+ que se muestra a la derecha, estableciendo el ancho máximo:

<g:plus action='share' width='85'></g:plus>

La dirección URL a compartir será la de la página donde se encuentre el botón; en el caso de colocarlo en el home, donde hay varias entradas y querer que cada una de ellas se pueda compartir individualmente, debemos colocarlo en alguna parte dentro del post-footer, indicando la dirección de este modo:

<g:plus action='share' expr:href='data:post.url' width='85'></g:plus >

Twitter Follow Box es un plugin para jQuery que nos permite agregar un gadget de Twitter que copia el estilo del plugin Lilke Box de Facebook. Es fácil de integrar a cualquier sitio y posee varias opciones que permiten adaptarlo a nuestros gustos personales.

Descargamos el ZIP que ofrecen en al página de los desarrolladores y allí nos encontraremos con cuatro archivos:

followbox.css son las reglas de estilo; podemos copiar su contenido y agregarlo en la plantilla o un elemento elemento HTML colocándolo entre etiquetas <style> y </style>; obviamente, podemos modificarlo aunque así como está, funcionará perfectamente

jquery.followbox.js es el plugin en si mismo, podemos usar ese archivo o su versión minimizada llamada jquery.followbox.min.js; cualquier a de ellos, lo alojamos en un servidor externo o lo agregamos antes de </head>, copiando y pegando el contenido del archivo:

<script type='text/javascript'>
//<![CDATA[
  ... acá pegamos el contenido del archivo ...
//]]>
</script>

Por último, deberíamos cambiar la URL de un pequeño ícono que se utiliza en el gadget; la imagen llamada icon_twitter.png que alojamos donde nos plazca y luego, buscamos esto en el script:

var d="followbox/icon_twitter.png";

y lo cambiamos por la dirección URL de nuestra imagen.

var d="http://mi_imagen.png";

Con eso, ya estamos listos para mostrarlo donde se nos ocurra. Por ejemplo, si agregamos un elemento HTML en la sidear, allí, escribimos lo siguiente:

<div id="MIfollowbox"></div>
<script>
  $('#MIfollowbox').followbox({
    'user' : 'NOMBRE_USUARIO'
  });
</script>

Y eso es todo. Es un DIV vacío, al que le damos un ID único (en este ejemplo lo llamo MIfollowbox) y la llamada a función donde sólo es necesario colocar nuestro nombre de usuario en Twitter.

Como decía, una serie de opciones extras permiten configurar algunos detalles:

width es el ancho en pixeles
height es el alto en pixeles
border_color el color del borde
bg_color el color del fondo
bg_image una imagen de fondo optativa
title_color el color del texto del título
total_count_color el color indicando la cantidad de seguidores
follower_name_color el color de los enlaces a los seguidores
theme permite seleccionar un estilo global; puede ser light, dark o custom

Todas ellas son optativas y se agregan en el mismo script, separándolas con comas:

$('#MIfollowbox').followbox({
  'user' : 'NOMBRE_USUARIO',
  'theme' : 'dark'
});

Muchas propiedades CSS requieren que se agreguen unidades de medida para indicarle al navegador qué es lo que que queremos que haga; anchos, altos, separaciones, márgenes, etc, etc, etc. Esas unidades, deben ser agregadas inmediatamente después del valor y sin espacios intermedios.

Hasta acá, no habría problemas más allá de algún posible error de sintaxis pero, como hay distintas unidades, esa diferencia suele generar dudas o generar problemas aparentes que se resuelven sólo de un modo: entendiendo qué significan.

Básicamente, en al web, encontraremos que se usan tres tipos de unidades: px, em y %. Aunque de tanto en tanto nos encontraremos con alguna otra, estas son las más utilizadas y cada una de ellas tiene su uso específico, ninguna es mejor o peor en abstracto, todo depende de lo que queramos hacer.

px es una unidad sencilla de comprender, son pixeles; depende de la resolución de la pantalla del monitor; si dimensionamos algo en pixeles y le ponemos un margen expresado en pixeles, la distancia entre los bordes del contenedor y ese elemento, será exactamente ese valor y es fácil de verificar cuando se captura la pantalla y se mide en algún editor de imágenes:

Suponiendo que tengo un contenedor de 500 de ancho y un contenido de 200x100:

.contenedor {width:500px;}
.MIcontenido {height:100px;width:200px;}

<div class="contenedor">
  <div class="MIcontenido"> </div>
</div>

si le agrego margin:20px a MIcontenido, el rectángulo (en este caso con un color de fondo celeste), se separá esa distancia del borde superior y del borde izquierdo:

también lo hará esa distancia del borde derecho pero, como allí no hay nada, no será evidente. Por eso, siempre es mejor indicar los márgenes con cierta exactitud, poniendo el valor cero cuando no son necesarios; en este caso, le pondría cero al margen derecho:

margin: 20px 0 20px, 20px,

Pixeles, entonces, es una unidad "evidente", fácil de visualizar y "constante".

em, en cambio, es una unidad completamente distinta ya que es una unidad relativa que depende del tamaño de la fuente del texto; dicen los expertos que 1em es, aproximadamente, igual al ancho de la letra M del tipo de fuente que se esté usando.

Que sea "relativa" tiene sus ventajas y desventajas. Si en mi ejemplo, establezco un margen expresado como em: margin: 1em; la separación de mi contenido, dependerá del tamaño de la fuente del texto ¿de cuál? del definido para ese contenido y si no existe, del definido para el contenedor y si tampoco existe, se sigue buscando hasta encontrar alguna fuente; eventualmente, si no hay ninguna, se usará la fuente por defecto del navegador.

Con una fuente Arial de 16px:

Con una fuente Georgia de 32px:

Noten que no hace falta que haya un texto, lo que define la separación es la propeidad font aunque no la estemos usando. Eso nos puede llevar a confundirnos porque, supongamos dos imagenes flotando una al lado de la otra y separadas por un margen expresado en unidades em; todo esta bien ya que la fuente del texto definida cuando lo armé, era una y lo que vi, me pareció correcto:

pero, un día se me ocurre cambiarla, poner una más grande y entonces ... zas, la segunda imagen se va para abajo:

Obviamente, deberé cambiar el margen así que, en general, no conviene usar este tipo de unidades salvo que estemos creando algo que deba adaptarse al texto.

Hay una tercera unidad que puede ser usada y que también es relativa; el porcentaje; por ejemplo:

margin: 10%;

Como es un porcentaje, también depende de algo, en este caso, el ancho/alto del contenedor lo que hace que su uso sea aún más restringido::

Social Media Buttons
	Contiene 15 íconos de 260x45, en formato PNG. descargar

Social Media by designsidea
	Contiene 24 íconos de 32x32 y 48x48 en formato PNG. descargar

Hand drawn Marc G
	Contiene 30 íconos de tamaños diversos, en formato PNG. descargar

CSS Arrow please nos ayuda a crear flechas con distintos estilos y nos da las reglas necesarias para copiarlas y aplicarlas a nuestras páginas web.

Basta entrar al sitio y seleccionar las distintas opciones que terminarán generando algo similar a esto:

.arrow_box {
  position: relative;
  background: #88b7d5;
  border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
  left: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.arrow_box:after {
  border-left-color: #88b7d5;
  border-width: 30px;
  top: 50%;
  margin-top: -30px;
}
.arrow_box:before {
  border-left-color: #c2e1f5;
  border-width: 36px;
  top: 50%;
  margin-top: -36px;
}

Colocando eso en una etiqueta STYLE, luego, podemos usar la clase de este modo:

<div class="arrow_box"> abcde </div>

abcde

A partir de allí, nada impide modificarla, establecer su ancho, el tipo de fuente, cambiar los colores o las distintas propiedades para adaptarla a nuestras necesidades y gustos personales:

ejemplo
ejemplo
ejemplo
ejemplo

Todo es cuestión de probar y de entender el funcionamiento de los pseudo-elementos :after y :before:

Curabitur aliquam sem ut risus auctor auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

Las librerías de JavaScript son un gran invento pero, no son otra cosa que herramientas, tan útiles o inútiles como cualquier otra. Ninguna de ellas es una solución universal, uno las puede agregar fácilmente pero debemos estar conscientes de lo que eso significa.

Primero que nada, hay que saber que no son elementos neutros. Una vez que decidimos usar una, la carga del sitio se incrementará, a veces de manera sustancial, ya que son archivos de cierto volumen, muchos de los cuales requieren de otros agregados es decir, de otros archivos que también se cargan; el caso típico es Prototype que suele ser combinado con Scriptaculous, bulider.js, effects.js, dragdrop.js, controls.js, slider.js y sound.js; todo eso suma unos 60/70KB; la versión no minimizada de jQuery pesa más o menos lo mismo pero, ninguna de ellas se compara con las decenas de scripts que se agregan de manera automática en Blogger o el peso que tienen los distintos servicios: botones de compartir, estadísticas, etc, etc.

En definitiva, según mi opinión, utilizar o no utilizar librerías no es una decisión que deba tomarse pensando en tiempos de carga o por lo menos, ese no es el elemento fundamental a tener en cuenta.

Obviamente, mientras seamos conscientes de las cosas, cualquier decisión es aceptable pero, mi experiencia personal me dice que las librerías tienen sentido sólo si vamos a usarlas de verdad; es decir, si vamos a sacarles provecho porque en eso reside su utilidad. Si sólo las agregamos para usar un efecto eventual, su utilidad se reduce; no es que esté mal pero entendamos que, de alguna manera, es un desperdicio.

Definir la librería a usar también implica una limitación básica; de ahí en más, estaremos "atados" a esa librería; si vamos a agregar alguna otra cosa, deberemos verificar que sea compatible.

Es muy usual que pregunten por que no anda algo y al mirar, uno ve que el sitio usa jQuery y quiere usar un plugin para Prototype o viceversa. Tiene que quedar claro que por lo general, las librerías de este tipo son incompatibles entre si, o usamos una o usamos otra y, si bien hay alguna posibilidad de usar dos o más juntas, esto no es conveniente de ninguna manera ya que sólo estaremos duplicando funciones, incrementando la carga del blog sin beneficio alguno y abriendo la puerta a conflictos que a veces no tienen solución. No vale la pena, lo que puede hacerse con una, seguramente puede hacerse con otra.

Y ese es problema ... si bien, lo que puede hacerse con una también puede hacerse con otra, no siempre es sencillo encontrar la respuesta porque a menos que sepamos cómo funcionan y nosotros mismos creemos nuestros propios scripts, encontrar las respuestas en la web puede ser una tarea imposible.

En un tiempo, no hace mucho, la mayoría de ellas tenían una difusión pareja y los desarrolladores las usaban de manera indistinta y según sus gustos personales pero, eso ha cambiado y la decantación propia de estas cosas ha transformado a jQuery en la nueva vedette hasta, casi casi, convertirla en una especie de standard que usan muchos sitios e incluso las grandes empresas, desde Google hasta Facebook. Por lo tanto, será más fácil encontrar información sobre esta librería que sobre cualquier otra lo cual no significa que sea obligatoria ni que sea la mejor.

En la web hay una tendencia a canonizar herramientas (navegadores, sistemas operativos, software, redes sociales) y las librerías no están exentas de esa plaga bastante ridícula. "El martillo es lo mejor y quien no lo usa es un tonto" ... cambien martillo por una marca cualquiera y verán de lo que hablo.

El problema de estas dicotomías es que quien pondera el martillo probablemente, sólo conoce el martillo y por lo tanto, cree que es una herramienta universal, única e irreemplazable, cosa que, cualquiera con dos dedos de frente sabe que es falso. Nada es mejor o peor en abstracto y la mayoría de estas cosas que insisto, sólo son herramientas, es buena o mala porque carecen de moral. Simplemente, me gustan o no me gustan, me resultan útiles o no y punto.

Es más ... me resultan útiles hoy ... ¿pero mañana?

Entonces, ¿si usaba una librería y ahora quiero cambiarla?

Ahhhh buena pregunta ...

Recommendations bar es un nuevo plugin social de Facebook que se encuentra en estado beta es decir, podemos usarlo pero aún está en desarrollo y puede tener algún tipo de problema eventual o sufrir algún cambio en el futuro. Por ahora, aparentemente, sólo será visible para desarrolladores.

En principio, lo que hace es establecer nuevos métodos para permitir que los usuarios compartan artículos en sus perfiles.

El plugin se adosa siempre a la parte inferior página, quedado fijo a derecha o izquierda y apenas se carga, se colapsa para transformarse en un botón con el texto Me Gusta o Recomendar y un ícono extra que permite expandirlo:

Por defecto, veremos un enlace diciendo Social Reading is Off; si hacemos click en él, se abrirá la típica ventana de Facebook solicitando autorización para que el plugin interactue con nuestra cuenta. De ahí en más, el usuario sólo deberá hacer click en Recomendar para que la entrada sea publicada en su perfil de Facebook.

Es importante aclarar que nuestra plantilla debe incluir la etiqueta META correspondiente porque sino, no funcionará:

<meta property="og:type" content="article"/>

El plugin se agrega como cualquier otro usando código XFMBL así que debemos tener esto inmediatamente después de <body>

<div id="fb-root"></div>
<script>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1&appId=APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

Con eso, ya podemos agregar la etiqueta correspondiente de modo simple:

<fb:recommendations-bar action='recommend' />

o incluyendo opciones como la URL del sitio:

<fb:recommendations-bar action='recommend' site='http://vagabundia.blogspot.com/'/>

Cuando vemos la página de los desarroladores, uno de los datos que podemos modificar es URL of the article pero, desconozco a que hace referencia y por l oque probé, no parece necesario ya que toma siempre la direccion de la página donde estemos.

Hay otros parámetros configurables:

Trigger indica la forma en que se lanzará el plugin, por defecto dice onvisible y puede seleccionare un valor (X%) o manual
Verb to display es el texto a mostrar (Recomendar o Me Gusta)
Side es left o right, la posición donde se mostrará
Domain es el dominio de nuestro blog

Tambien hablan de read_time, ref, num_recommendations y max_age que no son muy claras pero, con las que se agregan por defecto es más que suficiente para la mayoría de los sitios.

¿Y donde poner esto en la plantilla? En cualquier parte porque siempre se mostrará fijo en al parte inferior; probablemente, lo mejor es condicionarlo para que sólo funcione en las entradas individuales:

<b:if cond='data:blog.pageType == "item"'>
  <fb:recommendations-bar action='recommend' site='http://vagabundia.blogspot.com/'/>
</b:if>

No es el el único plugin en modo beta, en este momento también hay otro llamado Add to timeline pero, no puedo decir nada de él porque me ha resultado confuso de entender su funcionamiento y para qué sirve

¿Se puede generar un código QR que no sea blanco y negro? Eso propone la herramienta de unitag.

¿Servirá? ¿Será legible? Ni idea pero, crearlo es fácil, hay que entrar en el sitio y comenzar a definir los parámetros; el tipo de dato a agregar (un texto, una dirección web o de email, etc); luego, lo diseñamos seleccionando colores, sombras, tamaño y calidad. Finalmente, descargamos la imagen en formato PNG y ya podemos agregarla a cualquier página.

Recomiendan usar contrastes de color importantes y obviar opciones como "agregar logo" ya que de lo contrario, no funcionará. Para quien esté interesado, todos esos detalles son explicados en una página de ayuda del mismo sitio.

REFERENCIAS:labnol.org

Si solemos insertar videos en nuestro sitio y hacemos esto con regularidad, es bastante fácil crear una función que genere el código de modo estandarizado para evitarnos la tediosa tarea de copiar y pegar una y otra vez.

leer artículo actualizado

Timeline es un plugin para jQuery que genera "líneas de tiempo" visuales utilizando los datos de distintos servicios como Twitter, YouTube, Flickr, Vimeo, SoundCloud y otros pero, que también permite usar json por lo tanto, leer las entradas de un blog de Blogger y esto es lo que ha hecho Emilio Cobos; modificar el script original para permitirnos agregarlo en nuestros sitios.

Es simple de implementar (una vez que Emilio logró que funcionara, claro); basta tener jQuery en la plantilla y luego, personalizar algunos detalles.

Si lo vamos a agregar a la plantilla, primero el CSS:

<link href='http://veritetimeline.appspot.com/latest/timeline.css' rel='stylesheet' />

Si lo vamos a agregar a una entrada (como en este caso) o a una página estática, en lugar de la etiqueta LINK que suele no ser aceptada por el editor, importamos el estilo de esta forma:

<style type="text/css">@import url("http://veritetimeline.appspot.com/latest/timeline.css");</style>

Lo razonable sería usar páginas estáticas o elementos HTML para que el script sólo se cargue cuando alguien lo desea así que ahí, ponemos el DIV vacío:

<div id="timeline"></div>

y luego, el script:

<script>
  window.TimelineConfig = {}
  /*
    // si quisiéramos que la primera página tuviera una imagen especial:
    window.TimelineConfig = { imagenPresentacion:'URL_imagen', chars:500 }
  */
</script>
<script src="http://emiliocobos.site40.net/blogger/demos/timeline/timeline-min.js"></script>
<script type="text/javascript">
  var time = new VMM.Timeline("100%","500px");
  $.ajax({
    dataType:'jsonp',
    url:'http://miblog.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=20',
    success:function(data){
      time.init(bloggerTimeline(data))
    }
  });
</script>

donde debemos colocar el ancho (500 por defecto) la URL del blog y establecer la cantidad de datos a leer (20 por defecto)

Puesto así, tal cual, el script se ejecutará al ingresar a la página y se mostrará en el DIV timeline.

Un poco de CSS extra permitiría diseñar la estructura de ese DIV contenedor. En este ejemplo, permanece oculto hasta que se hace click en el enlace respectivo que simplemente dice esto::

<div style="text-align:center">
  <span style="cursor:pointer;" onclick="$('#timeline').show();">ver timeline</span>
</div>

Como quería mostrarla más ancha, la coloqué fija de este modo:

<style>
  #timeline {
  display:none;
  height: 500px;
  margin: 0 auto;
  position: fixed;
  top: 200px;
  width: 910px !important;
  z-index: 1000;
}
</style>

Y, como una vez abierta, hay que cerrarla, hacemos lo contrario con otro enlace:

<div style="text-align:center">
  <span style="cursor:pointer;" onclick="$('#timeline').hide();">ocultar timeline</span>
</div>

o usamos la función toggle() de jQuery o cualquier otra cosa que se les ocurra.

En el ejemplo, adosé el botón de cerrar a la ventana, agregándole dos líneas al script:

success:function(data){
  time.init(bloggerTimeline(data))
  var tag = "<span id='clostimeline' onclick='$(\"#timeline\").hide();'>ocultar</span>";
  $('#timeline').append(tag);
}

y colocando la regla de estilo respectiva; básicamente:

#clostimeline {
  cursor: pointer;
  display: block;
  font-size: 24px;
  left: 0;
  padding: 0 15px 10px;
  position: absolute;
  text-align: center;
  top: 0;
  z-index: 1001;
}

Y eso es todo:

REFERENCIAS:Emilio Cobos

FaceFile
	Contiene 5 íconos de 512x512, en formato PNG. descargar

Wall E
	Contiene 4 íconos de diversos tamaños, en formato PNG. descargar

¿Es posible recuperar entradas eliminadas de Blogger?

Si pero no; depende; hace tiempo, Blogger disponía de esa posibilidad pero ya no sin embargo, aún es posible pero debemos tener un dato: el ID de ese post: menudo detalle, claro.

¿Y dónde lo obtenemos? Eso, sólo es posible hacerlo si la entrada ya fue indexada y aún podemos verla en la caché de los buscadores o en el mismo feed de nuestro sitio. No, no es fácil pero, es nuestra única esperanza.

Si por alguno de los métodos anteriores, podemos acceder a esa entrada, bastaría que buscáramos ese dato en el código fuente; por ejemplo, en la página web, se encuentra casi al principio, dentro de una etiqueta LINK con la URL de los feeds de comentarios:

<link rel="alternate" type="application/atom+xml" title="NOMBRE BLOG - Atom" href="http://misitio.blogspot.com/feeds/XXXXXXX/comments/default" />

donde XXXXXXX será el ID de la entrada o bien dentro de un ANCHOR ya que por defecto, las plantillas incluyen esto:

<a expr:name='data:post.id'/>

Una vez que tenemos ese dato, basta armar la URL con el el ID de nuestro blog que es ese número que se muestra al crear una entrada nueva:

http://www.blogger.com/post-create.g?blogID=XXXXXXX

así que combinamos ambos datos:

http://www.blogger.com/post-edit.g?blogID=XXXXXXX&postID=XXXXXXX

y estaremos editando la entrada que habíamos borrado así que bastaría volver a publicarla o guardarla para que todo siga como antes y, en principio, si la entrada tenía comentarios, estos también serán restaurados.

REFERENCIAS:The Real Blogger Status

Rainbow es un plugin para jQuery que permite mostrar códigos que queremos compartir, agregándoles estilo, de tal modo que la sintaxis se destaque y sea fácilmente legible.

A diferencia de muchos otros, tiene la particularidad de ser muy liviano y el script, lo podemos personalizar, seleccionando los idiomas que solemos usar (HTML, JavaScript, CSS, PHP, Ruby, Shell, Python, C) de esta forma, el código a cargar se reduce de modo sustancial.

A esto, se le suma la posibilidad de utilizar distintos temas de CSS que podemos descargar y aplicar o, simplemente copiar y pegar su contenido dentro de etiquetas <style> </style>. En este momento hay seis de ellos disponibles y como sólo definen unas pocas reglas de estilo, son sencillos de modificar manualmente, adaptándolos a nuestros gustos personales.

Así que si queremos usar el plugin, lo pondríamos antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'></script>
<script src='URL_rainbow-custom.min.js' type='text/javascript'></script>
<link href='URL_theme.css' rel='stylesheet" type='text/css'>

Para utilizarlo en cualquier entrada, basta usar las etiquetas PRE y CODE y, en esta última, indicar el tipo de lenguaje; de este modo:

<pre>
  <code data-language="javascript">
    ....... el código que queremos mostrar .......
  </code>
</pre>

Se vería algo así:

<pre>
  <code data-language="javascript">
    ....... el código que queremos mostrar .......
  </code>
</pre>

Lo mismo ocurrirá con cualquiera de los lenguajes que hayamos seleccionados; sólo hace falta indicarlos en el atributo data-language.

data-language="javascript"

Un artículo de speckyboy nos enseña a crear una caja de búsqueda con estilo; bueno, todas tiene estilo pero esta tiene ESTILO.

Como es un elemento muy común y que se usa en casi cualquier sitio, vamos a ver la manera de realizarla ya que podríamos emplearla incluso en Blogger aunque, claro está, como la mayoría de las cosas que usan CSS3 y HTML5, en las viejas versiones de Internet Explorer funcionará de modo parcial, mejor dicho, funcionará bien pero no se verán ciertos efectos.

Primero que nada, el HTML básico es algo así:

<form class="formulariodemo cf">
  <input type="text" placeholder="ingresar texto ..." required>
  <button type="submit">buscar</button>
</form>

El formulario es simple y podría tener más parámetros; la primera etiqueta INPUT usa los atributos placeholder y required que son optativos y el botón de envio, en lugar de estar en otra etiqueta INPUT, se encuentra en una etiqueta BUTTON; obviamente, a la etiqueta FORM se le deberán agregar los atributos extras que necesite según sea el sitio donde se agregue. Un ejemplo:

<form class="formulariodemo cf" action='http://nombre.blogspot.com/search' method='get'>
  <input type="text" placeholder="ingresar texto ..." required name="q" >
  <button type="submit">buscar</button>
</form>

Y ahora, el largo, largo, largo CSS:

<style>

  .cf:before, .cf:after {
    content:"";
    display:table;
  }
  .cf:after {clear:both; }
  .cf { zoom:1; }

   /* el formulario en si mismo */
  .formulariodemo {
    background-color: #303941;
    border-radius: 10px;
    box-shadow: 0 0 2px #606971 inset;
    margin: 0 auto;
    padding: 15px;
    width: 450px;
  }

   /* la caja donde se ingresa el texto a buscar */
  .formulariodemo input {
    background-color: #EEE;
    border: none;
    border-radius: 3px 0 0 3px;
    float: left;
    font-family: Tahoma;font-size:15px;font-weight: bold;
    height: 20px;
    padding: 10px 5px;
    width: 330px;
  }
  .formulariodemo input:focus {
    outline: 0;
    background: #FFF;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
  }

  /* el estilo de del atributo placeholder debe ser declarado para cada navegador de modo separado */
  .formulariodemo input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; }
  .formulariodemo input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; }
  .formulariodemo input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; }

  /* aquí iría el estilo de del atributo required si es que se desea definirlo */
  .formulariodemo input:required { box-shadow: none; }

   /* el botón de envio */
  .formulariodemo button {
    background-color: #9099A1;
    border: none;
    border-radius: 0 3px 3px 0;
    color: #FFF;
    cursor: pointer;
    float: right;
    font-family: Tahoma;
    font-size: 15px;
    font-weight: bold;
    height: 40px;
    overflow: visible;
    padding: 0;
    position: relative;
    text-transform: uppercase;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    width: 110px;
  }
  .formulariodemo button:hover{ background: #E54040; } 
  .formulariodemo button:active, .formulariodemo button:focus{ background: #C42F2F; }
  .formulariodemo button:before { /* el detalle del triángulo izquierdo */
    content: "";
    border-color: transparent #9099A1 transparent;
    border-style: solid solid solid none;
    border-width: 8px 8px 8px 0;
    left: -6px;
    position: absolute;
    top: 12px;
  }
  .formulariodemo button:hover:before { border-right-color: #E54040; }
  .formulariodemo button:focus:before { border-right-color: #C42F2F; }    

</style>

Y este sería el resultado final:

Una animación con CSS es algo similar a una transisicón que se repite un número de veces y requiere de dos partes, establecer los intervalos y propiedades a modificar en @keyframes y la propiedad animation en cualquier etiqueta.

leer artículo actualizado