Como instalar las últimas entradas o minigalerías en blogger

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Ultimas entradas con miniatura de imagen

Hace unos días publiqué un procedimiento que nos permite mostrar las últimas entradas publicadas en el blog con una pequeña imagen representativa siempre que el artículo la incluya en su interior, así como un breve resumen del mismo.

Para conseguirlo, hacemos uso del gadget "Lista de Blogs" que ofrece blogger. Aunque muchos lectores obtuvieron un resultado exquisito, he querido darte a conocer esta otra forma de conseguir lo mismo.

Utilizaremos un elemento html-javascript e incluiremos un script en su interior. Puedes ver el resultado en la siguiente imagen:

Diseño>añadir gadget (elemento de página)>Lista de Blogs

Pega lo siguiente:

<script language="JavaScript">
blimagen = new Array();

blimagen[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";
blimagen[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";
blimagen[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";
blimagen[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";
blimagen[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";

blanchobloque = 210;
blcnaleat1 = true;
blmargen = 9;
blcolorbord = "#ffffff";
blcnfond = "#ffffff";
blimmanch = 50;
blimmalt = 50;

bltamanotexto = 12;
blcolorenlace = "#333333";
blstiil = true;
icon = " ";

blcomentt = "comentarios";
showblcne = false;
blcntamanoresumen2 = 90;
blcntamanoresumen = 11;
blcolorTextoResumn = "#666";
icon2 = " ";

blnumeroEntradasMostrar = 4;
blcnTuBlog = "http://elbalcondejaime.blogspot.com/";

</script>
<script src="https://sites.google.com/site/scriptsbalcon/b/blcnposts.js" type="text/javascript"></script>

Ahora tan solo debes reemplazar la dirección de mi blog por la de tu bitácora (se indica en color rojo).

Para cambiar el aspecto del widget, atiende a estas indicaciones:

blanchobloque = 210; Aumenta o disminuye la cifra (210) para editar el ancho del bloque general que muestra la lista de entradas recientes.

blcolorbord = "#ffffff"; Muestra un marco. Estará oculto si tu blog tiene el color blanco como fondo. Para cambiar el color del borde reemplaza #ffffff por cualquier otro código (usando la tabla de colores).

blnumeroEntradasMostrar = 4; La cifra 4 especifica el número total de entradas a mostrar en la lista.

blimmanch = 50; Aumenta o disminuye la cifra (50) para editar el ancho de la imagen en miniatura.

blimmalt = 50; Aumenta o disminuye la cifra (50) para editar el alto de la imagen en miniatura.

blcntamanoresumen2 = 90; Edita la cifra (90) para modificar la longitud de los resúmenes en cada entrada.

blcntamanoresumen = 11; Aumenta o disminuye la cifra (11) para editar el tamaño del texto del resumen.

blcolorTextoResumn = "#333333"; Reemplaza #333333 por el código de tu color favorito para editar el color del texto del resumen (utiliza la tabla de colores).

En breve ampliaré la entrada para darte a conocer el mismo gadget pero de apariencia distinta.

Read More

Instala una barra flotante en las entradas del Blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Barra flotante para compartir las entradas del blog con opción de cerrar

En una entrada anterior expliqué la forma de obtener una preciosa caja de suscripción para el blog. Esta caja ofrece a los lectores los enlaces de suscripción de nuestro blog, así como el link hacia nuestro perfil en Twitter o en Facebook.

Los dos últimos enlaces guardan una pequeña similitud con este truco. He construido una herramienta muy novedosa, una barra para compartir los artículos del blog con opción de cerrar y que aparecerá únicamente en las páginas de entradas individuales, flotando en el lado izquierdo de la pantalla.

Un widget muy profesional y cómodo, que se puede o no ocultar -a opción del lector- y que permitirá difundir el artículo que estemos viendo en Twitter, Facebook, Google Buzz y Stumble Upon.

¿Lo mejor de todo? No tienes que editar absolutamente nada en el código, simplemente copiarlo e implementarlo en la plantilla con dos sencillos y rápidos pasos.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade esto encima (antes):

<script type='text/javascript'>function Compartpostblcn(){
div = document.getElementById("Compartpostblcn");
div.style.display="none";}
setTimeout(Compartpostblcn, 90000);</script>
<link href='https://sites.google.com/site/editoriosus/fds/blcnCompartepost.css' rel='stylesheet' type='text/css'/>

Ahora busca la etiqueta <body> en tu plantilla e inserta este bloque de código debajo:

<b:if cond='data:blog.pageType == "item"'><div id='Compartpostblcn'><a href='javascript:Compartpostblcn();'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOThK8pFsaPP_6ZsV5KJvHiQW3vAArlyx8nSaEO8EDmMhZ5VLNfgIeVtxxrL8-LJoUKe1XHKz0a6kTvkrr6_uxZ2VQ6x3KzABskQuUfnaDH7t5XymTrwzF2QHzGQ1M4VZmWURPXj61O2rl/s320/blcerracompar.png' style='border:none;float:right;margin-bottom:10px;margin-top:4px;padding-right:8px;padding-top:4px;' title='Cerrar'/>
<div class='JJblccomp1'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div><div class='JJblccomp1'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Compartir</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='JJblccomp1'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Publicar en Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='JJblccomp1'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/><a href='http://goo.gl/favZ'><img alt='Stumble Upon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXAuBuRCuR4wg1su7WsRHgrtXsMDu47d3nRih2jiwHmx637bWxoLM0YgaPOyUzzUE3rUOP-sjclhWC2KrWGZZDqWv-QmTrfRL9r2IJYzgAAU9aD839f7WcmxFaaIxkp98vZMrRWve8w62N/s320/blobbt.png' style='border:none;float:right;margin-bottom:10px;margin-top:4px;padding-right:2px;padding-top:4px;'/></a></div></a></div></b:if>

En caso de no encontrar esta última etiqueta, prueba a escribir en el buscador de tu navegador (puedes abrirlo pulsando las teclas Ctrl y F simultáneamente-) <body o prueba con esta línea:

<body expr:class='"loading" + data:blog.mobileClass'>

Guarda la plantilla para terminar. No olvides que la barra para compartir aparecerá en las páginas de posts individuales. Accede a una entrada cualquiera y comprueba el resultado.

Read More

Secciones despegables del blog en cualquier sitio

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Blog desplegable en cualquier apartado o en la portada de tu bitácora

Si te pareció interesante la entrada sobre los títulos desplegables en las páginas de etiquetas, o aquel tutorial con el que podíamos aumentar la velocidad de carga del blog por medio de un script, este truco te resultará fascinante.

Pensé en combinar ambas ventajas en una misma instalación hasta dar con la idea de tener un 'blog desplegable' o bien en la portada del blog o bien en todos sus apartados.

Aquí te dejo una pequeña imagen que he construido para facilitar la explicación:

Diseño>Edición de HTML>Sin expandir artilugios

Busca algo similar a esto:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

Ahora, según la configuración deseada, reemplázalo por uno de estos dos códigos:

Para mostrar el truco en la portada del blog...

<b:if cond='data:blog.url == data:blog.homepageUrl'><script language='javascript'>function blcnJJMostr() {
var blJJTE = document.getElementById("blcnJJMostrCon");
var blJJTE1 = document.getElementById("blcnJJMostrCon2");
if(blJJTE.style.display == "block") {
blJJTE.style.display = "none";
blJJTE1.innerHTML = "Ver Blog"; }
else {
blJJTE.style.display = "block";
blJJTE1.innerHTML = "Ocultar Blog"; } }</script><span style='margin-left:10px;padding:4px 6px;border:1px solid #cccccc;background:#f2f2f2;'><a href='javascript:blcnJJMostr();' id='blcnJJMostrCon2' style='text-decoration:none;'>Ver Blog</a></span>
<div id='blcnJJMostrCon' style='display: none;'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog2' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></div></b:if><b:if cond='data:blog.url != data:blog.homepageUrl'><b:section class='mainJ' id='mainJ' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></b:if>

Para mostrar el truco en todo el blog...

<script language='javascript'>function blcnJJMostr() {
var blJJTE = document.getElementById("blcnJJMostrCon");
var blJJTE1 = document.getElementById("blcnJJMostrCon2");
if(blJJTE.style.display == "block") {
blJJTE.style.display = "none";
blJJTE1.innerHTML = "Ver Blog"; }
else {
blJJTE.style.display = "block";
blJJTE1.innerHTML = "Ocultar Blog"; } }</script><span style='margin-left:10px;padding:4px 6px;border:1px solid #cccccc;background:#f2f2f2;'><a href='javascript:blcnJJMostr();' id='blcnJJMostrCon2' style='text-decoration:none;'>Ver Blog</a></span>
<div id='blcnJJMostrCon' style='display: none;'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></div>

Guarda la plantilla y habrás terminado. Comprobarás que tu blog carga a una mayor velocidad y que navegar por él es más fácil pues el lector puede desplegar el contenido que le interesa leer.

Te aconsejaría añadir también el truco para insertar dos columnas sobre o bajo la zona de entradas, de manera que puedas mostrar gadgets de texto, imágenes o galerías de imágenes y crear un 'orden personalizado' en el blog.

Read More

Widget: Rotador de entradas recientes autómatico

Artículo publicado en el blog El Balcón de Jaime,  ver la entrada en su blog original.

Han sido muchos quienes me han preguntado si es posible poner un rotador de entradas recientes que se actualice de forma automática en el blog.

Sí se puede, y se realiza usando el mismo script presentado en la primera entrada sobre este tema y la librería jQuery.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade antes uno de estos dos códigos:

Para el gadget con imágenes:

<link href='https://sites.google.com/site/scriptsbalcon/b/bljjultimrotad.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>#bljArticjteSlider {
border: 3px solid #5A9CDD;
background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474;
height: 234px; width: 380px;}
.js #bljArticjteSlider .slides li .entry {background: #8CBAE8;width: 378px;}</style>

Modifica lo siguiente para personalizarlo:

border: 3px solid #5A9CDD; Representa el borde o marco azul. Modifica el ancho (3) a tu gusto, el estilo (solid) con ayuda de esta entrada y el color (#5A9CDD) haciendo uso de la tabla de colores.

background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474; Reemplaza URL IMAGEN por la dirección de tu imagen de fondo (en caso de querer utilizarla). #FBB474 Pertenece al color de fondo (anaranjado) que se utilizará si no incluyes la URL de la imagen.

height: 234px; La altura (234) del recuadro general.
width: 380px; El ancho (380) del recuadro general.

background: #8CBAE8; El color de fondo (azul) del rectángulo que contiene el título.
width: 378px; El ancho (378) del rectángulo que contiene el título.

Para el gadget sin imágenes:

<link href='https://sites.google.com/site/scriptsbalcon/b/bljjultimrotad.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>#bljArticjteSlider {
border: 3px solid #5A9CDD;
background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474;
height: 62px; width: 380px;}
.js #bljArticjteSlider .slides li .entry {background: #8CBAE8;width: 378px;}
#bljArticjteSlider .slides li{height: 62px;}</style>

Modifica lo siguiente para personalizarlo:

border: 3px solid #5A9CDD; Representa el borde o marco azul. Modifica el ancho (3) a tu gusto, el estilo (solid) con ayuda de esta entrada y el color (#5A9CDD) haciendo uso de la tabla de colores.

background: url("URL IMAGEN") no-repeat scroll 0 0 #FBB474; Reemplaza URL IMAGEN por la dirección de tu imagen de fondo (en caso de querer utilizarla). #FBB474 Pertenece al color de fondo (anaranjado) que se utilizará si no incluyes la URL de la imagen.

width: 380px; El ancho (380) del recuadro general.

background: #8CBAE8; El color de fondo (azul) del rectángulo que contiene el título.
width: 378px; El ancho (378) del rectángulo que contiene el título.

Guarda la plantilla una vez hayas terminado.

Diseño>añadir gadget (elemento de página)>html-javascript

Incluye esto en su interior:

<div id="bljArticjjteSlider" onmousedown="return false" oncontextmenu="return false" onselectstart="return false"><div><script src="https://sites.google.com/site/scriptsbalcon/b/blgUltimjaime.js" type="text/javascript"></script>
<script language="JavaScript">
blcnJCaImgn = new Array();
blcnJCaImgn[0] = "";
bljjtImagn1 = true;
blcnJCantStl = true;
blcnJCantidad = 10; //
blcnJURLblog = "DIRECCION DE TU BLOG";
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/scriptsbalcon/b/jquerybljjtECycle.js" type="text/javascript"></script>
<script type="text/javascript">
$bljArticjteSlider = { context: false, tabs: false, timeout: 3000, slideSpeed: 1000,
tabSpeed: 1000, fx: 'fade',
init: function() { this.context = $('#bljArticjteSlider'); this.tabs = $('ul.slides-nav li', this.context); this.bljjtescEntrad(); }, bljjtescEntrad: function() { $('div.slides > ul', $bljArticjteSlider.context).cycle({ fx: $bljArticjteSlider.fx, timeout: $bljArticjteSlider.timeout, speed: $bljArticjteSlider.slideSpeed, fastOnEvent: $bljArticjteSlider.tabSpeed, pager: $('ul.slides-nav', $bljArticjteSlider.context), pagerAnchorBuilder: $bljArticjteSlider.prepareTabs, before: $bljArticjteSlider.activateTab, pauseOnPagerHover: true, pause: true }); }, prepareTabs: function(i, slide) { return $bljArticjteSlider.tabs.eq(i); },
activateTab: function(currentSlide, nextSlide) {
var activeTab = $('a[href="#' + nextSlide.id + '"]', $bljArticjteSlider.context);
if(activeTab.length) {
$bljArticjteSlider.tabs.removeClass('on');
activeTab.parent().addClass('on');
}
}
};
$(function() {
$('body').addClass('js');
$bljArticjteSlider.init();
});
</script><div onmousedown="return false" oncontextmenu="return false" onselectstart="return false" id="bljArticjteSlider" class="bljjt1arr"><div class="slides"><script language="JavaScript"> document.write("<script src=\""+blcnJURLblog+"feeds/posts/default/?max-results="+blcnJCantidad+"&orderby=published&alt=json-in-script&callback=blcnBlogEx\"><\/script>");</script></div></div><a href="http://goo.gl/favZ"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYj8YPxeuK4iuuGajPGxVEj3YrL4fXVaiFkg9yFIDQCE3uwtP9v7EHxTPkpbnj8QFpFBxhnJP5UiMqETICyLPltglMtBdKF4W4OUCNjQG4zWR6J3b-IcARRohxV1-j1isllqb5EVs-2oYw/s320/main-slider.png"/></a></div></div>

Introduce la dirección de tu blog en donde se indica (con color naranja) así como la cantidad de entradas recientes a mostrar (blcnJCantidad = 10; //).

Para modificar la velocidad a la que rotan las entradas debe aumentarse o disminuirse la cifra 3000 en timeout: 3000.

Recuerda que este truco utiliza jQuery por lo tanto, si usas Scriptaculous, Prototype o Mootools seguramente no podrás utilizarlo.

Guarda el gadget y listo.

Read More

Instala un widget de iniciar sesión en blogger

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Widget de login (iniciar sesión) en blogger

Desde hace tiempo buscaba la manera de crear un sistema de login (inicio de sesión) en blogger para poder instalarlo en un gadget.

Pensando y pensando di con la solución y el resultado te lo muestro en esta imagen:




Esto dará la oportunidad a tus visitantes de poder iniciar sesión en blogger y acceder a su Escritorio desde tu blog.

Para implementarlo sigue los siguientes pasos:

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código:

<div id="iniciosesion" style="padding-left: 3em; padding-top: 6px; border: 3px solid #E1D4C0;"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" onsubmit="onlogin()" method="post">

<input value="http://blogger.com/loginz?d=%2Fhome&amp;p=http%3A%2F%2Fblogger.com%2F" name="continue" type="hidden"/>

<div>

<label for="Email"> Nombre de usuario:
<p>

<input id="Email" tabindex="1" name="Email" size="20" type="text"/>
</p></label>
</div>

<div>
<label for="Passwd"> Contraseña: (<a target="_top" href="https://www.blogger.com/forgot.g" title="¿Ha olvidado su contraseña?">?</a>)
</label><p>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>
</p></div>

<input id="signin-btn-ns" tabindex="0" class="ubtn ubtn-block" value="Acceder" name="submit" type="submit"/>
<p>
<input id="PersistentCookie" tabindex="3" value="yes" name="PersistentCookie" type="checkbox"/>
<label for="PersistentCookie">Recordarme</label>
(<a ?="" recordarme="" target="_top" href="http://elbalcondejaime.blogspot.com/2009/04/para-que-sirve-la-casilla-recordarme.html" title="¿Qué es?">?</a>)</p></form></div>

Y guarda el gadget...



Puedes cambiar el botón de Acceder por uno estilo blogger, como este:




Para ello, debes cambiar esta parte del código:

<input id="signin-btn-ns" tabindex="0" class="ubtn ubtn-block" value="Acceder" name="submit" type="submit"/>

Por esta otra:

<input id="b" src="http://i695.photobucket.com/albums/vv317/elbalcondejaime/4columnas-10.png?t=1249251313" class="ubtn ubtn-block" value="" type="image"/>

La dirección del botón está señalada en verde. Si lo prefieres, puedes cambiarlo por una imagen personal.

Nota:

Siempre puedes personalizarlo un poco. Si lo deseas, puedes añadirle un fondo al gadget, por ejemplo.

Read More

Relojes de cuenta regresiva recomendados por Ciudad Blogger

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Countdown Clock Codes es un servicio que nos permite crear nuestros propios relojes de cuenta regresiva personalizados, para ello nos ofrecen distintas imágenes de fondo para usar, así como la posibilidad de agregar un mensaje personal en ellos.

Dispone de varias categorías como cumpleaños, navidad, caricaturas, año nuevo, etc.

Su uso es sumamente sencillo, sólo hay que elegir la fecha esperada, la imagen de fondo, el mensaje personal, los colores y listo. Una vez configurado copiamos el código y lo pegamos en un elemento HTML/Javascript.

MySpace-Countdowns

Algunas opciones, excepto la palabra UNTIL (hasta, en español) podemos modificar una vez que tenemos el código.

<center><embed src="http://www.countdownclockcodes.com/cd/ccc-cartoons/show.swf?clickURL=http://www.countdownclockcodes.com/&clickLABEL=MySpace-Countdowns&flashLABEL=CountdownClockCodes&skin=http://www.countdownclockcodes.com/cd/ccc-cartoons/skins/2.jpg&text=%20Aqui%20va%20tu%20mensaje&untilColor=3501985&textColor=16777215&datesColor=0&year=2050&month=0&day=1&hour=0&minute=0&second=0&x=0&y=80" quality="high" bgcolor="#ffffff" width="300" height="200" name="countdown" align="middle" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><small><a href="http://www.countdownclockcodes.com/">MySpace-Countdowns</a></small></center>

La dirección que está después de URL es el enlace que se encuentra dentro del contador.

Hay dos etiquetas LABEL, la segunda es el texto que aparece en ese enlace dentro del contador.

La URL que está después de skin es la imagen de fondo, así que podemos cambiarla por una imagen propia si es que alguna de las del sitio no nos gustan.

Lo que está después de text es el mensaje personalizado, ese puede quitarse si es que deciden no mostrar ningún texto.

Y como un extra lo que está en gris es el enlace de hasta abajo que aparece fuera del contador.

No es nada extraordinario, pero es una buena opción si es que están cansados de usar un reloj de cuenta regresiva más simple, sobre todo si podemos personalizarlo un poco más.

Enlace | Countdown Clock Codes

Read More

Barras de herramientas flotantes con opción de cerrar

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

He visto que muchos de quienes usan barras de herramientas como Wibiya han tenido que quitarla porque interfiere con el funcionamiento de algunos scripts como Scriptacoulous y Prototype, y otros han optado por eliminar esos scripts con tal de seguir usando esa barra de herramientas.

Bueno, para quienes prefieren tener una barra de herramientas personalizada que no les dé esos problemas y les permita seguir usando otros scripts veamos cómo crear nuestra propia barra de herramientas flotante con opción de cerrar.

La barra de herramientas contiene un buscador, enlace de suscripción al feed, enlace para seguirnos en Twitter, Facebook, botón para compartir en Google Buzz, Twitter, Facebook y traductor en tres idiomas.

Puedes verlo funcionando en este blog de pruebas.

Para ponerlo en tu blog entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega esto:

/* Barra de Herramientas
----------------------------------------------- */
#ToolBar {
background:#CEE3F6; /* Color de la barra */
border-top:1px solid #ccc; /* Color del borde superior */
margin: 0;
bottom:0px;
right:0;
width: 100%;
height:35px;
overflow: auto;
position: fixed;
}
.cerrar {
float: right;
margin-top:6px;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}
.search-text {
color: #ccc;
text-align: center;
}

Ahora antes de </head> pega lo siguiente:

<script type='text/javascript'>
// Barra de Herramientas (ciudadblogger.com)
//<![CDATA[
var toolb_arr = new Array();
var toolb_clear = new Array();
function toolbFloat(toolb) {
toolb_arr[toolb_arr.length] = this;
var ftrpointer = eval(toolb_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.toolbsrc = document.all? document.all[toolb] : document.getElementById(toolb);
this.toolbsrc.height = this.toolbsrc.offsetHeight;
this.toolbheight = this.cmode.clientHeight;
this.toolboffset = toolbGetOffsetY(toolb_arr[toolbpointer]);
var toolbbar = 'toolb_clear['+toolbpointer+'] = setInterval("toolbFloatInit(toolb_arr['+toolbpointer+'])",1);';
toolbbar = toolbbar;
eval(toolbbar);
}

function toolbGetOffsetY(toolb) {
var toolbTotOffset = parseInt(toolb.mtasrc.offsetTop);
var parentOffset = toolb.toolbsrc.offsetParent;
while ( parentOffset != null ) {
toolbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return toolbTotOffset;
}
function toolbFloatInit(toolb) {
toolb.pagetop = toolb.cmode.scrollTop;
toolb.toolbsrc.style.top = toolb.pagetop - toolb.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ToolBar").style.visibility = "hidden";
}
//]]>
< /script>

Después agrega este código antes de </body>

<div id='ToolBar'>
< img border='0' class='cerrar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7gIdiVmU9WfB-OU1-MCAy8jOcPfMyhvxZvaCaXJ8_N4xIRbUh-RMtvNtLf6jTHV5SBo9iWhX8IY2Pg-D5CZHZLgr8yxMHBmRPNrNJkjEuVR4uEYR5QBn4AqW1H6lww9HW6FJiFluUsSI/s1600/close.gif' title='Cerrar esta barra' width='19'/>

< table border='0' cellpadding='3'>
< tr>
< td style='padding-left:30px; padding-right:50px;'><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
< input class='search-text' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form></td>

< td style='padding-left:20px;'><a href='http://www.facebook.com/usuario' title='Sígueme en Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0MFEBMpQkPKY3bVxv3d4W3v0I7pUn5hL5Vtyj5V6E9zoUb9BdDi_8WG25YKAin9KinKcfmsaGAqViZBBLeO-JTsjfKXlDQO3qPU1m1IBvLrE5vaDd5-uq83qkQA9RxUu-j7Iajqbwe0w/s1600/m-facebook.png'/></a></td>

< td><a href='http://twitter.com/usuario' title='Sígueme en Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiofK5p157HgtT2w6KS4M_Gl0JWLL5ibO9yNZ0LO1OleeWvDIoofEeGEcyGG5jqAmdf1594oK_nD49FMTIK3hDqdfxwSjWqmSz-5B-SXB-HVLPRKLUs212YFYiKZ9h53XtvdUqsjbMXsfY/s1600/m-twitter.png'/></a></td>

< td><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Suscribete al feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghH-sDpRAunfO64N62_nSc6jLOyTMIj2r9UXjtUKjnkcsiA28o5iDhQTsAuLvuMG51bQeRMpOGdqqf8JLIBM1uukEsab7Ic6GfWvSm6s3d8TsR2z8-gMItK0Z7NytwJJH1ip8_w4AGA5E/s1600/m-feed.png'/></a></td>

< td style='padding-left:40px;'><a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share' title='Publicar en Twitter'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>

< td><a class='google-buzz-button' data-button-style='small-count' data-locale='es' href='http://www.google.com/buzz/post' title='Publicar en Google Buzz'/>
< script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td>

< td><a href='http://www.facebook.com/sharer.php' name='fb_share' title='Publicar en Facebook' type='button'>Compartir</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>

< td style='padding-left:60px;'><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cen&amp;hl=es&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='English'><img align='absbottom' alt='English' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1PyC_o6ltQsIae6pz2p9vKoQycYK7rLS7_xab3pq10wjmIGPD9T90TYnuYpFpVHt0OG3xxlV8hRl-zNsAaA2Cav-sarCIjuoKcuCxE1t6Lq6F90MyDwkniQoLG40XZ-k7NLEqK_yFQLU/s1600/ingles.png' width='24'/></a></td>

< td><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cpt&amp;hl=es&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='Português'><img align='absbottom' alt='Portuguese' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG7sHDVUMcGMovKcvEGcIw5wr6fdBixV0pjH27SuqeAGc1NoE93ZCg4rlUJ8S5sEPvb7lTcBRx2PQ6yH8IMDwn32x1vHMYtoMMudMIl7fl__FeA2wGkx8Xbq8Ecli2U4nZM0vECHxi9TA/s1600/portugues.png' width='24'/></a></td>

< td><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cfr&amp;hl=es&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='Française'><img align='absbottom' alt='Spain' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKaRjSb36_vfNLF5l5vUUFgy5Xr3UMxP1-wMNUBbP9yna43kkpef_tOV03PHfCu6HZHhUni_h7dmFd9nmgVVwkg0aVoexv5h162TAXuv5DdNezA91rC9w2O5SSMU_iol_MXjGwhl4J0Ww/s1600/Frances.png' width='24'/></a></td>

< /tr>
< /table>
< /div>

Por último cambia lo que está en color rojo por las URLs de tu Facebook y Twitter.
Puedes cambiar el color de la barra donde se indica en color verde dentro del primer código que agregaste.

Si lo deseas puedes agregar otros elementos, como un contador de visitas, enlaces, etc. sólo agrega antes de </tr> un bloque como este:

<td> Aquí el contenido extra </td>

Añade donde se indica el contenido que quieres agregar y listo.
Como ves, no es necesario depender de sitios externos ni quebrarte la cabeza para poder tener una barra de herramientas en tu blog.

Read More

Cómo insertar cajas de texto tuneadas y en movimiento

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Cajas de texto tuneadas, y en movimiento

Unas cajitas para tu blog, que puedes utilizar perfectamente en una entrada con solo pegar el código de la que prefieras...

EL TEXTO QUE QUIERAS!!

El código:

<br /><div align=center> <br /><br /><br /><br /><div style="SCROLLBAR-FACE-COLOR: #000000; BORDER-LEFT-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #333333; OVERFLOW: scroll; WIDTH: 259px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px dashed; BORDER-RIGHT-STYLE: ridge; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; BORDER-LEFT-STYLE: ridge; HEIGHT: 211px; BACKGROUND-COLOR: #000000; BORDER-RIGHT-COLOR: #ffffff" align=center> <br /><br /><br /><br /><p> AQUÍ TU TEXTO PARA LA CAJA! <p> </P></DIV></DIV>

Para escribir el texto en las cajitas estas, basta con hacer doble click sobre ellas y podrás escribirlo!!

El código:

<br /><div style="BORDER-RIGHT: #6666ff 3px dashed; BORDER-TOP: #000000 3px dashed; SCROLLBAR-FACE-COLOR: #00FF66; SCROLLBAR-HIGHLIGHT-COLOR: #cce9fd; OVERFLOW: scroll; BORDER-LEFT: #000000 3px dashed; WIDTH: 193px; SCROLLBAR-SHADOW-COLOR: #ffbbf1; SCROLLBAR-3DLIGHT-COLOR: #ddaaff; SCROLLBAR-ARROW-COLOR: #b444ff; BORDER-BOTTOM: #000000 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #333366; HEIGHT: 220px; BACKGROUND-COLOR: #99FF99" align=center> <br /><br /><br /><br /><br /><br /><br /><br /><p> <span style="color: rgb(204, 0, 0);">aquí el texto que quieras</span> </P></DIV><br /><br />

Read More

Inserta tabla de últimos comentarios

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Tabla de últimos comentarios (2)

Con este truco podrás mostrar los últimos comentarios en tu blog. Además, podrás decorar el gadget con las ideas que se te vayan ocurriendo...


Para aplicarlo en el blog usarás un script basado en JSON.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el script:

<script type="text/javascript">
function comentarios(json) {
for(var i=0; i < numero; i++) {
var b_rc=json.feed.entry[i];var c_rc;
if(i==json.feed.entry.length)break;
for(var k=0; k < b_rc.link.length; k++) {
if(b_rc.link[k].rel=='alternate') {
c_rc=b_rc.link[k].href;break;
}
}
c_rc=c_rc.replace("#","#comment-");
var d_rc=c_rc.split("#");
d_rc=d_rc[0];
var e_rc=d_rc.split("/");
e_rc=e_rc[5];
e_rc=e_rc.split(".html");
e_rc=e_rc[0];
var f_rc=e_rc.replace(/-/g," ");
f_rc=f_rc.link(d_rc);
var g_rc=b_rc.published.$t;
var h_rc=g_rc.substring(0,4);
var i_rc=g_rc.substring(5,7);
var j_rc=g_rc.substring(8,10);
var k_rc=new Array();
k_rc[1]=" de Enero"; k_rc[2]=" de Febrero"; k_rc[3]=" de Marzo"; k_rc[4]=" de Abril";
k_rc[5]="de Mayo"; k_rc[6]=" de Junio"; k_rc[7]=" de Julio"; k_rc[8]=" de Agosto";
k_rc[9]=" de Septiembre"; k_rc[10]=" de Octubre"; k_rc[11]=" de Noviembre"; k_rc[12]=" de Diciembre";
if("content" in b_rc){
var l_rc=b_rc.content.$t;
} else if("summary" in b_rc) {
var l_rc=b_rc.summary.$t;
} else var l_rc="";
var re=/<\S[^>]*>/g;
l_rc=l_rc.replace(re,"");
if(fechas==true){
document.write(j_rc+' '+k_rc[parseInt(i_rc,10)]);
}
document.write('<ul><li><b>' + b_rc.author[0].name.$t + '</b>');
if(titulo==true){
document.write(' en ');
document.write(f_rc);
}
document.write('...<br/>');
document.write('<a href="' + c_rc + '">');
if(l_rc.length < resumen) {
document.write(l_rc);
} else {
l_rc=l_rc.substring(0,resumen);
var p_rc=l_rc.lastIndexOf(" ");
l_rc=l_rc.substring(0,p_rc);
document.write(l_rc+'&hellip;');
}
document.write('</a></li></ul>');
if(i < numero-1){
document.write('<hr style="color:#' + linea + ';"/>');
}
}
}
</script>
<script type="text/javascript">
var numero=3;
var fechas=true;
var titulo=true;
var resumen=100;
var linea=cccccc;
</script>
<div style="border:2px solid #cccccc;padding:5px 5px 5px 5px;color:#cccccc;text-align:left;margin:0px auto;"><script src="URL DE TU BLOG/feeds/comments/default?alt=json-in-script&callback=comentarios"></script></div>

Sustituye URL DE TU BLOG por la dirección de tu blog.

Para editar el contenido:

var numero=3; Indica el número de comentarios a mostrar
var fechas=true; Indica que la fecha debe mostrarse (para ocultarla cambia true por false)
var titulo=true; Indica que el título debe mostrarse (para ocultarlo cambia true por false)
var resumen=100; Indica el número de carácteres que aparecerán en el resúmen del comentario
var linea=cccccc; Indica el color de las líneas horizontales

Para editar el aspecto:

border:2px solid #cccccc; Son las propiedades del borde. 2px es el grosor, Solid el estilo (para ver los estilos de borde ve a esta entrada), #cccccc el color (mira en la tabla de colores para conseguir los códigos).

color:#cccccc; Es el color de texto (la fecha y el nombre del comentarista). Puedes cambiar el color usando la tabla de colores.

font-size:14px; El tamaño del texto.

text-align:left; La alineación del texto (está alineado a la izquierda) para centrar el texto añade center en lugar de left. Para alinear el texto a la derecha añade right en lugar de left.

Read More

Cómo mostrar todas las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Mostrar todas las entradas del blog.

Si quieres tener un link que al hacer click en el, puedan ver todas las entradas que hay en tu blog solo tienes que copiar la línea de código...

El código:

<a href="http://elbalcondejaime.blogspot.com/search/label/?max-results=999">Mostrar todas las entradas</a>

Debes cambiar la dirección del balcón por la de tu blog.

Donde pone "Mostrar todas las entradas" puedes poner el título que quieras.

Si además quieres añadirle una imagen al enlace, hazlo con estas líneas...

<a href="http://elbalcondejaime.blogspot.com/search/label/?max-results=999"><img src="URL DE TU IMAGEN"/>Mostrar todas las entradas</a>

Debes cambiar la dirección del balcón por la de tu blog. Donde pone "Mostrar todas las entradas" puedes poner el título que quieras.

Donde pone "URL DE TU IMAGEN" pon la dirección (URL) de tu icono o imagen.

Puedes ver el resultado aquí:

Mostrar todas las entradas

Read More

Agrega botón de imprimir con imagen a tu blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Botón de imprimir con imágen

Con estos pasos que te voy a enseñar a continuación, podrás insertar en tu blog una imágen de una impresora que, al hacer click en ella, imprime automáticamente el artículo que estés leyendo...

Diseño>edición HTML>expandimos artilugios

Busca esta línea:

<div class='post-footer'>

Justo debajo pégale este código:

<left><a href="javascript:print()"><img src="URL DE LA IMAGEN" /></a></left>

Sólo tienes que poner la URL (dirección) de tu imagen de impresora.

La imágen aparecerá a la izquierda, si quieres que aparezca a la derecha cambia las etiquetas <left> y </left> por estas etiquetas: <right> y </right>

Si por el contrario, quieres que la impresora aparezca en el centro, cambia las etiquetas anteriores por estas: <center> y </center>

Puedes encontrar imágenes de impresora en iconlook (está en inglés, para encontrar las impresoras escribe la palabra "print")

¡Suerte!

Read More

Cómo instalar un script de valoración de estrellas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Script para la valoración de estrellas

Quizás conozcas ya el típico blog o web que tiene unas estrellitas al final de sus entradas, que, al pasar el cursor por encima, los visitantes pueden votar la entrada, dar su opinión y calificarla.

Navegando por Google encontré Outbrain, una magnífica web en la que nos ofrecen este servicio. Para añadirlo a blogger, puedes ir al enlace directo o seguir los pasos que te muestro a continuación (son los mismos)...

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código:

<script language="JavaScript">var OB_platformType =1;var OB_demoMode = false;var OB_langJS = "http://widgets.outbrain.com/lang_es.js";var OBITm = "1238007531722";</script><script src="http://widgets.outbrain.com/OutbrainRater.js" type="text/javascript"> </script>

¡Guarda cambios y listo! así de sencillo :-D

Y el resultado quedaría así...




En un email, Juanjo me pregunta cómo quitar el símbolo de interrogación [?] que aparece junto a la frase.



Para ocultarlo simplemente debes pegar el siguiente bloque en el mismo gadget (elemento de página) en el que pusiste el script de valoración:

<style>#whatIsSpan{
visibility: hidden;
display: none;</style>

Guarda cambios y el símbolo desaparacerá.

Debes saber que ese símbolo contiene un enlace al sitio Outbrain, por lo que sería aconsejable incluir en el blog, un enlace a dicha web.

Read More

Cómo insertar una caja de texto con imagen de fondo

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Anteriormente expliqué cómo poner textareas (cajas de texto) con un fondo de imagen, para personalizarlas un poco más. Para hacer el truco había que incluir valores en el CSS de la plantilla.

Ahora te explicaré cómo hacerlo sin tener que tocar la plantilla, copiando y pegando directamente el código...

Este es el código que debes usar:

<form>
<textarea cols="48" rows="3" style="background-image: url(URL DE TU IMAGEN DE FONDO); color: rgb(255, 255, 255); font-weight: bold; font-size: 12pt;">AQUI VA TU TEXTO O CÓDIGO</textarea>
</form>

Debes incluir lo siguiente:

URL DE TU IMAGEN DE FONDO: dirección (URL) de tu imagen de fondo.

AQUI VA TU TEXTO O CÓDIGO: escribe el texto o el código que deseas mostrar en la textarea.

Read More

Instala un botón para que enlazen tu blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Tu botón de enlace (con botón )

Tal vez hayas incluido algún script para evitar que los lectores seleccionen y copien el contenido en tu blog. Si además has instalado el widget 'botón de enlace con código', los visitantes no podrán enlazarte en su sitio web.

Dado que esto es una desventaja para ti, como autor, es aconsejable recurrir a un gadget 'conectado' a blogger, de manera que tan solo se tenga que pulsar un botón para vincular tu bitácora, sin necesidad de copiar o pegar código alguno.

<a href="http://elbalcondejaime.blogspot.com/" target="blank"><img title="El Balcón de Jaime" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQrdL_8ONjfoMruy9HKXJEylEbgPNZ8T5OIqCpzyNpi2BJ81ey_YCEPjQ7m7xk6A-8fCeonXu7sY1LVLYDvcjpmDKkZUg25jhTIxLy_Kbs2vQsmNaCRi2WXq7XRY5H_6Y3_lyhMkbzRM0/s1600-r/bannerbalcon.png" /></a><br />

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código en su interior:

<center><img src="URL IMAGEN" /><form action="http://beta.blogger.com/add-widget" method="post"><input value="Recomiendo..." name="widget.title" type="hidden"><textarea style="display: none;" name="widget.content"><a href="URL DE TU BLOG" target="blank"><img title="TITULO DEL BLOG" src="URL IMAGEN" /></a><br /></textarea><input value="http://buzz.blogger.com" name="infoUrl" type="hidden"><input value="http://www.blogger.com/favicon.ico" name="logoUrl" type="hidden"><img style="border:none;cursor:pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGT2uCWgdMMeWjAvY_xLk1kuGNwxNaBJbVec6V-eR3pGywpq14DSCc_FF-N1HXkGyLuD-MJtZHM3HasP8O_2GwDJ6O6JXoVibH0RD5VLeoVnEkpExdX-b7gt-pPjHqSeQEUUsPSZ6pJCY/s320/blcnbutt.png" value="Enlázame" name="go" type="submit"/></form></center>

Reemplaza URL IMAGEN por la dirección de tu banner o imagen, URL DE TU BLOG por la dirección del blog y TITULO DEL BLOG por el título.

El término Recomiendo... será el título del gadget del banner y puedes editarlo a tu gusto o simplemente eliminarlo.

Para el botón he utilizado una imagen con el texto 'Enlázame' pero puedes modificarlo cambiando la dirección resaltada en color grisáceo.

Si lo que prefieres es utilizar un botón corriente cambia esta línea:

<img style="border:none;cursor:pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGT2uCWgdMMeWjAvY_xLk1kuGNwxNaBJbVec6V-eR3pGywpq14DSCc_FF-N1HXkGyLuD-MJtZHM3HasP8O_2GwDJ6O6JXoVibH0RD5VLeoVnEkpExdX-b7gt-pPjHqSeQEUUsPSZ6pJCY/s320/blcnbutt.png" value="Enlázame" name="go" type="submit"/>

Por esta otra:

<input value="TEXTO DEL BOTON" name="go" type="submit"/>

Guarda el gadget y ofrecerás a tus lectores un sencillísimo procedimiento para enlazarte.

Read More

Contador de entradas en el blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Contador de entradas en el blog

El otro día me preguntaron si había alguna forma de poner algo parecido a un contador de posts en el blog.

Hace tiempo expliqué cómo añadir un contador de entradas y comentarios en el blog y, aunque es sencillo de aplicar un contador que sólo cuente los posts, explicaré como hacerlo por si lo quieres aplicar...

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este script:

<script style="text/javascript">
function showpostcount(json) {
document.write('En mi blog hay ' + parseInt(json.feed.openSearch$totalResults.$t,10) + ' posts que lo alegran día a día.');
}
</script>

<script src="URL DE TU BLOG/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

La frase que aparecerá será así:

En mi blog hay (aquí aparecerá el número de posts) posts que lo alegran día a día.

Si quieres cambiarla simplemente escribe la frase sustituyendo lo que está en verde.

Por último sustituye URL DE TU BLOG por la dirección (URL) de tu blog, por ejemplo: http://elbalcondejaime.blogspot.com

Nota:

Cuándo pongas la dirección de tu blog no pongas la barra al final (/) porque ya está aplicada justo antes de "feeds".

Read More

Instala caja de texto en tus entradas o gadgets

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Caja de texto con botón de selección automática del contenido

Previamente habíamos visto cómo añadir una textarea (caja de texto) en el blog.

Si quieres añadir una caja de texto que tenga un botón para seleccionar el contenido con un solo clic atiende a los siguientes pasos.

Este es el código que necesitarás para hacer tu textarea:

<center><form name="select_all">
<textarea rows="10" cols="30" name="text_area">
AQUI VA EL TEXTO O CODIGO A MOSTRAR
</textarea>
<input value="Seleccionar texto" onclick="javascript:this.form.text_area.focus();this.form.text_area.select();" type="button"/></form></center>

Sustituye AQUI VA EL TEXTO O CODIGO A MOSTRAR por el bloque de texto o código que desees mostrar en la caja.

El resultado será el siguiente...

Puedes añadir esta bonita caja de texto en un post o en un gadget html-javascript que encontrarás en la parte de diseño de tu plantilla ☺

Read More

Cómo redireccionar tu blog a otro blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Redireccionar tu blog a otro blog o a una web

Si quieres redireccionar a tus visitantes hacia un nuevo blog o una nueva web automáticamente sin tener que preocuparte por publicar avisos o enlaces a tu nuevo sitio atiende a este truco porque es muy sencillo y bastante útil...

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta </head> y encima pega este bloque:

<meta name="robots" content="noindex" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
var url = "AQUI LA URL DE LA WEB O BLOG"
(document.images) ? location.replace(url) : location.href = url;
//--><!]]></script>
<meta http-equiv="refresh" content="0;URL=AQUI LA URL DE LA WEB O BLOG" />

Sustituye AQUI LA URL DE LA WEB O BLOG en ambos casos por la dirección de tu nuevo blog o web.

Ahora busca la etiqueta <body> y debajo añade esta línea:

<a href="AQUI LA URL DE LA WEB O BLOG"></a>

Vuelve a escribir en esa línea la dirección de tu nuevo blog o web.

Puedes ver el resultado haciendo vista previa. Comprobarás que eres redireccionado a tu nuevo espacio. :-D

Read More

Botón que invita a "Poner el Blog como página de inicio"

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Botón "Convertir en página de inicio"

Si lo deseas, puedes incluir un botón en tu blog para ofrecer a tus visitantes la opción de usar tu página como "página de inicio" al abrir su navegador.

Tarometallica me preguntaba si podía poner el truco y aquí esta...

Tienes varias opciones para poner los botones:

Código para imagen:

<a onclick="Url= 'URL DE TU BLOG O WEB'; this.style.behavior='url(#default#homepage)';this.setHomePage(Url);" href="#"><img src="URL DE TU IMAGEN"title='TITULO DEL TOOLTIP'/></a>

El resultado:


Código para botón:

<a onclick="Url= 'URL DE TU BLOG O WEB'; this.style.behavior='url(#default#homepage)';this.setHomePage(Url);" href="#"><form><br /><br /><input onclick="javascript:agregar();" type="button" value="TITULO DEL BOTÓN"title='TITULO DEL TOOLTIP'><br /><br /></form></a>

El resultado:

Código para link (enlace):

<a onclick="Url= 'URL DE TU BLOG O WEB'; this.style.behavior='url(#default#homepage)';this.setHomePage(Url);" href="#">TITULO DEL LINK</a>

El resultado:

Convertir en mi página de inicio
Sustituye cuándo sea necesario:

URL DE TU BLOG O WEB: por la dirección de tu blog o web, por ejemplo http://google.es/

URL DE TU IMAGEN: por la dirección de la imagen que actuará como botón.

TITULO DEL TOOLTIP: por el título del tooltip (el cartelito que aparecerá al dejar el cursor encima durante un tiempo).

TITULO DEL BOTÓN: por el título que tendrá el botón.

TITULO DEL LINK: por el texto que actuará como link.

Nota: sólo funciona en Internet Explorer, en Firefox funciona cuándo le apetece. :-S

Read More

Añade una caja de suscripciones al blog

Entrada publicada originalmente en el balcón de Jaime. Visitar

Añade una preciosa caja de suscripciones en tu blog

Si te gusta ofrecer a tus lectores la posibilidad de suscribirse al contenido que publicas o invitarles a seguirte en Twitter, esta es sin duda tu mejor herramienta.

Construí una pequeña cajita con los colores y las tonalidades típicas de blogger -lo que la convierte en un artilugio muy familiar- y con un bonito efecto al pasar el cursor por encima de cada enlace.

Es una alternativa a los botones individuales que solemos incluir en nuestra barra lateral para ofrecer las mismas ventajas a todo visitante y por suerte, con una rápida instalación.

El resultado será el mismo que aparece en la imagen de la izquierda. ¿Te animas? ¡Empecemos!

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y añade esta línea encima (antes):

<link href="https://sites.google.com/site/scriptsbalcon/b/blcajCSS.css" rel="stylesheet" type="text/css"/>

Guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código en su interior:

<div id="blCajaMeta">
<div id="blCajaMetaContenid">
<div class="blcaja1"><a href="URL FEED">Suscríbete a mi feed</a></div>
<div style="padding:2px;border-bottom:1px dashed #E1D4C0;"></div>
<div class="blcaja2"><a href="URL FEED EMAIL">Suscríbete vía email</a></div>
<div style="padding:2px;border-bottom:1px dashed #E1D4C0;"></div>
<div class="blcaja3"><a href="URL TWITTER">Sígueme en Twitter</a></div>
</div>
</div>
<style>#blCajaMeta {width:220px;}</style>

Ahora tan solo debes reemplazar URL FEED, URL FEED EMAIL y URL TWITTER por la dirección del feed de tu blog, la dirección de la suscripción por email o correo electrónico (aconsejo utilizar Feedburner) y la dirección de tu perfil en Twitter -respectivamente-.

Las frases del código (resaltadas en color grisáceo) pueden editarse a gusto propio.

La cifra en color rojo (220) indica la anchura de la caja. Auméntala o disminúyela para ajustar el marco a tu barra lateral.



Si es así, haz uso de esta otra línea en el primer paso (en lugar de la indicada):

<link href="https://sites.google.com/site/scriptsbalcon/b/blcajCSSfcbk.css" rel="stylesheet" type="text/css"/>

Y añade esto justo antes de los cierres </div> y </div> del segundo código:

<div style="padding:2px;border-top:1px dashed #E1D4C0;" class="blcaja4"><a href="URL FACEBOOK">Seguir en Facebook</a></div>

Sustituye URL FACEBOOK por la dirección de tu perfil o página en dicha red social y edita la frase a mostrar si lo consideras necesario.

¡Guarda el gadget y habrás terminado!

Read More

Enlace o imagen que desaparece al hacer clíck

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Enlace o imagen que se mueve y se esfuma al hacer clic

En el anterior post aprendimos a usar prototype y scriptaculous para hacer que la sidebar o barra lateral del blog pudiese arrastrarse hasta una posición deseada.

Con este otro truco, y haciendo uso de los mismos scripts, conseguiremos un efecto magnífico para los enlaces o las imágenes en el blog.

Puedes ver el resultado haciendo clic sobre las siguientes imágenes...

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta y añade estos scripts encima:

<script src='http://sites.google.com/site/scriptsbalcon/b/blconfigtext.js' type='text/javascript'/>
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

<script type='text/javascript'>
function PuffEffect(element){
new Effect.Puff(element, {duration:3});
}
function ShowImage(element){
new Effect.Appear(element,{duration:1, from:1, to:1.0});
}
</script>

Las líneas resaltadas en color gris son los scripts de prototype y scriptaculous usados ya en varios trucos. Si están en tu plantilla, no es necesario que los agregues de nuevo.

Ahora guarda la plantilla.

Dirígete a una entrada cualquiera para probar el efecto con una imagen o un enlace...

1) Con imagen

Utiliza este código cada vez que desees insertarle el efecto a una imagen:

<div id="myimage" onclick="PuffEffect(this);">
<img style="cursor: pointer;" src="URL DE TU IMAGEN"/></div>

Reemplaza URL DE TU IMAGEN por la dirección de tu imagen o icono.

2) Con enlace

Utiliza este código cada vez que desees insertarle el efecto a un enlace:

<div id="myimage" onclick="PuffEffect(this);"><a href="DIRECCION">TITULO</a></div>

Reemplaza DIRECCION por la url o dirección de la página web o el blog, así como TITULO por el texto que llevará el enlace.

3) Con imagen y enlace

<div id="myimage" onclick="PuffEffect(this);">
<a href="DIRECCION"><img style="cursor: pointer;" src="URL DE TU IMAGEN" /></a>
</div>

Los códigos pueden utilizarse tanto en las entradas del blog como en los elementos de página o gadgets html-javascript que encontrarás en el apartado de Diseño.

Nota:

Para no estar copiando los códigos que insertan las imágenes o los enlaces con el efecto, haz uso de la plantilla de entrada que ofrece blogger.

Read More