Poniendo íconos de navegación

Una pregunta frecuente que se me hace en el blog y por el e-mail es cómo sustituir esto:



Por esto:



Es decir, sustituir el texto por íconos de navegación. Es muy sencillo hacerlo y vamos a ver cómo hacerlo:

♠ Vamos a Diseño - Edición HTML - Expandir plantilla de artilugio.
♠ Con ayuda de CTRL+F buscamos el siguiente código en la plantilla:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

</span>

</b:if>



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


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

</div>

<div class='clear'/>
</b:includable>

♠ El código anterior lo reemplazaremos por el siguiente:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='AQUÍ-URL-IMAGEN-IZQUIERDA'/>
</a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='AQUÍ-URL-IMAGEN-DERECHA'/>
</a>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='AQUÍ-URL-IMAGEN-CENTRO'/>
</a>
</div>
<div class='clear'/>
</b:includable>

♠ Reemplazamos AQUÍ URL por la imagen correspondiente, teniendo en cuenta que:
» AQUÍ-URL-IMAGEN-IZQUIERDA reemplaza a "Entrada más recientes".
» AQUÍ-URL-IMAGEN-DERECHA reemplaza a "Entrada antiguas".
» AQUÍ-URL-IMAGEN-CENTRO reemplaza a "Página principal".

♠ Damos click a guardar y listo! En próximas entradas veremos más formas de personalizar los íconos de navegación.

BlogDay Perú - 2009

Desde hace unos años se viene celebrando en Perú el Día del Blog o Blog Day, y este año no será la excepción.

Aquí os dejo el calendario completo de actividades que se viene por el Día del Blog en Perú y si desean información extra, pueden visitar el weblog oficial del BlogDay Perú 2009.

» Miercoles 26 de Agosto
"Fiesta Blogger por el BlogDay - Auspiciada por Claro Blackberry Combo Anual"
Lugar: Ananda Lounge (Psje Julio C. Tello #269, Miraflores)
Hora: 8.00pm

» Viernes 28 de Agosto
"Evento Blogday 2009 - Auspiciado por Paginas Amarillas, Lamula.pe y Perublogs.com"
Lugar: Centro de Convenciones Maria Angola - Salon las Campanas (La Paz 623 Miraflores)
Hora: 6.30pm (Registro), 7.00pm (Inicio de Ceremonia)

"After Party Blogday 2009 - Auspiciado por Barena"
Lugar: Barza Xtreme (Calle Grau 288 miraflores, altura cuadra 6 de Pardo)
Hora: 10.00pm (Brazaletes se entregarán en la Ceremonia).

► Para mayor información visita : BlogDay Perú 2009

Radio Online » DeJotaS Radio

Hace unos días me enteré de una maravillosa noticias: Rosa, de El Escaparate, acaba de inaugurar una radio online llamada DeJotaS Radio, donde Rosa también participa como la Dj Hada.

Y si eres de Perú, no te preocupes que también puedes escuchar la radio. Aquí te dejo los horarios de cada Dj (los horarios están de acuerdo a la hora de Perú):

Horarios para Perú:

Debo decir que he estado escuchando la programación y la música y están muy buenas. Además, tienes la posibilidad de pedir canciones o dedicar algún tema a alguien especial.

► Ya sabes si quieres escuchar DeJotaS Radio , ve a su blog y diviértete!!!

Subiendo nuestra música a Mixpod con Boxstr

Hace un tiempo publiqué un post sobre un reproductor de música muy bueno llamado Mixpod. Y una pregunta frecuente que se hacía era cómo subir nuestras propias canciones a nuestro reproductor de música Mixpod.

Bien, para los que no desean usar las canciones que nos ofrece Mixpod, sino que desean subir sus propias canciones, veremos cómo hacerlo.
Si deseas hacer tu reproductor de música con las canciones de Mixpod, te sugiero que mires esta entrada.

Bien, antes que nada quiero indicarles que Mixpod no posee aún alguna herramienta para subir directamente la música desde nuestra PC, pero sí admite URLs, por lo tanto tendremos que subir nuestra música a un alojamiento, obtener la URL y pegarla en Mixpod. Si bien hay varios sitios para alojar archivos MP3, hoy usaremos Boxstr. Así que lo primero que tienes que hacer es crearte una cuenta en Boxstr.

Una vez creada sigue los siguientes pasos:

1. Entra a tu cuenta y has click en Upload.
2. Ahora, del menú desplegable, has click en My Music.
3. Has click en Examinar y escoge la canción que desees subir.
4. Has click en Upload selected files y espera hasta que suba tu música.



♠ Al final, se mostrará una ventana con un enlace, es la URL de la canción y que usaremos en Mixpod.



Ahora entramos a Mixpod.

♠ Del menú, has click en "Create Playlist"
♠ Luego, sigue los pasos que te indican:
» En "Add music" selecciona "Add URL". Donde dice URL pegaremos la URL que obtuvimos en Boxstr. Le damos un título a la cacnión y el nombre del artista. Damos click en "Add Track". Si queremos subir más cacniones haremos lo mismo.
♠ Seguiremos los demás pasos de esta entrada.

Y éso es todo. Claro que pueden usar otro alojamiento. Por ejemplo, UnPerro recomienda hotlinkfiles.com.

► Si es la primera vez que usas Mixpod y no sabes de qué trata, te sugiero que mires primero esta entrada que contiene una DEMO de Mixpod: Mixpod » música en tu blog

Botón para agrandar o achicar el tamaño de letra del blog

Hay quienes sufren de problemas a la vista; quizás no puedan leer letras muy pequeñas o al mirar letras pequeñas se les canse la vista rápidamente. ¿Cómo podemos ayudar a estos lectores? Pues aplicando un botón para que ellos puedan graduar el tamaño de letra que les sea más fácil de leer.

El conseguirlo es muy sencillo.

♠ Primero vamos a Diseño - Edición de HTML y con ayuda de CTRL+F buscamos </body>.
♠ Antes de </body> pegaremos el siguiente script:

<script type='text/javascript'>
//<![CDATA[
var tgs = new Array( 'div','td','tr');
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if (!( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}}
//]]>
</script>

♠ Damos click a guardar.
♠ Ahora, vamos a Diseño - Elementos de la página - Añadir un gadget y escogemos HTML/Javascript.
♠ En el nuevo elemento pegaremos el siguiente código:

<a href="javascript:ts('body',2)">T+</a> <a href="javascript:ts('body',-1)">t-</a>

♠ Si deseamos podemos reemplazar T+ y t- por algún botón. Damos click a guardar y listo.

Pueden ver una DEMO en mi blog de pruebas.


► Fuente: Karakas-Online

Añadiendo un Favicon a tu blog

Hoy les enseñaré cómo agregar un favicon a nuestro blog. Para explicarlo en términos sencillos, un favicon es la imagen pequeñita que vemos en la barra de direcciones de una web o blog, como en el caso de mi blog, el favicon sería lo señalado por la flechita:


Es muy sencillo de agregar siguiendo los siguientes pasos:

♠ Vamos a Diseño - Edición de HTML y buscamos el siguiente código: ]]></b:skin> , debajo de éste, pegamos lo siguiente:

<link href='URL-DEL-FAVICON' rel='shortcut icon' type='image/x-icon'/>
<link href='URL-DEL-FAVICON' rel='icon' type='image/x-icon'/>

Reemplazamos donde dice URL-DEL-FAVICON por la dirección URL de nuestro favicon que subiremos a algún servidor de imágenes.

♠ Damos click a guardar y listo.

Puede que no sepan de dónde sacar una imagen que les sirva de favicon. Les sugiero que usen la imagen de su cabecera o la imagen que usan para que los agreguen y la reduzcan al tamaño de un favicon con estas webs:

► FavIcon from Pics
► Quick Thumbnail

En ambas sólo tienen que subir la imagen que quieran reducir a tamaño de favicon, guardarla y luego subirla a su servidor.

Íconos sociales "hechos de madera"

Puede que el título os parezca extraño, pero así es. En Pink Moustache podrán encontrar esta hermosa colección de íconos de redes sociales que tienen la apariencia de estar hechos en madera.
La colección está formada por 11 iconos en formato PNG de 64x64.


► Descargar: Pink Moustache

Tooltips sencillos»Ventanas de información de los links

Hoy vamos a hablar sobre los Tooltips. ¿Qué es un Tooltip? Pues es la ventanita, generalmente de color gris o amarillo, que aparece cuando pasamos el mouse sobre un link o enlace. Lo usamos para brindar una pequeña información sobre lo que encontraremos al acceder a dicho link.

Hoy haremos algunos Tooltips sencillos y en futuros post, veremos cómo hacer Tooltips más elaborados.

► Si deseamos poner un Tooltip en un enlace de texto, lo haremos de la siguiente forma:

<a href="AQUI-URL-DEL-ENLACE" title="AQUÍ-LA-DESCRIPCIÓN-DEL-ENLACE">NOMBRE-DEL-ENLACE</a>

El resultado será el siguiente (pasar el mouse por encima del enlace):

Diversas & Variadas

► Si deseamos poner un Tooltip en un enlace con imagen, lo haremos de la siguiente forma:

<a href="AQUI-URL-DEL-ENLACE" title="AQUÍ-LA-DESCRIPCIÓN-DEL-ENLACE"><img src="AQUÍ-URL-DE-LA-IMAGEN/></a>

Y el resultado será el siguiente:


Sencillo, verdad? En próximos post haremos Tooltips más elaborados y con más estilos.

Colocando la cabecera (header) al blog

La cabecera es una de las partes más importantes de nuestro blog, en ella colocamos el nombre de nuestro blog y si deseamos, podremos colocar alguna descripción.

Insertar la cabecera no es nada complicado. Si ya tenemos la imagen de fondo, seguiremos los siguientes pasos:

♠ Vamos a Diseño- Elementos de la página y debado de donde dice Barra de navegación, veremos con el nombre de nuestro blog, y en una esquina, dirá Editar.
♠ Ingresamos a Editar, y aparecerá un cuadro de diáologo, donde pondremos el título de nuestro blog, la descripción y podremos isertar la imagen, ya sea desde nuestra PC o desde una dirección web. Si la imagen que vamos a insertar ya contiene texto, entonces donde dice Ubicación, pondremos "En lugar del título y la descripción"; si sólo es una imagen de fondo, elegiremos la opción "Detrás del título y la descripción".
♠ Damos click a guardar y listo!

Top Ten » Lista de comentaristas

Hoy vamos a ver cómo agregar un artilugio para poder mostrar una lista o top de los que más comentan en nuestro blog basada en una Pipe de Yahoo.

♠ Para ello, vamos a Diseño- Añadir gadget- HTML/CSS y pegamos el siguiente script:

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);}
document.write('</ol>');}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a08a1225cab99d71150697405dc19ed8&url=http%3A%2F%2Fdiyva.blogspot.com&num=15&filter=Jessica" type="text/javascript"></script>

♠ Antes de guardar deberemos de cambiar los siguientes datos:

» Cambia diyva por el nombre de tu blog.
» El script está configurado para que aparezcan 15 nombres, si deseas que aparezcan menos, cambia &num=15
» Cambia el nombre Jessica por el nombre del nick que usas en Blogger, sino, tú también aparecerías en la lista.

♠ Damos click a guardar. Si hemos hecho bien todo, aparacerá el top de comentaristas en nuestro blog.
Este script está basado en los últimos 500 comentarios del blog por lo que demorará poco en cargar.

► Visto en: ZoomTemplate

Post relacionados

Viendo algunos borradores, me encontré con este, una entrada que comencé hace tiempo, pero que se quedó en borrador y hoy es publicada.
Me preguntaban como colocar el widget para mostrar las entradas (post) relacionadas. Vamos a ver cómo hacerlo:

♠ Entramos a Diseño/Edición de HTML y Expandir plantillas de artilugios.
♠ En la plantilla, con la ayuda de Ctrl+F, buscamos : ]]></b:skin> y debajo de éste colocamos el siguiente script:

Ver script completo [+/-]...

<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 == 3) {
break;
}
}
document.write('</ul>');
}

//]]>
</script>

Donde dice relatedTitles.length && i < 20) nos indica las entradas que se mostrarán según los caracteres que formen el título de las mismas.En este caso podemos cambiar el valor 20 por el que deseemos.
Para cambiar l número de post a mostrar, cambiamos el valor de :if (cuantosPosts == 3) {

♠ Ahora, buscamos en la plantilla, siempre con ayuda de Ctrl+F, el siguiente código y agregamos lo que está en color naranja:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
<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>
</b:loop>
</b:if>

Podemos cambiar el número de entradas que se mostrarán cambiando el valor de max-results=10 , pero les recomiendo que sea un número bajo para que la página no demore al momento de cargar.

♠ Ahora (paciencia,ya vamos a terminar!),buscamos <p class='post-footer-line post-footer-line-3'/> y debajo de éste colocamos el siguiente código:

<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>

♠ Como no podemos ver si funciona adecuadamente el script en vista previa, debemos de tener una copia de la plantilla. Finalmente damos click en Guardar Plantilla.

Dudas, son bienvenidas.

► Referencia: Vagabundia.

Expandir títulos de los post en las etiquetas

Son varios los que me preguntan cómo hacer para que se muestren sólo los títulos de los post cuando hacemos click en una etiqueta, como pueden ver si hacen click en cualquier etiqueta de mi blog.


Hoy vamos a ver cómo hacerlo.

♠ Vamos a Diseño- Edición de HTML y marcamos Expandir plantillas de artilugios.
♠ Ahora pegaremos el siguiente código antes de </head> con lo que estaríamos alojando directamente el script en nuestra plantilla:

<script type='text/javascript'>
//<![CDATA[
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'none';
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
found = 1;
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
function commentDisplay(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");
if (entry.content) {
comment = entry.content.$t;}
else if (entry.summary) {
comment = entry.summary.$t;}
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');
if (comment.length < numchars)
document.write(comment + '<br/><br/>');
else
document.write(comment.substring(0, numchars) + '...<br/><br/>');
}}
//]]>
</script>

♠ Seguidamente, buscaremos en la plantilla lo que está en color negro y pegaremos lo que está en color naranja, tal como se muestra:

<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='Expandir/contraer la 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 id='blog-posts'>

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

♠ Recuerden, hay que buscar los códigos y pegar lo que está en anaranjado tal como se muestra. Luego, damos click a guardar.

Como vieron, es sencillo, pero un poquito demoroso.

Cómo descargar una copia de tu plantilla

Como siempre digo, antes de hacer cualquier cosa en nuestro blog es recomendable guardar una copia de nuestra plantilla, para que, si algo sale mal, podemos volver a subirla y no tendremos problemas.

Otro uso de descargar la plantilla es para cualquier consulta, hay ocasiones en que , para poder ayudarlos, necesito una copia de la plantilla (claro, sólo me la envían cuando yo se los pida)...Pero he visto que son varios que no saben cómo descargar la plantilla y lo que hacen es copiar la plantilla y pegarlo en un archivo .doc Si me lo envían , no podré ayudarlos porque Blogger no acepta plantillas con terminación .doc

Hoy vamos a ver cómo descargar la plantilla que es muy sencillo.

♠ Vamos a Diseño - Edición de HTML y damos click a Descargar plantilla completa.


♠ Aparecerá un cuadro de diálogo donde escogeremos la opción Guardar. Y éso es todo, bastante sencillo. Ese archivo que han descargado, con terminación .xml es el archivo que me tienen que enviar cuando les pida copia de su plantilla para ayudarlos.

Muchos widgets con Widgetbox

Widgetbox es una web que nos ofrece una cantidad inimsginable de widgets para nuestro blog; cuneta con un buscador que nos permite localizar fácilmente el gadget que querramos agregar.

Podemos encontrar todo tipo de widgets, desde calendarios o relojes hasta juegos. Aquí una pequeña muestra de un reloj que me gustó mucho.

Max Adrenalin

Un jueguito que encontré...Para pasar el rato.

Click para jugar [+/-]