Agregar el botón de iGoogle en Blogger

Para quienes no saben qué es iGoogle, digamos que es tu página de Google personalizada, la cual tiene el potente buscador Google y además puedes agregar contenido de terceros como noticias, pronóstico del tiempo, frases del día, correo electrónico, etc. De este modo conviertes tu habitual página de inicio de Google en una página personalizada con los gadgets que te interesan para tener todo a la mano.

Si aún no la tienes entra a iGoogle y accede con tu cuenta de Blogger o Gmail; añade los gadgets que quieras y listo.

Bien, entonces lo que haremos será crear un agregador para que tus lectores al pulsarlo puedanañadir a su iGoogle los últimos artículos de tu blog para que puedan estar al tanto de qué es lo que publicas.

Sólo entra a Diseño > Elementos de la página > Añadir un gadget y seleccionaHTML/Javascript, ahí pega lo siguiente:

<div>Agrega mi blog en tu iGoogle</div>
<a href="http://fusion.google.com/add?source=atgs&moduleurl=http%3A//nombre-de-mi-blog.blogspot.com/feeds/posts/default"><img border="0" alt="Add to Google" src="http://buttons.googlesyndication.com/fusion/add.gif"/></a>

Sólo cambia el nombre de tu blog y listo, tus lectores podrán tener acceso al contenido de tu blog desde iGoogle.

Agrega a Ciudad Blogger en tu iGoogle

Read More

Poner imagen en los títulos de los gadgets (Blogger)

El truco a continuación se aplica a cualquier gadget del blog y bien puede usarse para poner una imagen decorativa de fondo en el título, o bien para sustituir el título del gadget por una imagen.

Lo primero que hay que hacer es identificar el id del gadget al que se le quiere poner la imagen, para ello entra a Plantilla | Edición de HTML y SIN marcar la casilla de expandir artilugios busca el gadget al que vas a modificar, lo puedes identificar por el título, por ejemplo Etiquetas, o Lista de blogs.

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>

En este ejemplo el id del gadget es Label1 y corresponde a las etiquetas del blog.
Ya teniendo el id del widget, pega antes de ]]></b:skin> lo siguiente:

#Label1 h2 {
background: url(URL de la imagen) left top;
color: #000;
}

Y así sucesivamente para todos los gadgets a los que quieras ponerle la imagen de fondo, sólo debes cambiar la URL de la imagen y en color cambiar el color del texto del título.

Si lo prefieres también puedes cambiar todo el título por una imagen, sólo que en su lugar pegamos antes de ]]></b:skin> esto:

#Label1 h2 {
background: url(URL de la imagen) no-repeat top;
height: 30px;
}

De igual forma hay que cambiar la URL de la imagen, y en heigth poner el alto de la imagen.
Ahora ve a Diseño y da click en Editar en el gadget al que le cambiaste el fondo y borra el título del gadget, en su lugar escribe esto:

&nbsp;

De esta forma el título del gadget no se encimará con la imagen de fondo.

Con estos sencillos trucos podrás tener una plantilla cada vez más personalizada, ya sólo es cuestión de que agregues las imágenes que se adapten al diseño de tu plantilla.

Read More

Opción de guardar el post de blogger en PDF

Esto hará que su blog sea más dinámico, pues podrá guardarse en un documento que estará listo para ser enviado por email o para subirlo a cualquier página y pueda compartirse en otros medios.

Para ello usaremos un código desde el cual Web2pdfconvert nos permitirá guardar los post del blog en formato PDF.

Lo único que necesitas hacer es entrar a Diseño > Edición de HTML, marcar la casilla de Expandir artilugios y buscar esta línea:

<div class='post-footer-line post-footer-line-3'>

Si no aparece esa línea en tu plantilla busca esta otra:

<p class='post-footer-line post-footer-line-3'>

Ahora debajo de esa línea pega lo siguiente:

<script type='text/javascript'>
var
pdfbuttonlabel=&quot;Guardalo en PDF&quot;
</script>
<script src='http://www.web2pdfconvert.com/pdfbutton.js' type='text/javascript'/>

Guarda los cambios y listo, verás abajo de cada post la opción de guardar la entrada en PDF. Puedes verlo funcionando en este blog de pruebas, haz click en Guardar como PDF y se abrirá una página que hará la conversión de formato, cuando esté listo da click en Click to download PDF filey el archivo se descargará en tu equipo.

Read More

Gadget de estadísticas del blog

Este gadget al igual que el anterior ya ha circulado desde hace tiempo, se trata de mostrar el número de entradas y de comentarios que tiene el blog, sólo que yo le he agregado el tiempo de vida del blog, o sea los días que tiene online desde que se creó.

Para agregarlo entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascripty ahí pegar esto:

<div style="float: left;"><img style="width: 53px; height:48px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Yi0nFGEF18D_R04RI-Jign-aPXBQmIMzY3Vt5XeVs1VZ6af6nsgB66tfKOtMNbzdlz7_PadcqvGWrd-hobjjYOLxOrwqOcUZyqXCp5fLCZUcOfirX7WcixinovxDo3U_fWPPY_olACkh/s1600/stats.png"/></div>
<div style=" float: left; text-align: left; font-size:12px;">
<script> function DiasOnline(Dia, Mes, Year, Texto) { Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year); Resultado = Math.round((Hoy.getTime() - Inicio) / 86400000); document.write(Resultado + " " + Texto); } DiasOnline(22, 1, 2009, "" );</script> días online<br/>
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src="http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script> entradas
<br/>
<script src="http://nombre-de-mi-blog.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"></script> comentarios</div><div style="clear: both;"></div>

Ahora sólo cambia lo que está en negrita por la fecha que abriste tu blog, puedes saberlo viendo la fecha de tu primer post; primero va el día, luego el mes y por último el año. Igual cambia lo que está en color rojo por la dirección de tu blog y listo. Si quisieras cambiar la imagen sustituye lo que está en verde por la URL de tu imagen.

El resultado es este:

1807 días online
625 entradas
108815 comentarios

Read More

Mensaje de bienvenida sin script (Scroll)

Este mensaje de bienvenida es más sencillo pero no afectará a ningún otro elemento del blog por lo que podrás usarlo sin problemas; sólo usaremos el atributo marquee y le pondremos algo de color.

Sólo entra a Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:

<span style=" font-weight:bold; color:#DF0101; font-size:18px;">
<marquee bgcolor="FFFF00">Aquí va tu texto</marquee>
</span>

Arrastra ese elemento abajo de la cabecera o donde quieras, el resultado será este texto que se desplaza desde un lado hasta el otro:

Hola, bienvenid@ a mi blog

Puedes cambiar el color del texto modifica esto, color:#DF0101
Para cambiar el tamaño de la letra cambia esto, font-size:18px
Si quieres cambiar el color de fondo entonces cambia esto, bgcolor="FFFF00"

Read More

Opción de enviar mail con asunto y destinatario (Blogger)

Tener en el blog un enlace de contacto es fundamental, sobre todo para aquellos blogs de negocios que quieren ofrecerle a sus clientes la posibilidad de contactarse de manera fácil. Y claro, esto aplica para todos los bloggers que quieren estar cerca de sus lectores.

Vamos entonces a ver cómo poner un botón para enviar un correo electrónico y que al presionarlo aparezca una ventana para escribir el destinatario y el asunto. Puedes hacer click aquí para probarlo (aunque esta dirección no existe):

Para ponerlo en tu blog sólo pega el siguiente código en un elemento HTML/Javascript:

<script language="JavaScript"><!-- Begin
function mailsome1(){
who=prompt("Ingresa el destinatario: ","tucorreo@gmail.com");
what=prompt("Escribe el asunto: ","Hola");
{parent.location.href='mailto:'+who+'?subject='+what+'';
}
}
// End --></script>
<input value="Enviar correo" onclick="mailsome1()" type="button"/>

Sólo cambia la dirección de correo por la tuya y el título del asunto. También puedes hacerlo con una imagen, el código sería el siguiente:

<script language="JavaScript"><!-- Begin
function mailsome1(){
who=prompt("Ingresa el destinatario: ","tucorreo@gmail.com");
what=prompt("Escribe el asunto: ","Hola");
{parent.location.href='mailto:'+who+'?subject='+what+'';
}
}
// End --></script>
<img src="URL de la imagen" onclick="mailsome1()" title="Enviar email"/>

Así de sencillo podrás tener un botón o imagen de contacto para que te envíen emails. Recuerda cambiar la URL de la imagen por el ícono que quieras.

NOTA: Esta herramienta no es un programa para enviar correos, cuando un lector quiera mandar el correo se abrirá su cliente de correo que tenga instalado en su equipo.

Read More

Gadget para recomendar web por correo

A diferencia del SPAM, la recomendación de una página web por email puede ser una herramienta de ayuda para la promoción del blog, pues el gadget que en este caso crearemos, hará que tus lectores con un click puedan recomendar tu blog a sus amigos. No es SPAM, pues el correo sale de la dirección del usuario, no de un robot automatizado.

El usuario deberá ingresar la dirección de correo de su amigo y al hacer click se abrirá el cliente de correo electrónico que él use y dentro del mensaje estará incrustada una invitación junto con la dirección de tu blog.

Puedes ver un ejemplo funcionando en este blog de pruebas, en la barra lateral se encuentra el gadget para recomendar el blog.

Para ponerlo en tu blog entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y ahí pega esto:

<script language="JavaScript">
<!-- Begin

var initialsubj="Hola"
var initialmsg="Hola. \n Estoy seguro que este blog te gustara tanto como a mi: "+window.location
var good;
function checkEmailAddress(field) {

var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\..{2,2}))$)\b/gi);
if (goodEmail) {
good = true;
}
else {
alert('Por favor entra una dirección de correo.');
field.focus();
field.select();
good = false;
}
}
u = window.location;
function mailThisUrl() {
good = false
checkEmailAddress(document.eMailer.email);
if (good) {

//window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+document.title+" "+u;
window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+initialmsg
}
}
// End -->
</script>

<form name="eMailer">
<font size="2">Ingresa la dirección de tu amigo:</font>
<input onfocus="this.value=''" onmouseover="window.status='Entra dirección de email aquí y comentar a un amigo sobre esta página...'; return true" onmouseout="window.status='';return true" value=" Entrar dirección aquí" name="email" size="26" type="text"/>
<input onmouseover="window.status='¡Pulsa para enviar un correo a un amigo! Entra la dirección de correo arriba'; return true" onmouseout="window.status='';return true" value="Recomendar este blog" onclick="mailThisUrl();" type="button"/></form>

Puedes cambiar el mensaje que está en color rojo, ese es el mensaje que aparecerá en el correo, no uses acentos ni caracteres especiales.
El asunto también lo puedes cambiar modificando lo que está en verde.
La dirección de tu blog no hace falta escribirla pues se adjunta automáticamente.

Así de sencillo tendrás una herramienta más para poder promocionarte en la web.

Read More