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

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 Template: Play Mario Games

Free Blogger Templates Publicado por Claudia en agosto 8, 2012

Play Mario Games es una plantilla Blogger gratuita de 2 columnas para blogs de juegos. Incluye slider, buscador interno y columnas en el footer. Es libre de uso mientras se respeten los créditos de autor.

Play Mario Games Blogger Template

DEMO | DESCARGA Play Mario Games (2357)
Tags:

Envía tus posts automáticamente a Google Plus con HootSuite

Productos Google Publicado por Claudia en julio 31, 2012

Al igual que muchos, hace tiempo que estoy buscando la forma de exportar mis entradas automáticamente a Google+. He probado plugins para WordPress, pero no lo he conseguido o no estoy dispuesta a pagar por usar plugins como “Next Scripts Social Networks Auto-Poster”.

Hoy finalmente, y después de muchos intentos fallidos, conseguí enviar mis posts automáticamente a mi página de Google Plus, gracias a HootSuite (y a Techtástico).

HootSuite es una aplicación que te permite gestionar varios perfiles de redes sociales (Twitter, Facebook, Linkedin, etcétera). En su versión gratuita, permite añadir 5 perfiles sociales y 2 fuentes RSS/Atom, suficiente por ahora.  Una vez que hemos creado nuestra cuenta gratuita en HootSuite, debemos añadir nuestro Perfil de Google+, dando la autorización correspondiente.

añadir red social HootSuite

Una vez hecho esto, se mostrarán las páginas que has creado en Google+ (puedes crear una desde aquí), y que puedes importar a HootSuite. Seleccionamos las páginas y hacemos click en el botón “Importación finalizada“.

Ahora, en el panel lateral de Configuración, seleccionamos RSS/Atom.

Enviar Posts a Google Plus

Introducimos la URL del Feed de nuestro blog, seleccionamos la página de Google Plus a la que queremos que se envíe y seleccionamos la periodicidad con que queremos que se envíen nuestras entradas a Google+ (de 1 hora a 1 día). Allí también podemos indicar cuántos posts queremos que se envíen por vez , si queremos que se muestre el cuerpo de nuestros posts, si queremos que se muestre algún mensaje breve antes de cada post y qué acortador de URL queremos usar.

Seleccionamos “Guardar Fuente” y, si pusimos la opción “Comprobar publicaciones en este RSS cada hora“, veremos que nuestro primer post se publicará automáticamente en una hora más.

Realmente simple para el ahorro de tiempo que puede significar. La única limitación que tiene es que, como no permite añadir más de 2 RSS Feeds, por lógica sólo podremos enviar nuestros posts a dos páginas Google+.

Tags:

Incorporar Nivo Slider en WordPress

Tutoriales WordPress Publicado por Claudia en julio 27, 2012

Nivo Slider

Hace un tiempo hablaba de Cómo añadir Nivo slider en Blogger. Añadir Nivo Slider en WordPress no es tarea difícil, y puede hacerse sin plugin, como explica BlogOhBlog.

Cómo hacerlo, paso por paso:

1. Subiendo los archivos

Lo primero que debemos hacer es descargar el plugin jQuery desde la web del autor.

Lo descomprimimos, y subimos vía FTP las imágenes arrows.png, bullets.png y loading.gif a la carpeta images de nuestro tema.

Ahora, en la carpeta principal de nuestro tema creamos una nueva carpeta de nombre “js“, y subiremos allí el plugin jquery.nivo.slider.js

2. Llamando al slider

El primer paso es determinar dónde vamos a añadir el slider. Yo lo hice en el index.php, sobre los posts. Para poner el slider justo ahí, deberás buscar:

1
< ?php while ( have_posts() ) : the_post() ?>

(o algo similar)

Y pegar inmediatamente debajo:

1
2
3
4
5
6
7
<div id="slider">
 < ?php $my_query = new WP_Query('showposts=5&category_name=destacado'); while ($my_query->have_posts()) : $my_query->the_post(); ?>
 <a href="<?php the_permalink() ?>" title="< ?php the_title(); ?>">
 <img src="<?php echo get_post_meta($post-/>ID, 'nivoimage', true); ?>" alt="" title="< ?php the_title(); ?>" />
 </a>
 < ?php endwhile; ?>
</div>

De esta manera, veremos el slider sólo en la página principal de nuestro tema. Por defecto, mostrará 5 diapositivas, y la categoría para posts destacados será “destacado“. Dichos valores pueden cambiarse más arriba.

Las imágenes de nuestro slider deberán ser añadidas en un campo personalizado de nombre “nivoimage“. Sigue leyendo

Tags: ,

Blogger Template: Simple Red

Free Blogger Templates Publicado por Claudia en julio 25, 2012

Simple Red es una plantilla Blogger gratuita de 4 columnas para cualquier nicho. Incluye slider, buscador interno, y espacio para publicidad en la cabecera.

Simple Red Blogger Template

DEMO | DESCARGA Simple Red (10248)
Tags: