Cabecera del blog cambiante (al azar)

Con unos pocos pasos podemos hacer que la cabecera del blog (header) tenga una imagen distinta cada vez que alguien entra a la página. En este caso la cabecera tendrá cinco imágenes distintas para poder mostrar cada vez que alguien entra al blog.

Primero necesitas tener las imágenes que vas a utilizar para el header, todas deben tener el mismo tamaño (ancho y alto) y deben estar alojadas en algún servicio de alojamiento. Si no sabes cuál es la medida de la cabecera de tu blog entra a Diseño > Edición de HTML y busca esto:

#header-wrapper {
width:660px;

En este caso el ancho de la cabecera es de 660px, si tuviera una altura predeterminada dira también height, sino puedes usar la altura que quieras.

Ya teniendo las imágenes entra a Diseño > Edición de HTML y SIN marcar la casilla expandir artilugios busca esta parte:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nombre del Blog (cabecera)' type='Header'/>
</b:section>

Ahora cambia el 'no' que está en negrita por 'yes' y elimina lo que está el color rojo. Luego guarda los cambios, te avisará que se suprimirá un artilugio, dale aceptar.

A continuación entra a Diseño > Elementos de la página y verás que la cabecera ha desaparecido, en su lugar aparece un recuadro que dice Añadir un gadget, da click ahí y selecciona HTML/Javascript. Ahí pega lo siguiente:

<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>

<script language="javascript" type="text/javascript">
var randHdr = randRange(1,5);

if (randHdr == 1) {
document.write('<img src="URL DE LA IMAGEN 1">')
} else if (randHdr == 2) {
document.write('<img src="URL DE LA IMAGEN 2">')
} else if (randHdr == 3) {
document.write('<img src="URL DE LA IMAGEN 3">')
} else if (randHdr == 4) {
document.write('<img src="URL DE LA IMAGEN 4">')
} else if (randHdr == 5) {
document.write('<img src="URL DE LA IMAGEN 5">')
}
</script>

Ya sólo cambia lo que está en rojo por la URL de la imagen y listo. Puedes ver un ejemplo funcionando en este blog de pruebas, al entrar verás una cabecera, presiona F5 para que se recargue la página y verás otra distinta.

Si quisieras agregar o quitar imagenes de la cabecera sólo quita o agrega (según sea el caso) esta línea del código del script:

else if (randHdr == 6) {
document.write('<img src="URL DE LA IMAGEN 6">')
}

Si agregas más fíjate que la línea que agregas tenga un número consecutivo, en este caso el 6
De igual modo si agregas o quitas imágenes cambia esta parte del script:

randRange(1,6)

Donde está el 6 es el número de imágenes que se mostrarán.

Personalizar los links Entradas antiguas, Entradas mas recientes

Los links del pie de navegación, o sea, esos que dicen Entradas antiguas - Entradas más recientes son de mucha utilidad para el lector pues facilita la navegación dentro del blog, sin embargo no siempre se ven muy atractivos, así que podemos personalizarlos para poner otro texto o sustituirlos con algún ícono.

Entra a Diseño > Edición de HTML, marca la casilla Expandir artilugios y busca esto:

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl + &quot;?max-results&quot; ' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

La parte que está en color rojo es la que muestra el texto Entradas más recientes, puedes eliminarlo y poner cualquier otro texto, o bien, cambiarlo por una imagen, sólo tendrías que sustituir lo que está en rojo por esto:

<img src='URL de la imagen'/>

Ahora buscamos un poco más abajo y encontramos este código:

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

Este es el que muestra el link de Entradas antiguas. Haremos lo mismo que en el anterior cambiando lo que está en color rojo.

Y por último encontramos abajo este código:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

Este es el que muestra el texto Página principal, igual se cambia lo que está en rojo por otro texto o imagen.

Aquí les dejo unos íconos que encontré que pueden usar.

Caja de avisos con efecto de desvanecimiento

El siguiente script nos dará una caja de mensajes con un efecto de fade, es decir, con desvanecimiento entre cada mensaje.

Aunque no tienen links los mensajes, este truquito pueden servirte para dar la bienvenida, dejar un aviso, o poner un recordatorio en el blog.

Sólo entra a Diseño > Elementos de la página > Añadir un gadget, y en un elemento HTML/Javascrip pega lo siguiente:

<script language="JavaScript1.2">

var delay=3000 //pausa (en milisegundos)
var fcontent=new Array()
begintag='<font face="Arial" size="2">' //tag que abre los mensajes
fcontent[0]="Esta es una caja de avisos y mensajes..."
fcontent[1]="Con un efecto de desvanecimiento..."
fcontent[2]="Aprende cómo tener uno aquí..."
fcontent[3]="<b>CiudadBlogger.com</b>"
closetag='</font>'

var fwidth=160 //ancho
var fheight=150 //alto

///No editar/////////////////

var ie4=document.all&&!document.getElementById
var ns4=document.layers
var DOM2=document.getElementById
var faderdelay=0
var index=0

if (DOM2)
faderdelay=2000

//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb(255,255,255)"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
colorfade()
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag
else if (ns4){
document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)
document.fscrollerns.document.fscrollerns_sub.document.close()
}

index++
setTimeout("changecontent()",delay+faderdelay)
}

// colorfade() partially by Marcio Galli for Netscape Communications. ////////////

frame=20;
hex=255 // Initial color value.

function colorfade() {
// 20 frames fading process
if(frame>0) {
hex-=12; // increase color value
document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")"; // Set color value.
frame--;
setTimeout("colorfade()",20);
}
else{
document.getElementById("fscroller").style.color="rgb(0,0,0)";
frame=20;
hex=255
}
}

if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+';padding:2px"></div>')

window.onload=changecontent
</script>


<ilayer id="fscrollerns" width="&{fwidth};" height="&{fheight};"><layer id="fscrollerns_sub" left="0" width="&{fwidth};" top="0" height="&{fheight};"></layer></ilayer>

Cambia lo que está en color rojo por tu mensaje, puedes agregar o quitar más líneas.

Puedes modificar el ancho y alto de la caja cambiando los valores que están en color azul al inicio del código.

Para quitar el borde de la caja busca donde dice border en color verde y cambia 1px por 0px.

Si quieres cambiar el color del texto busca lo que está en negrita style.color="rgb(0,0,0)" y pon ahí el código hexadecimal del color, por ejemplo si lo quieres rojo sería rgb(255,0,0), si lo quieres color verde sería rgb(00,80,00), amarillo sería rgb(255,255,0), etc.

IMPORTANTE: Es posible que si tienes muchos script en tu blog, la caja de avisos no funcione.
Puedes ver un ejemplo funcionando en este blog de pruebas.

Actualizar página automáticamente (sin botones)

Si tienes un blog de noticias con muchos colaboradores seguro publicarás más de cinco post al día, por lo que actualizar la página principal del blog es básico para el lector.

Este script hace que la página se actualice automáticamente cada determinado tiempo, sin necesidad de presionar ningún botón de "Actualizar".

El script original hace que se recargue todo el blog, tanto la portada como las entradas individuales, yo le he hecho una modificación para que sólo se actualice la portada que es donde aparecen los post nuevos, de esta forma quién esté leyendo una entrada individual no verá interrumpida su lectura con la recarga de la página.

Sólo hay que pegar antes de </head> lo siguiente:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<script>setTimeout(&#39;document.location.reload()&#39;,60000); </script>
</b:if>

El script hará que cada minuto se recargue sola la página principal, para modificar el tiempo entre una actualización y la siguiente cambia lo que está en rojo. Ahí está en 60 segundos, si quisieras menos tiempo cambia el valor en milisegundos, por ejemplo 10 segundos sería 10000.

Si quieres que el script haga que se actualicen también las páginas individuales entonces el código que deberás pegar antes de </head> es el siguiente:

<script>setTimeout(&#39;document.location.reload()&#39;,60000); </script>

La modificación del tiempo de actualización es la misma.

Scroll de bienvenida en el blog

Este scroll de bienvenida está hecho a base de un script que hará que se muestren líneas de mensajes con las letras apareciendo como si se estuvieran redactando con una máquina de escribir.

Sólo entra a Diseño > Elementos de la página y en un elemento HTML/Javascript pega lo siguiente:

<script language="JavaScript1.2"><!--

//Secify scroller contents
var line=new Array()
line[1]="Este es un scroll muy útil para dar la bienvenida..."
line[2]="Y motrar noticias relevantes a tus lectores..."
line[3]="Puedes configurarlo para poner el mensaje que quieras..."
line[4]="Quieres uno...?"
line[5]="CiudadBlogger.com"
line[6]="..."

//Specify font size for scoller
var ts_fontsize="12px"

//--Don't edit below this line

var longestmessage=1
for (i=2;i<line.length;i++){
if (line[i].length>line[longestmessage].length)
longestmessage=i
}

//Auto set scroller width
var tscroller_width=line[longestmessage].length

lines=line.length-1 //--Number of lines

//if IE 4+ or NS6
if (document.all||document.getElementById){
document.write('<form name="bannerform">')
document.write('<input type="text" name="banner" size="'+tscroller_width+'"')
document.write(' style="background-color: '+document.bgColor+'; color: '+document.body.text+'; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">')
document.write('</form>')
}

temp=""
nextchar=-1;
nextline=1;
cursor="]"
function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
nextline++;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",3000)}
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
nextline=1;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else{
nextstep()}}

function nextstep(){

if (cursor=="\\"){
cursor="|"}
else if (cursor=="|"){
cursor="/"}
else if (cursor=="/"){
cursor="-"}
else if (cursor=="-"){
cursor="\\"}


nextchar++;
temp+=line[nextline].charAt(nextchar);
document.bannerform.banner.value=temp+cursor
setTimeout("animate()",25)}

//if IE 4+ or NS6
if (document.all||document.getElementById)
window.onload=animate
// --></script>

Cambia lo que está en color rojo por el mensaje que quieras. Si necesitas más líneas de mensaje sólo agrega una igual usando un número consecutivo (7,8,9,etc.)
Para modificar el tiempo que tarda cada mensaje cambia el número 3000 que está en verde, en este caso 3000 representa 3 segundos, si deseas más tiempo sólo modifica en milisegundos el tiempo que deseas.
Puedes ver un ejemplo funcionando en este blog de pruebas.

Mostrar mayor numero de entradas en los links de navegacion

Cuando hemos configurado el blog para que se muestren un cierto número de entradas en la página principal notamos algo, por ejemplo si lo tenemos para que se muestren 3 entradas, cuando un lector da click en los links de navegación (Entradas más recientes / Entradas antiguas) también se mostrarán sólo 3 resultados.

Esto hace que el lector tarde mucho en encontrar el post que quiere.

Lo que haremos será modificar el número de entradas en los resultados, de modo que en la página principal se muestren sólo el número que ustedes han elegido, pero que al hacer click en los links de navegación se muestren 20 entradas.

Para ello entra a Diseño > Edición de HTML y con la casilla marcada de Expandir artilugios busca esta parte del código y agrega lo que está en color rojo:

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl + "?max-results" ' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>

Un poco más abajo buscamos este código y hacemos lo mismo agregando lo de color rojo:

<a class='blog-pager-older-link' expr:href='data:olderPageUrl + "?max-results" ' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>

Guarda los cambios y listo, tendrás mayor número de entradas en los resultados.

Visto en: El escaparate de Rosa

Solucion a fecha "Undefined"

Hay muchas plantillas que tienen un recuadro junto al post con la fecha, lo cual hace que la fecha resalte y adorne muy bien al blog. Pero hay un problema, cuando cambiamos a ese tipo de plantillas la fecha no aparece, en su lugar aparece un letrero que dice Undefined y hace que la plantilla pierda su encanto.

Para solucionar esto entra a Configuración > Formato y modifica el Formato de cabecera de fecha, a modo que aparezca primero el mes, el día y luego el año, por ejemplo: julio 19, 2009

Luego modifica el Formato de fecha del índice de archivos mostrando primero el mes y luego el año, por ejemplo: julio 2009

Por último,cambia el Formato de hora mostrando primero el día en letras, luego el mes, el día en número y el año, por ejemplo: domingo, julio 19, 2009

Guarda los cambios y listo, la fecha se mostrará sin problema alguno en todos tus post.

Mostrar gadgets solo en las entradas

En el post anterior vimos cómo mostrar los gadgets sólo en la página principal, o sea en la portada del blog, de modo que cuando el usuario haga click en una entrada los gadgets editados desaparezcan.

Ahora haremos lo contrario, es decir, hacer que algunos gadgets estén ocultos en la portada, pero al entrar a un post éstos aparezcan.

Haremos el mismo procedimiento, hay que entrar a la edición HTML del blog con los artilugios expandidos y localizar el gadget. Luego agregar lo que está en color rojo:

<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>

Como ven, el procedimiento fue exactamente el mismo, sólo cambia la primera línea en rojo que agregamos, que es la condicional que le ordena al gadget aparecer sólo cuando se está en las páginas individuales.

De igual forma este truco se aplica para cualquier gadgtet, sólo hay que localizar la línea <b:includable id='main'> para pegar después de ella la condicional, y la línea </b:includable> que es antes de ella donde se cierra la condicional.

Mostrar gadgets solo en la portada

Uno de los mayores problemas que presentan todos los blogs es el tiempo que tarda en cargar la página. Si bien hay gadgets que podemos eliminar para hacer la carga más ligera, hay otros gadgets que son muy necesarios para el blog y no queremos eliminarlos, así que lo que haremos será mostrarlos sólo en la página principal, o sea en la portada, y cuando el lector entre a una entrada estos desaparecerán.

Para lograr esto modificaremos el código del gadget que queramos ocultar en las entradas. En ese ejemplo usaremos el código de un gadget HTML/Javascript. Sólo hay que localizar el gadget con los artilugios expandidos y agregar lo que está en rojo.

<b:widget id='HTML1' locked='false' title='Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- 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>

Como ven, la primera parte que agregamos va justo después de
<b:includable id='main'> y la segunda parte justo antes de </b:includable>

Esto lo hacemos con cada uno de los gadgets que queremos esconder, aunque todos tienen un código distinto, sólo hay que guiarnos por lo que mencionamos anteriormente.

De esta forma todos los gadgets se mostrarán en la portada, pero en las entradas se ocultarán aquellos que hayamos modificado.

Ocultar/Eliminar el mensaje "Mostrando entradas con la etiqueta..."

Cuando se está buscando una entrada dentro del blog y usamos las etiquetas para localizarla, aparece un recuadro con el mensaje:

Mostrando entradas con la etiqueta XXXXX. Mostrar todas las entradas.

O bien, al hacer una búsqueda dentro del blog aparece el mensaje:

Ninguna entrada coincide con la consulta. Mostrar todas las entradas.

Para ocultar este mensaje hacemos lo siguiente:

Entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega esto:

.status-msg-wrap {visibility:hidden;display:none;}

Guarda los cambios y listo.

Para eliminar el mensaje:

Entra a Diseño > Edición de HTML, marca la casilla Expandir artilugios y busca este código:

<b:include data='top' name='status-message'/>

Elimínalo y guarda los cambios.

Con cualquiera de estos dos métodos, ese recuadro dejará de aparecer en nuestras búsquedas.

Gana un dominio GRATIS con Respondones

Respondones ha sacado su primer concurso para todos los bloggers que deseen hacerse de un dominio propio. CiudadBlogger.com y Cyberbloggero.com te invitan a que participes.

PREMIO

• 1 dominio gratis por un año
• Redireccionamiento de dominio
• Redireccionamiento de correos
• Protección de privacidad de datos
• 1 banner por 1 mes en Respondones (125x125)
• 1 banner por 1 mes en Fondos 240 (115x80)

BASES

Para participar debes ser dueño de un blog y publicar un review acerca de Respondones. No hay límite de palabras, sólo tienes que poner dentro del post dos enlaces que apunten hacia la página principal de Respondones; el texto del primero deberá decir Respondones, y el segundo Respuestas a preguntas curiosas. Por ejemplo:

Respondones es un sitio pensado para aprender de forma divertida, en él encontrarás las respuestas a preguntas curiosas que todos nos hemos hecho alguna vez...

Una vez que publiques el review haz click aquí. para registrarte.

El concurso comienza el 10 de julio de 2009 y finaliza el 3 de agosto de 2009. El resultado se publicará el día que finaliza el concurso. El ganador será escogido por medio de un sorteo a través de Random.org y será grabado y publicado en video en Ciudad Blogger.

Para conocer los términos y condiciones del concurso haz click aquí.

Esta es tu oportunidad para hacerte de tu propio dominio.

¡Participa!

Te recomiendo que te suscribas a este feed para estar al tanto de los resultados o posibles cambios que pudieran surgir.

Mostrar sólo los títulos de las entradas en una busqueda

Algunos se habrán fijado que al dar click sobre una etiqueta, al archivo del blog o al hacer una búsqueda, los resultados se muestran en una lista de títulos de las entradas, y al darle click se muestra el contenido.

Esto no sólo ayuda a que el lector localice más fácil lo que está buscando, sino que agiliza enormemente la carga de la página.

Para hacerlo en el blog haz primero un respaldo de tu plantilla y luego haz lo siguiente:

Entra a Diseño > Edición de HTML, marca la casilla Expandir Artilugios y pega antes de </head> lo siguiente:

<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>
<script src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/Expandibles.js" type="text/javascript">
</script>

Ahora busca el código que está en color negro y agrega el código en color rojo donde se indica:

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td width='40px'>
<a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'>[+/-]</a></td>
<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>

</b:if>

Guarda los cambios y listo, podrás ver el resultado al hacer click sobre una etiqueta del blog. Los signos [+/-] que se han agregado a los títulos es para que la entrada se expanda. Puedes hacer click ahí para ver la entrada expandible o directamente en el título del post.

Visto en: El escaparate de Rosa.

Anuncio negro en imágenes de Imageshack

Si bien hoy no pensaba escribir ningún post, me vi obligado a hacerlo debido a que varios de ustedes me mandaron correos preguntando sobre qué era una imagen negra que aparece en sus blogs.

La imagen es la siguiente:

Al parecer Imageshack fue hackeado por un grupo auto denominado "Anti-sec", y muchas fotos que están subidas en Imageshack han sido cambiadas por este anuncio negro.

Si bien Imageshack no ha mencionado nada al respecto, no sabemos si estas fotos se podrán recuperar, o peor aun, si las demás fotos que tenemos ahí serán afectadas también.

Si tienes imágenes alojadas en ese servidor entra a tu cuenta y descarga todas las fotos en tu ordenador. Si tienes una cuenta en otro servicio de alojamiento úsalo y sube ahí tus imágenes.

De igual forma entra a Diseño > Edición de HTML, marca la casilla Expandir artilugios y busca todas las URL que tengan la palabra 'imageshack'. Cambia esas URL por las nuevas direcciones donde has alojado ahora las imágenes.

Como hasta al momento no se tienen más noticias, es importante que cambies todas las URL de las fotos aunque no hayan sido afectadas, ya que como no sabemos si Imageshack pueda recuperar la seguridad de su sitio, cualquier foto podría ser afectada.

La mayoría tiene alojados en Imageshack los íconos de los bookmarks, y algunos de estos ya han sido afectados con este letrero. Así que pongo a su disposición las imágenes de los bookmarks que ya he respaldado en Picasa, sólo debes darle click con el botón derecho y copiar la URL de la imagen.

Si hubiera alguna imagen que les di anteriormente y no pudieron rescatarla sólo pídanmela para darles la nueva URL.

Decora los títulos de los post con iconos

Se dice que una imagen dice más que mil palabras, así que en la lucha por llamar la atención del lector podemos apoyarnos en una imagen y poner un icono en el título de la entrada para acaparar su atención, tal como lo he puesto yo en el título de este post.

Hay dos formas de hacerlo, una es manualmente, y aparecerá sólo cuando tú quieras, en el lugar que quieras y usando diversos iconos.

Y la otra es alterando el código de la plantilla para que aparezcan automáticamente, en un lugar específico y usando siempre el mismo icono.

Veamos pues las dos formas de hacerlo:

La primera, que a mi gusto es la más conveniente, se logra poniendo una línea de código en el título de la entrada. Sólo hay que poner esto dentro del título del post:

<img src="URL del icono" /> TÍTULO DEL POST

Esta línea la puedes poner antes del título como está ahí, al final, o en medio de las palabras. Sólo cambia la URL del ícono por la dirección donde tienes alojada la imagen.

Para la segunda opción entra a Diseño > Edición de HTML, marca la casilla Expandir artilugios y busca esta parte:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>

Y lo sustituyes por esto:

<b:if cond='data:post.url'><img src="URL del icono" />
<a expr:href='data:post.url'><data:post.title/></a>

Eso hará que el icono quede antes del título, si lo quisieras que quede al final entonces deberás sustituirlo por esto:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/><img src="URL del icono" /></a>

Ten en cuenta que si aplicas este método el mismo icono aparecerá en los títulos de todas tus entradas y siempre será el mismo.

Para cualquiera de los métodos hay que cambiar lo que está en color rojo por la dirección donde está alojado el icono. Si no tienes ningún icono puedes descargar este pack con 1000 iconos para que empieces a decorar los títulos de tus post.

Descargar

5 sets de iconos para marcadores sociales

Esta es una compilación de iconos de marcadores sociales que encontré en la red. Todos son de uso libre y algunos de ellos vienen en diferentes tamaños.

El primero es un pack de 17 iconos circulares en tamaños de 32x32, 64x64 y 128x128. Esta creación de Eli, contiene marcadores para Blogger, Delicious, DesignFloat, Digg, Facebook, Flickr, Google, MySpace, Reddit, StumbleUpon, Technorati, Twitter, WordPress, Yahoo, YouTube, RSS y un ícono de corazón.

Descargar

---

Este paquete de iconos está diseñado por Helen Gkizi, se trata de 12 íconos en forma de bebidas. La medida de estos iconos es de 128x128 y contiene marcadores para Delicious, Designfloat, Digg, Furl, Reddit, Rss, Smashing, Stumbleupon, Technorati, Twitter, Yahoo y Youtube.

Descargar

---

Este set está compuesto por 26 íconos sociales en tres medidas distintas, 16x16, 32x32 y 64x64. El diseño de Tydlinka está inspirado en corcholatas de botellas y trae iconos para Linkuj, Vybrali sme, Jagg, Top odkazy, Top clanky, Delicious, Twitter, Facebook, Flickr, Reddit, Rss, Technorati, Stumpleupon, Digg, Bookmarky, Fungu, Pridat, Designfloat, DeviantART, Google, Last.fm, Seznam, Linkedin, Myspace, Vimeo y Youtube.

Descargar

---

Este pack de íconos en forma de corazón es una creación de Aravind Ajith para Smashing Magazine, y contiene 22 íconos en medidas de 16x16, 32x32 y 64x64. Este set incluye marcadores para: Blinklist, Delicious, Designbump, Designfloat, Digg, Dzone, Facebook, Flickr, Fulr, Google, Heartmysite, Linkedin, Mixx, Reddit, Rss, Smashingmagazine, Stumble, Technorati, Twitter, Visualizeus, Votetime y Yahoo.

Descargar

---

Paddy Donnelly hizo este pack de iconos estilo origami. El set incluye 15 iconos en medidas de 40x40, 100x100 y 250x250. Contiene iconos para: Mozilla, Apple, Delicious, Basecamp, Digg, Flickr, Gmail, IE, iTunes, Mint, Opera, RSS, Skype, Stumbleupon y Twitter.

Descargar

Entradas relacionadas en Blogger

Me pregunta el Dr. Pagé cómo poner las entradas relacionadas en Blogger. Rosa hizo una excelente adaptación del código de JMiur para conseguir esta herramienta, la cual se basa en la recopilación de palabras y etiquetas que se relacionen con la entrada en cuestión.

Primero entra a Diseño > Edición de HTML y haz un respaldo de tu plantilla por si no obtuvieras los resultados esperados.

Luego con los artilugios expandidos busca la etiqueta ]]></b:skin> y justo debajo de ella pega lo siguiente:

<script type='text/javascript'>
//<![CDATA[

var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();

function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}

function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}

function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 5) {
break;
}
}
document.write('</ul>');
}

//]]>
</script>

Ahora busca esta línea:

<b:loop values='data:post.labels' var='label'>

Y justo antes del siguiente </b:loop> pega esto:

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"'
type='text/javascript'/>
</b:if>

Ya sólo busca esta línea:

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

Y pega debajo de ella lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-footer-line post-footer-line-4' id='relpost'>
<h4>Entradas relacionadas:</h4>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div></b:if>

Guarda los cambios y listo. El resultado lo verás haciendo click en una entrada de tu blog, pues no se mostrará en la página principal.

Crea tu propia barra de herramientas

El poder ofrecerles a tus usuarios una barra de herramientas para su navegador de Internet no sólo le da un toque de profesionalismo a tu blog, sino que genera un gran tráfico de visitas hacia tu sitio.

Conduit te permite crear y personalizar tu propia barra de herramientas en la cual puedes incluir el logotipo de tu blog, un lector de feed, búsqueda web, notificador de correos, avisos en tiempo real, juegos, chats y muchas cosas más.
Para crear la tuya hay que seguir estos pasos:

1. Entra a Conduit y regístrate.
2. Una vez registrado, haz click en Edit It Now.

3. Agrega los gadgets que quieras, tu logotipo, etc. y edítalos a tu gusto.
4. Una vez que hayas terminado de personalizarla, copia la dirección que aparece en Your toolbar's download page.

5. Comparte esa dirección con tus lectores para que descarguen tu barra de herramientas, o entra en la pestaña llamada Banners y selecciona un banner de descarga y ponlo en tu blog.

Así de sencillo puedes ofrecerle a tus seguidores una innovadora forma de estar al día con tu blog. Este complemento puede desinstalarse en cualquier momento y es compatible con Mozilla Firefox e Internet Explorer. Además, el usuario puede añadir más gadgets a la barra, por lo que podrán personalizarla de acuerdo a sus necesidades.

Y por si fuera poco puedes unirte al programa de afiliados en el cual te pagan una comisión por cada barra de herramientas que se descargue e instale.

Enlace: Conduit

Cómo poner un panel de acceso en Blogger

Chica Blogger ha traducido al español este código para poner un panel de acceso en el blog, así como los que usan los usuarios de Wordpress.
Este panel de acceso estará colocado en tu blog de modo que desde ahí puedas ingresar a tu cuenta de Blogger. Incluso cualquier usuario de Blogger podrá ingresar a su cuenta desde ahí sin problemas, ya que los datos no se alamacenan.

Para agregarlo e tu blog, entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

#loginform{
border: 1px solid #000;
background: #E0ECF8;
padding-bottom: 10px;
}
#Email, #Passwd{
border: 1px solid #000;
}

#signin-btn-ns {
color: #fff;
background: #084B8A;
border: 1px solid #000;
}

Ahora en un elemento HTML/Javascript pega esto:

<center><div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://draft.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fdraft.blogger.com%2F" name="continue" type="hidden"/>
<br/>
<div>
<label for="Email"> Cuenta:
<br/><input id="Email" tabindex="1" name="Email" size="20" type="text"/>
</label>
</div>
<br/>
<div>
<label for="Passwd"> Contraseña: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Olvidé mi contraseña">?</a>)
<br/>
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>
</div>
<br/>
<input id="signin-btn-ns" tabindex="0" value="Enviar" class="ubtn ubtn-block" name="submit" type="submit"/>
</form></div></center>

Guarda los cambios y listo. Si quieres cambiar el color de fondo cambia el código que está en rojo por el color que quieras.
Puedes ver el resultado y loguearte en este blog de pruebas.

Botones para el menú de pestañas

En otro post expliqué cómo poner un menú horizontal en el blog. Vi en varios blogs que lo implementaron pero el color gris del menú no combina con la plantilla de su blog. Así que hice más botones de distintos colores para que tengan más variedad en el diseño.

Todos tienen el mismo efecto que cambia de color al pasar el mouse sobre él. Las indicaciones son las mismas del post anterior, sólo hay que cambiar el código que va antes de ]]></b:skin> por uno de los siguientes, dependiendo del que más les guste:

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://lh3.ggpht.com/_dsEG33PDaHw/Sk0PpgVjCmI/AAAAAAAAABo/1ngE9K8oKUM/s128/lefttabbed-blue.PNG) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 7px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img514.imageshack.us/img514/9711/tabbedblue.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del menú */

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://lh5.ggpht.com/_dsEG33PDaHw/Sk0Ppu0JhrI/AAAAAAAAABs/t0vZPWdFl38/s128/lefttabbed-green.PNG) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 7px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img27.imageshack.us/img27/945/tabbedgreen.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del menú */

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://lh4.ggpht.com/_dsEG33PDaHw/Sk0PpoN4alI/AAAAAAAAABw/8ednVAn295Q/s128/lefttabbed-purple.PNG) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 7px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img514.imageshack.us/img514/7015/tabbedpurple.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del menú */

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://lh3.ggpht.com/_dsEG33PDaHw/Sk0Pps0fcVI/AAAAAAAAAB0/HN5FX_MoRMU/s128/lefttabbed-red.PNG) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 7px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img27.imageshack.us/img27/9168/tabbedred.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del menú */

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://lh5.ggpht.com/_dsEG33PDaHw/Sk0PpvhhHeI/AAAAAAAAAB4/-BK98lkjqZs/s128/lefttabbed-yellow.PNG) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 7px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img34.imageshack.us/img34/5144/tabbedyellow.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del menú */