Poner caja de suscripción con imagen en el blog.

Me preguntaban el otro día cómo podían poner una caja de suscripción en la que podamos ponerle la imagen que queramos. Los gadgets que nos ofrece Blogger son bastantes sencillos pero fácilmente lo podemos modificar para que dentro de ese gadget, o el mismo gadget, se adapte a nuestros gustos, sin perder su utilidad práctica.

Personalizarlo no nos tomará mucho tiempo, y el resultado es bastante bueno.

Para ello, necesitamos tener ya elegida la url de la imagen que vamos a poner con anterioridad, que será la que pongamos como fondo del gadget. Quienes preguntaban querían poner de fondo la imagen de su perfil. Se puede poner cualquier imagen. Hecho esto, entramos en Diseño, Añadir Gadget, Html, y allí pegamos el siguiente código:

<center><form style="border:1px solid #fff;padding:3px;text-align:center; width:auto; height:auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY4GOUA7g31jtfy4HngnW1uAI2tsZBmgGsPjPddHnVGcWD9Ys7H08K99cPYEi4JPHqP3_xEFuyQ8q2CovWEmMWVOJsh4FfDChrrQi-CkIqsMBOXe7mikisMi3N_8daKCBlWGAJ6fPBTaw/s675-Ic42/bloger%252526bloger.jpg) no-repeat 0 10px" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=BlogerBloger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Recibe las últimas actualizaciones<br />Directamente en tu blog</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="BlogerBloger" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input type="submit" value="¡Hecho!" /></form></center>

Cambien lo que está en rojo por la dirección del feed de su blog, Puedes consultar el feed de tu blog entrando en FeedBurner con tu misma cuenta de Google. Cambia lo que esta resaltado en verde por la url de tu imagen. Si no sabes cómo obtener la url de una imagen, aquí te digo cómo. Donde pone  width:auto;  height:auto; es el alto y ancho de la imagen que pondrás como fondo, y que, por defecto, se ajustará al gadget donde lo pongas. Si quieres personalizarlo a tu gusto o de acuerdo a la medida que quieras, solo debe reemplazar auto por los valores que tenga la imagen. De modo que quede así:  width:750px; height:200px; Si quieres que las letras queden un poco más a tu derecha, cambia center por right o left para ponerlo a la izquierda. Cambia donde pone Recibe las últimas actualizaciones  <br /> Directamente en tu blog por la leyenda que quieras, teniendo en cuenta de no eliminar <br /> que es lo que le da un salto de línea a la frase. Si la eliminas las palabras no entrarán en la imagen. Recuerda que debes la dirección de tu blog, y listo.

Puedes ver el gadget al final del blog, y si, de paso, quieres probarlo, suscríbete.

Luego me cuentas.

Galería de videos en el blog

Aunque poner un video de youtube en el blog es relativamente sencillo (solo es cuestión de copiar y pegar el código donde queramos y listo) la cosa cambia cuando queremos mostrar en el blog más de un video, y hacer que estos se muestren tipo galería para ir mostrándolos de uno en uno es algo que a cualquiera le provoca un dolor de cabeza, a menos que se tenga un poco más de conocimientos básicos de HTML. Eso era lo que yo me temía pero no…

Hace un buen tiempo que me preguntaba cómo hacer para poner una galería de videos en el blog. Y aunque existen bastantes plantillas que ya vienen con esta galería incluida por defecto, personalizarla o mover el script resultaba más que agotador.  Y en realidad incluir esta galería de videos en el blog no resultó tan complicada que digamos (ya saben, aquí fue cierto aquello de que “no es tan fiero el león como lo pintan”) y resulta que hasta mi hija de 14 años lo pudo hacer (y eso me trajo sentimientos encontrados: no sabía si alegrarme o entristecerme) En fin, que pueden ver cómo funciona en este blog de pruebas.

Para ponerlo en el blog, primero entren en Plantilla, Edición Html y antes de </head> pegan el siguiente script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

Listo. Guardamos la plantilla siempre dando vista previa por si algo hicimos mal y ahora entramos en Diseño, Añadir Gadget, Html y pegas el siguiente código:

 <center><div id="contenedorYT">Cargando ...</div>

<script type="text/javascript">

swfobject.embedSWF(

'http://www.youtube.com/v/qahBeZB1g54&autoplay=1&enablejsapi=1&rel=0&fs=1',

'contenedorYT',

'640','390', '8',null,null,

{allowScriptAccess: 'always',allowFullScreen: 'true'},

{id: 'reproductorYT'});

function playVideo(id) {

var o = document.getElementById( 'reproductorYT' );

if( o ) {o.loadVideoById( id );}

}

</script></center>

<br/>

<div class="videominiaturas">

<a href="javascript:playVideo('J3OtzDWBwOo');"><img src="http://img.youtube.com/vi/J3OtzDWBwOo/1.jpg" /></a>

<a href="javascript:playVideo('FOJq2dYb4xI');"><img src="http://img.youtube.com/vi/FOJq2dYb4xI/1.jpg" /></a>

<a href="javascript:playVideo('fyWjmlMK8Qg');"><img src="http://img.youtube.com/vi/fyWjmlMK8Qg/1.jpg" /></a>

<a href="javascript:playVideo('Y1cTclxGE64');"><img

src="http://img.youtube.com/vi/Y1cTclxGE64/1.jpg" /></a>

<a href="javascript:playVideo('NY9BtBiUUG8');"><img src="http://img.youtube.com/vi/NY9BtBiUUG8/1.jpg" /></a>

<a href="javascript:playVideo('QUlYbhfpoKU');"><img src="http://img.youtube.com/vi/QUlYbhfpoKU/1.jpg" /></a>

<a href="javascript:playVideo('rU72Kc5yCHI');"><img src="http://img.youtube.com/vi/rU72Kc5yCHI/1.jpg" /></a>

</div>

Reemplazas la ID de los videos en los dos lados que pide y que están resaltados con rojo y listo. Puedes aumentar o disminuir los videos miniaturas con solo eliminar este código:

<a href="javascript:playVideo('rU72Kc5yCHI');"><img src="http://img.youtube.com/vi/rU72Kc5yCHI/1.jpg" /></a>

Si quieres que el video principal empice a “rodar” automáticamente al igual que lo hacen los videos en Youtube, pega el código tal cual, pero si no lo quieres así solo elimina lo que está resaltado en azul y listo.

Se puede modificar el ancho y alto del video principal (640 x 390) para que se ajuste al ancho y alto de cada blog, eso ya dependerá de cómo lo quiera cada quien y dónde lo ponga, yo he puesto 7 miniaturas pues he practicado en un gadget debajo de las entradas con todo el ancho del blog (de ahí que el video principal es del mismo tamaño que el de Youtube) pero si desean ponerlo en una sidebar las medidas del video lo tienen que acomodar de acuerdo al ancho de esa sidebar, al igual que las miniaturas. Por lo demás, la galería funciona muy bien.

Mostrar u ocultar gadgets en el blog

Hay ocasiones en las que nosotros no queremos que algunos de nuestros gadgets se vean en la portada de nuestro blog, pero si queremos que se muestren en el resto de las entadas, o al menos no queremos que dichos gadgets hagan que la carga del blog sea más lenta.

Pues hacer que algunos gadgets se oculten de la entrada si es posible, y para ello solo tenemos que valernos de un simple código que ordena que el script del gadget se oculte en la portada del blog, pero en el resto se muestra normalmente.

El código del que hablo es el siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

</b:if>

Este lo deberás poner dentro del gadget, y para ello entra en Diseño, Edición Html, y con los artilugios expandidos (recuerda que ahora los “artilugios expandidos” es abriendo las flechas que están junto a los números hacia el lado izquierdo de la plantilla) busca el nombre del gadget; por lo general los gadgets tienen nombre en tu blog (Etiquetas, Entradas Recientes, Archivo, Etc., o el nombre que tú le hayas puesto) y pega el código de arriba entre <b:includable id='main'> y el último cierre</b:includable> para que te quede más o menos así:

<b:widget id='HTML1' locked='false' title='Gadget' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Con ello lograremos que los gadgets que elegimos no se vean en la portada del blog. Lo que está en azul HTML1 es el nombre del gadget, para este ejemplo el gadget tenía ese nombre. Pero si lo que quieres es lo contrario, que tu gadget se muestre en la portada y no en las entradas, también lo podemos lograr con el mismo procedimiento solo cambiando los códigos que te di al comienzo. En este caso los que pondrás son éstos:

<b:if cond='data:blog.homepageUrl == data:blog.url'>

</b:if>

Recuerda que tienes que poner a todos los gadgets que quieras ocultar o mostrar.

Añadir gadgets (o Widgets) en el blog

Poner un Gadget (o Widget) en el blog es algo que no requiere de ciencia alguna, mucho menos conocimientos avanzados; con tan solo unos cuantos pasos (sencillísimos, por cierto) puedes poner los que quieras y donde los quieras, ya sea contadores, relojes, botones, banners, etc.; así, decorar y personalizar el blog es solo cuestión de gustos y colores. Veamos:

Entras en Diseño, Añadir Gadget:

 

Eliges la opción Html Javascript:

 

Se te abrirá una ventana en la que deberás pegar el código del gadget que elegiste:

Una vez puesto el código respectivo, y luego de dar en vista previa (siempre asegúrate que todo esté como lo quieres) das en guardar, y listo. Como ves no es nada del otro mundo.

Ahora ya puedes buscar los gadgets que quieras y ponerlos para que decoren tu blog.