Consejos Blogger

sábado, 3 de marzo de 2012

Top 10 sitios donde escuchar música en una infografía

Gplus nos muestra en este infografía los 10 sitios top donde podemos escuchar música en Internet, con sus costes y características principales.

Quien usa LinkedIn

SAI ha publicado esta infografía con interesantes datos sobre LinkedIn donde nos muestra quien los usa por edades, por países, por genero, etc.

Pizcos.net ya dispone del nuevo diseño para paginas en Facebook

Desde hoy ya disponemos de la nueva versión del timeline de Facebook en nuestra pagina de "empresa", un diseño que nos gusta bastante mas que el anterior, informaros que hemos reajustado el contenido que se publicaba en ella. Al estar automatizado toda su publicación mediante feeds, se repetían algunos artículos que se publicaban en otras plataformas como Twitter o Google Plus, desde ahora solo se publicara en Facebook el contenido que se vuelque desde este blog e intentaremos, al igual que hacemos en Google Plus, publicar contenidos únicos que nos gusten de lo que vemos a diario por la red...

Apple Store 25 mil millones de descargas

Desde el 13 de febrero Apple empezó una promoción con cuenta atrás que se pararía al llegar a las 25 000 millones de descargas desde la Apple Store, esa cuenta atrás se acaba de parar y pronto anunciaran a los ganadores, uno de los cuales se llevara la nada despreciable cantidad de 10.000$(7.594€).

Ese premio de 10.000$ se dará en una tarjeta regalo que se podrá gastar en productos de iTunes Store, App Store e iBook Store. Recordemos que desde Julio de 2008 la media de descargas es de 18,7 millones diarias, de esta forma se ha alcanzado esta impresionante cifra de 25.000 millones de descargas.

viernes, 2 de marzo de 2012

10 ejemplos de texto con sombra

Diez ejemplos de texto con sombra que podemos conseguir de forma muy fácil, hacemos click sobre cada ejemplo y nos mostrará los estilos que añadiremos en plantilla edición de HTML justo antes de ]]></b:skin>

El HTML lo añadimos donde deseamos mostrar el efecto (plantilla, entrada o gadget de HTML). Para conseguir el efecto en título del blog, entradas o sidebar añadimos los estilos en la parte correspondiente al título por ejemplo en header h1 aunque puede cambiar dependiendo de la plantilla que estamos usando.

Para el HTML añadimos lo siguiente cambiando el id por el número del ejemplo que vamos a añadir.

<div id="shadow1">
TEXTO
</div>

jueves, 1 de marzo de 2012

Botón "Ir Arriba" con jQuery que aparece y desaparece

Hace ya bastante tiempo vimos cómo poner las flechas de "Ir Arriba" e "Ir Abajo", ahí vimos tanto el método simple, como con un efecto deslizante usando Scriptaculous.

En esta ocasión veremos cómo poner el botón de "Ir Arriba" en el blog pero con la particularidad de que se encuentra oculto, sólo aparece cuando se baja la página y desaparece otra vez cuando se regresa a la parte superior del blog. Además, al funcionar con jQuery el desplazamiento de la página se vuelve con un efecto deslizante. Puedes verlo funcionar en este blog de pruebas, al bajar el scrollbar aparecerá el ícono para subir, una vez que subas al hacer click desaparecerá de nuevo.

Para ponerlo en tu blog entra en la Edición HTML y antes de </head> agrega jQuery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

Si ya lo tuvieras omite ese paso.
Ahora antes de ]]></b:skin> agrega los estilos:

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}

#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikSTIlLPG1_IKhwz1NZCF2uqsox56WsgOwlkodOkCmHEW7tS5JqIVhxXEsAYDnjUe9uwcCblJP00Dbkh9wCwINjJ7FLxdAfaUhashhkLqXK25Mk6WcKFmtxhsB5LgQXpTgTf4Vvg8ib2c/s60/flecha-arriba.png) no-repeat center center;
}

Por último, antes de </body> agrega el script:

<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
</script>

Guarda los cambios y listo.

En color verde puedes ver dónde se modifica la distancia y el tamaño del botón. En caso de que quieras poner otra imagen distinta, cambia la URL en color azul por la de tu imagen; si haces eso deberás cambiar el ancho y alto del botón donde se indica de acuerdo a las medidas de tu imagen.

El ícono de la flecha estará del lado inferior derecho, si lo quisieras a la izquierda cambia
right: 30px; por left: 30px;

Y si lo quisieras arriba cambia bottom: 30px; por top: 30px;

Recuerda, que si ya tienes jQuery no debes poner el primer código, de lo contrario tendrás problemas de incompatibilidad.

Si te interesa otro método para tener el botón de Ir arriba, Ir abajo, e Ir al centro también con jQuery, puedes usar el método de Vku.