Crear plugins para las entradas: insertar videos

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