Blogger

Cómo poner un reproductor de música en tu blog de Blogger

Publicado por Claudia en agosto 11, 2012

Incluir un reproductor de audio en un blog hoy en día es realmente sencillo gracias a la etiqueta HTML5 <audio>, tal y como explica Amanda en BloggerBuster.

La etiqueta  <audio>, que define el sonido (música o streams de audio) es nueva en HTML5 y es soportada por los siguientes navegadores: Internet Explorer 9, Firefox, Opera, Chrome, y Safari. El reproductor de música que permite incluir se verá así:

¿Quieres un reproductor de música en tu blog de Blogger?

El uso básico de dicha etiqueta audio es el siguiente:

1
2
3
4
<audio controls controls> 
<source src="http://dl.dropbox.com/u/3549515/10%20-%20Unicornio.mp3" /> 
Tu navegador no soporta la etiqueta audio. 
</audio>

Por lo tanto, deberás copiar ese código en la edición de HTML de la entrada donde quieras reproducir música o audio. Lo único que tienes que hacer es reemplazar en el código es cancion.mp3, que corresponde al enlace directo de tu archivo de audio.

Evidentemente, también necesitarás un hosting para almacenar tus archivos de audio.

Usando Dropbox para almacenar tu música

Dropbox es uno de los servicios de alojamiento más populares que te permite guardar todo tipo de archivos en la nube para acceder a ellos desde cualquier lugar. Puedes crear una cuenta gratuita con 2GB de almacenamiento, pudiendo enlazar directamente tus archivos almacenados ahí.

Una vez que has creado una cuenta en Dropbox y has ingresado a ella, deberás subir el archivo de audio que quieras poner en tu blog (mp3) en la carpeta “Public“. Cuando se haya cargado, tienes que hacer click sobre él con el botón derecho del mouse, seleccionando la opción “Copiar enlace público“.

Dropbox

Así obtendremos el enlace directo que necesitamos reemplazar en el código de más arriba.

Atributos de la etiqueta audio

El control “controls” hará que el audio se reproduzca sólo cuando el usuario haga click en el botón “play” del reproductor. Sin embargo, en W3SChools podemos ver otras opciones:

Autoplay: Reproduce automáticamente el audio una vez que está listo.

1
2
3
4
<audio controls autoplay> 
<source src="cancion.mp3" /> 
Tu navegador no soporta la etiqueta audio. 
</audio>

Loop: Reproduce el audio continuamente.

1
2
3
4
<audio controls loop> 
<source src="cancion.mp3" /> 
Tu navegador no soporta la etiqueta audio. 
</audio>
Tags:
Blogger

Blogger permite modificar los enlaces permamentes de tus posts

Publicado por Claudia en julio 18, 2012

Blogger se puso las pilas  hace cuatro meses para mejorar la optimización para los motores de búsqueda de dicha plataforma, permitiendo personalizar las preferencias de búsqueda mediante la adición de campos para etiquetas meta, mensaje de página no encontrada,  redireccionamiento y archivo robots.txt.

Ahora, Blogger presenta otra funcionalidad SEO: la posibilidad de personalizar tus enlaces permanentes o permalinks, disponible ya para todos.

Antes, los enlaces eran automáticamente generados, e incluían las primeras palabras de tu entrada. Ahora, sin embargo, puedes modificar la estructura de los mismos para hacerlos más amigables, desde la edición de cada entrada (antes de publicar):

Cambiar enlaces permanentes en Blogger

De esta manera, para una entrada con título “Por qué siempre me gusta caminar bajo la lluvia en verano” podrás cambiar un enlace del tipo:

http://miblog.blogspot.com/2012/07/por-que-siempre-me-gusta-caminar-bajo.html

a

http://miblog.blogspot.com/2012/07/2012/07/caminar-bajo-la-lluvia-en-verano.html

Es una funcionalidad muy simple, pero que puede marcar grandes cambios a la hora de posicionar mejor en los buscadores, por la posibilidad de incluir palabras claves en nuestros títulos que permitan a los lectores encontrar con más facilidad lo que están buscando.

Vía: Blogger Buzz

Tags:
Blogger

Instalar una plantilla Blogger en la nueva interfaz

Publicado por Claudia en julio 16, 2012

Saber instalar una plantilla Blogger es una de las primeras cosas que debemos hacer si comenzamos a usar dicha plataforma.

Si bien Blogger ha hecho grandes cambios a su interfaz durante el último año, el procedimiento sigue siendo básicamente el mismo:

  1. Vamos a nuestro Panel de Control/Plantilla.
  2. Hacemos click en Crear copia de seguridad/restablecer.
  3. Veremos un cuadro de diálogo con dos opciones: la primera de ella es “Descargar plantilla completa“, la que debemos utilizar para hacer una copia completa de nuestra plantilla en caso de que queramos volver a ella. Una vez hecho esto (no es obligatorio, pero recomendado), pasaremos al siguiente paso.
  4. Con el botón “Seleccionar archivo” que aparece en el mismo cuadro, seleccionaremos la plantilla que queremos subir, en formato XML. Por ejemplo: NuevaPlantilla.XML.
  5. Hacemos click en “Subir” y esperamos que la plantilla cargue. En unos segundos la veremos instalada en nuestro blog.
Instalar Plantilla Blogger

Método alternativo:

Otra forma de subir una plantilla Blogger es desde Plantilla/Edición de HTML. Podemos seleccionar todo el contenido, suprimirlo y luego reemplazarlo por el contenido de nuestra plantilla NuevaPlantilla.XML. Eso sí, debemos ser muy cuidadosos en copiar todo el contenido.

Errores a la hora de subir plantillas:

A veces, al intentar subir plantillas, podemos recibir un mensaje de error como este:

No hemos podido guardar la plantilla. Tu plantilla no se ha podido analizar debido a que su formato no es correcto. Asegúrate de que todos los elementos XML estén cerrados correctamente“.

Si subimos la plantilla con el “método alternativo”,  es probable que no la hayamos copiado completamente.  En tal caso, es recomendable “cargar la plantilla” en vez de copiar su contenido.

Si aun así no puedes subir la plantilla, recomiendo intentar con una de estas posibles soluciones:

  1. Intentar subir con un navegador alternativo (no Internet Explorer).
  2. Aplica una de las plantillas predeterminadas de Blogger. Cambia a una de las nuevas plantillas de Blogger, si ya no tienes una instalada, y trata de instalar de nuevo tu plantilla.
  3. También puedes “Volver a la interfaz anterior de Blogger” (sólo temporalmente), ir a Diseño/Edición de HTML y utilizar una de las plantillas antiguas desde “Seleccionar plantilla de diseño“. A continuación, trata de reinstalar tu plantilla otra vez.

Consideraciones finales

Instalar una plantilla Blogger es un proceso realmente sencillo y rápido si se hace cuidadosamente, aunque de todas maneras siempre es necesario respaldar tu vieja plantilla y conservar tus artilugios (gadgets).

Hoy por hoy es realmente fácil encontrar plantillas Blogger gratuitas y de calidad en la red. Si bien con ellas puedes usar casi todas las funciones de Blogger, debes saber que el 99,9% están construidas bajo una base que no te permitirá usar el “Diseñador de Plantillas” de Blogger.  No obstante, ello puede ser una ventaja si consideras que ya tendrás un diseño armado que podrás configurar con más facilidad (menos código y más simple).

Tags:
Blogger

Widget de Posts recientes con imágenes para Blogger

Publicado por Claudia en febrero 7, 2012

Hay varias versiones de widgets para mostrar los últimos posts el Blogger. Si buscamos “recent posts” en los widgets de Blogger, podremos encontrar dos opciones distintas en inglés; no obstante, hay una versión que tomé de Webaholic y modifiqué muy levemente, y que considero útil de compartir por tres razones: (1) está en español; (2) no tienes que preocuparte del alojamiento del script; y (3) es fácilmente modificable.

Añade el widget

Este widget de posts recientes se añade simplemente copiando el siguiente códígo en un gadget en blanco (Diseño>Añadir un Gadget>HTML/Javascript):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<style type='text/css'>
img.recent_thumb {padding:2px;width:70px;height:70px;border:0;
float:left;margin:5px 10px 10px 0; border: 1px solid #ccc;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:75px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
.recent_posts_with_thumbs h4 {
text-transform: uppercase;
font-size: 14px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
 
{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://www.webaholic.co.in/other/no-image.jpg';
}
 
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Ene";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Abr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Ago";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dic";document.write('<li class="clearfix">');
 
 
if(showpostthumbnails==true) 
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>');
 
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g; 
    postcontent = postcontent.replace(re, "");
 
 
if (showpostsummary == true) {
 
      if (postcontent.length < numchars) {
          document.write('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
}
 
var towrite='';var flag=0;
document.write('<br><strong>');
 
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;}
 
if(showcommentnum==true) 
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
 
if(displaymore==true) 
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más</a>';
flag=1;
;
}
 
document.write(towrite);
 
document.write('</strong></li>');
if(displayseparator==true) 
if (i!=(numposts-1))
document.write('');
}document.write('</ul>');
 
}
//]]>
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 80;</script>
<script src='https://TUBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Para que funcione, en la última línea debes reemplazar “TUBLOG” por el nombre de tu blog.

Vista previa del widget

Algunas opciones de configuración…

En general, puede ser que no necesites hacer ningún cambio extra al widget ya añadido; sin embargo puedes hacer algunas pequeñas modificaciones para hacer que éste se adapte a tus preferencias.

En los estilos, por ejemplo, puedes ver que el tamaño por defecto de los thumbnails o miniaturas de imagen, es de 70×70 píxeles (segunda línea), y que éstos tienen un borde. También, en los estilos puedes cambiar los estilos de letras.

Al final del código veremos una serie de variables, donde:

  • numposts: indica el número de posts que se muestran (por defecto, “5”).
  • numchars: indica el número de caracteres de los resúmenes (por defecto, “80”).

Las siguientes variables pueden ser cambiadas de “true” a “false” (o viceversa) para habilitar o deshabilitar alguna de las funciones:

  • showpostthumbnails: muestra miniaturas de imagen.
  • displaymore: muestra el enlace “Más”.
  • displayseparator: muestra una línea de separación entre cada ítem.
  • showpostdate: muestra la fecha de cada post.
  • showpostsummary: muestra un resumen de cada post.
Tags:
Blogger

30+ sitios adonde enviar tus plantillas Blogger

Publicado por Claudia en enero 24, 2012

Además de comprar (o intercambiar) enlaces de texto o espacios publicitarios, comprar enlaces en temas de WordPress, Joomla u Blogger que se distribuyen gratuitamente es una buena inversión para conseguir enlaces entrantes para nuestro blog y rankear mejor. A la hora del linkbuilding, todo es válido; pero a veces no es necesario gastar dinero si aprovechas tus habilidades y creatividad.

Si buscas mejorar tu pagerank y obtener más visitas para tu blog y eres bueno diseñando plantillas exclusivas para Blogger (o haciendo adaptaciones CSS de temas diseñados para otras plataformas) o tienes alguna que quieras compartir con todo el mundo, te dejo un listado de más de 30 directorios para enviar tus templates.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
http://www.allblogtools.com/
http://www.bestbloggertemplates.net/
http://besttheme.net/
http://www.bietemplates.com/
http://www.bloggertemplatesblog.com/
http://bloggertemplateshub.com/
http://www.bloggertipz.com/
http://www.bloggertricksandtoolz.com/
http://www.blogspottemplate.net/
http://blogtemplate4u.com/
http://www.blog-zone.info
http://borneotemplates.com/
http://btemplates.com
http://www.btemplates4u.com/
http://www.btheme.info/
http://csstemplates.net/
http://www.coolbthemes.com/
http://www.denidi.net/
http://www.dhetemplate.com
http://javatemplates.com
http://www.mybloggerthemes.com/
http://www.mytemplatez.com/
http://www.newbthemes.com
http://www.premiumbloggertemplates.com/
http://www.premiumbtemplates.com/
http://www.probloggertemplate.com
http://www.raytemplates.com/
http://www.templatebloggers.com
http://www.templategator.net/
http://www.templates-blogger.com/
http://freethemes4all.com/
http://thetemplatebank.com/
http://www.zoomtemplate.com/

Algunas recomendaciones prácticas:

  • Procura que tu template se vea limpio, y tenga una mínima calidad para que sea aceptado en los distintos directorios. Plantillas más bonitas, que sirven para múltiples nichos y con más características suelen tener más descargas.
  • Incluye instrucciones precisas.
  • Busca algún servicio de hosting seguro para subir tus plantillas, si no dispones de hosting propio. Por ejemplo, Box.net.
  • Incluye los scripts en la misma plantilla (si usa), y hospeda las imágenes en Blogger o álbumes web de Picasa (no photobucket ni imageshack, porque el ancho de banda es limitado).
  • No olvides incluir un enlace a tu sitio en el footer, indicando la licencia de la plantilla.
Tags: