Botón de llamada a la acción animado solo con CSS

He realizado un botón de call-to-action animado solo con CSS, simple pero que permite llamar la atención del visitante hacia el. La animación es permanente y se detiene al pasar el ratón sobre ella.

Contáctame

Este es el CSS (igual tenéis que ajustar algo los margenes según vuestros sitios)

.contacta a {
float:left;
font-size: 18px;
font-style: italic;
margin: 40px;
padding: 60px 30px;
border: 3px solid #e1e1e1;
background: red;
border-radius: 80px;
color: #fff;
box-shadow: 4px 4px 6px rgba(0,0,0,0.30);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#e1e1e1', Direction=145, Strength=5);
animation: pulso 4s ease-out;
animation-iteration-count: infinite;
-ms-animation: pulso 4s ease-out;
-ms-animation-iteration-count: infinite;
-webkit-animation: pulso 4s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
@-webkit-keyframes pulso {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@keyframes pulso {
50% {opacity: 1.0;}
100% {transform: scale(1.2, 1.2); opacity: 0.0;}
0% {-ms-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-ms-transform: scale(1.2, 1.2); opacity: 0.0;}
0% {transform: scale(0.1, 0.1); opacity: 0.0;}
}
.contacta a:hover {
animation-play-state:paused;
-webkit-animation-play-state:paused;
-ms-animation-play-state:paused;
background: green;
}

El HTML es el básico de un enlace pero en un div

<div class="contacta">
<a href="http://consejosblogge.blogspot.com/">Contáctame</a>
</div>

Se le pueden dar otros uso pero yo lo he hecho para el botón de contacto del footer...

Slider para Blogger

Si hay una cosa que recriminar a Blogger es lo difícil que resulta configurar su página de inicio de una forma diferente, por su propia estructura estamos abocados a mostrar una cantidad de post, resumidos o no, junto con una sidebar y alguna otra configuración horizontal con widget. Wordpress es mucho más manejable en ese sentido, permite crear páginas de inicio mucho más atractivas visualmente.

Con los cambios que últimamente estoy realizando, me propuse modificar esto y hacer que los posts de la página de inicio no fueran como una lista interminable y aparecieran en un slider.

Como siempre pensé en utilizar jQuery para ello y encontré un pequeño plugin que hacia la función que quería. Para conseguirlo deberéis bajaros este fichero e insertar antes de </body> lo siguiente

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Blog1 {
margin:10px auto 40px;
width:95%;
height:230px;
overflow:hidden;
}
.blog-posts.hfeed div{
width:340px;
height:230px;
position:relative;
float:left;
margin: 10px;
padding: 0 5px;
}
.next {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiNe7JdaEmExE8FG700xiERPfpKiP0nYN0wdNkYZ73fKu0mwTIfhV9rASV0ZURyk4CYUPb-WM_v65gB0Ee1wU1gZBN6LmnZW_cve0DPTwNh6ghDd0Wj0LFOY_Lcm7Ka5mjXQuCnu3ioG0/s1600/prev.png) center left no-repeat;
margin-top: -210px;
width: 40px;
height: 230px;
position: absolute;
opacity: 0.7;
}
.prev {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAziOxh9T9g1_etVXzXqiQzIb5Tn5soWhAFGPbPdcfZk0vfHleGVK07zEpPZbCOnPE9T0Ny_TR3jCl3eVdMcrdgl1CqhJgu7UbBOYJqyznEeXtmpyxgEEKfJXFLV1_ILpSh3jNTHRiOu0/s1600/next.png) center no-repeat;
margin-top: -210px;
width: 40px;
height: 230px;
position: absolute;
opacity: 0.7;
right: 10px;
}
</style>
<script src='URL DE ALOJAMIENTO DEL FICHERO JS'/>

</b:if>

Varias consideraciones a tener en cuenta:

.- No recomiendo que se instale a usuarios pocos avanzados en la codificación Blogger, no me hago responsable de lo que pueda pasar. El código se proporciona tal cual.

.- Hay que tener la librería jQuery implementada.

.- Las entradas en el home deben tener el formato resumido, ya sea usando el formato snippet que proporciona Blogger (recomiendo esta opción para entradas resumidas) o cualquier otra forma.

.- Las dos imágenes de la flechas que se usan en el slider copiarlas y subirlas a vuestro propio alojamiento, no garantizo mantenerlas.

.- El código CSS proporcionado es solo indicativo, deberá ajustarse según vuestras preferencias.

.- El fichero js, dependiendo de las dimensiones de vuestro blog también debe ajustarse, editándolo veréis $('.blog-posts.hfeed').animate({marginLeft:'-=1120'},1000,function(){ ... y $('.blog-posts.hfeed').animate({marginLeft:'+=1120'},1000,function(){ . Las dos cifras en rojo indican el desplazamiento hacia la derecha y la izquierda. Ahí podéis ajustar ese desplazamiento para que quede bien. Subirlo a vuestra web de alojamiento e insertarlo donde pone URL DE ALOJAMIENTO DEL FICHERO JS

.- El número de entadas a mostrar se ajusta editando el widget Blog1 en el diseño de plantilla.

Creo que no se me olvidado nada, con este slider se nos abre la posibilidad de mejorar mucho el diseño de nuestras paginas de inicio...

Ley de cookies. Como no cargar las cookies de analytics

A raíz de un articulo de Pablo Burgueño donde informaba sobre la notificación de un proceso sancionador a una empresa por no cumplir la Ley de Cookies, y como es un tema que desde hace tiempo me lleva preocupando por que nadie lo tiene claro, me puse a investigar como cumplirla.

Por lo que he podido averiguar (que alguien mas versado que yo me corrija si me equivoco), aquí en España se ha rizado el rizo, cuando la Ley Europea solo obliga a informar, aquí se obliga a no cargar absolutamente ninguna cookies, se debe pedir el consentimiento explicito del usuario antes de cargarlas.

Estudie el problema de carga de cookies para Wordpress y la forma de evitar esa carga, en la red se ofrecen plugins gratuitos para ello, pero realmente no impiden la carga de cookies antes de la aceptación por parte del usuario, cumplen la europea pero no la española. Una vez probados y descartados los plugins mas populares pensé en usar jQuery para cumplir con la Ley de Cookies y encontré de casualidad un plugin de pago que aparentemente, en su descripción cumplía con el requisito de no cargar las cookies, que además ofrecía una versión en GitHub que uno podía usar e implementar directamente en los sitios.

Como en el sitio elegido para las pruebas cargaba, entre otras; las cookies de Google Analytics, precisamente las que han originado el proceso sancionador, me centre en evitar su carga y realmente es posible hacerlo tanto en Wordpress como en Blogger.

Para ello debemos descargarnos estos ficheros con los dos plugins de jQuery necesarios. Una vez descargados, debéis editar jquery.cookiecuttr.js y donde pone AQUI LA URL DE TU PAGINA DE POLITICA DE PRIVACIDAD le insertáis la url completa de esa pagina en vuestros sitio. Guardáis los cambios y subís ambos ficheros a vuestro alojamiento. Ahora solo deberéis incluir en vuestro footer o plantilla lo siguiente (deberás modificar lo que esta en negrita):

<script src="URL ALOJAMIENTO/jquery.cookie.js"></script>
<script src="URL ALOJAMIENTO/jquery.cookiecuttr.js"></script>


<script>

$(document).ready(function () {
// activate cookie cutter
$.cookieCuttr({
cookieDeclineButton: true,
cookieAnalyticsMessage: "(NOMBRE DEL SITIO) solicita su permiso para obtener datos estadísticos anónimos de su navegación en esta web, en cumplimiento del Real Decreto-ley 13/2012. "
});
});

if (jQuery.cookie('cc_cookie_accept') == "cc_cookie_accept") {
AQUI CODIGO DE ANALYTICS QUE TE PROPORCIONA GOOGLE
}

</script>

Esto evita la carga de las cookies de Analytics y hace aparecer una barra superior donde se pide el consentimiento expreso del usuario para su carga.

Os añado el CSS necesario para darle formato al aviso:

.cc-cookies { position:fixed; width: 90%; left: 0; top: 0; padding: 0.5em 5%; background: #565656; background: rgba(86,86,86,0.95); color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 -1px 0 rgba(0,0,0,0.35); z-index: 99999; text-align: center; color: #fff; }
.cc-cookies a, .cc-cookies a:hover { color: #fff; text-decoration: underline; }
.cc-cookies a:hover { text-decoration: none; }
.cc-overlay { height: 100%; padding-top: 25%; }
.cc-cookies-error { float: left; width: 90%; text-align: center; margin: 1em 0 2em 0; background: #fff; padding: 2em 5%; border: 1px solid #ccc; font-size: 18px; color: #333; }
.cc-cookies a.cc-cookie-accept, .cc-cookies-error a.cc-cookie-accept, .cc-cookies a.cc-cookie-decline, .cc-cookies-error a.cc-cookie-decline, .cc-cookies a.cc-cookie-reset { display: inline-block; color: #fff; text-decoration: none; background: #7DAF3B; padding: 0.5em 0.75em; border-radius: 3px; box-shadow: 0 0 2px rgba(0,0,0,0.25); text-shadow: 0 -1px 0 rgba(0,0,0,0.35); -o-transition: background 0.5s ease-in; -webkit-transition: background 0.25s ease-in; -moz-transition: background 0.25s ease-in; }
.cc-cookies a.cc-cookie-decline, .cc-cookies-error a.cc-cookie-decline { background: #af3b3b; margin-left: 0.5em; }
.cc-cookies a.cc-cookie-reset { background: #f15b00; }
.cc-cookies a:hover.cc-cookie-accept, .cc-cookies-error a:hover.cc-cookie-accept, .cc-cookies a:hover.cc-cookie-decline, .cc-cookies-error a:hover.cc-cookie-decline, .cc-cookies a:hover.cc-cookie-reset { background: #000; -o-transition: background 0.5s ease-in; -webkit-transition: background 0.25s ease-in; -moz-transition: background 0.25s ease-in; }
.cc-cookies-error a.cc-cookie-accept, .cc-cookies-error a.cc-cookie-decline { display: block; margin-top: 1em; }
.cc-cookies.cc-discreet { width: auto; padding: 0.5em 1em; left: auto; top: auto; }
.cc-cookies.cc-discreet a.cc-cookie-reset { background: none; text-shadow: none; padding: 0; text-decoration: underline; }
.cc-cookies.cc-discreet a:hover.cc-cookie-reset { text-decoration: none; }

@media screen and (max-width: 768px) {
.cc-cookies a.cc-cookie-accept, .cc-cookies a.cc-cookie-decline, .cc-cookies a.cc-cookie-reset { display: block; margin: 1em 0; }
}

@media screen and (max-width: 480px) {
.cc-cookies { position: relative; float: left; }
}

Creo que esto puede seguir de guía para evitar otras cargas de cookies como las de Adsense por ejemplo, pero ahora vamos con otros problemas. La implantación de este sistema hace que los usuarios, que en su mayoría desconocen el tema cookies pulse NO y tus datos analíticos sufran una brutal caída, así que o te arriesgas a una sanción o te quedas sin medir. Asimismo si el usuario pulsa NO, se carga una cookie por parte del plugin para recordar la elección del usuario, no toma ningún otro dato.

Además de las cookies de Analytics se cargan otras, en este sitio donde esta implantado, cargaba una cookie de sesión de Wordpress por la que hubo que tocar el fichero php.ini, un fichero al que no se suele tener acceso y hay que recurrir a los administradores de vuestros servidores para modificarlo.

Incluso usaba el plugin de ShareThis para mostrar los botones sociales, que también cargaban una cookies, hubo que modificar el código para evitar su carga.

Estos son solo algunos ejemplos con los que os quiero mostrar que hay que revisar cada página para ver que cookies se cargan y encontrar una solución independiente para cada una de ellas.

Al menos a las causantes del proceso sancionador, las de Analytics, las podemos controlar....

*Nota: No me hago responsable del uso que se haga de los códigos aquí expuestos.

Usar dos imágenes de fondo con CSS3

Tras un tiempo en que estamos publicando menos (nos hemos tomado un descanso que necesitábamos) volvemos, poco a poco, a nuestro ritmo habitual...

Durante este tiempo hemos desarrollado algunos sitios webs nuevos, en uno de ellos hemos usado dos imágenes y degradado para el fondo del body. Esta posibilidad que nos ofrece CSS3 nos abre muchas puertas para el diseño web. En este caso se trataba de imitar un efecto de nueces cayendo y que se amontonaban en la parte de abajo del sitio. Como sabéis cada página, según sea su contenido, tiene diferentes longitudes y mantener esas nueces apiladas en el fondo nos obliga a usar dos imágenes.

Esto podemos conseguirlo solo con CSS añadiendo

body {
background-color: #000;
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -webkit-linear-gradient(top, #000, #fff);
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -moz-linear-gradient(top, #000, #fff);
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -ms-linear-gradient(top, #000, #fff);
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -o-linear-gradient(top, #000, #fff);

Con este CSS logramos insertar dos imágenes sobre un degradado de fondo. Usamos márgenes negativos y porcentajes para que se sitúen donde queremos y sea adaptable la posición a la pantalla. Evidentemente solo disponible para navegadores que implementan estas características de CSS3.

Podéis verlo funcionando en Walnuters(aún en fase beta).

Como cambiar la vanity url de una pagina de Facebook

Cuando Facebook permitió que eligiéramos la url de nuestra pagina (llamada vanity url) si seguisteis el proceso y elegisteis un url que no te gusta ahora es posible cambiarla.

Hay unas condiciones previas como son que ya debes tener una vanity url de tu página y solo podrás cambiarla una vez.

Para ello debes ir a Editar tu pagina/Actualizar información y ahí te aparecerá Nombre de usuario/Change Username donde podrás completar el proceso.

Recuerda elegir bien esta vez que solo se puede hacer una vez....

Blogger permite crear enlaces permanentes personalizados

Blogger sigue con novedades interesantes e importantes, según veo en Blogger Buster, ahora podremos definir nuestros permalinks o enlaces permanentes, es decir como serán las url de nuestras entradas.

Hasta ahora la estructura de nuestros enlaces estaba basada en el titulo de la entrada, aparecía como http://NOMBRE_DEL_SITIO/AAAA/MM/PARTE_DEL_TITULO_DE_LA_ENTRADA.html lo que ahora Blogger nos dejara elegir es lo que queramos que aparezca en PARTE_DEL_TITULO_DE_LA_ENTRADA.

Esta nueva opción es interesante de cara a conseguir url más amigables de cara a posicionamiento, aceptan números, letras y algunos caracteres especiales.

Esta opción aparentemente no esta disponible aun para todo el mundo, debería apareceros a la derecha del editor, en Configuración de las entradas, por defecto vendrá marcado como Automático, es decir, seguirá usando el modelo antiguo de url.

Blogger sigue sumando puntos a favor...

Edito: en Blogger Draft si esta disponible

Adecua tu sitio a la Ley de Cookies

La ley de cookies ya esta en vigor, aunque aún no sabemos como debemos adaptarla a nuestros sitios, siempre es bueno al menso informar a nuestras vistas que el sitio usa cookies.

Para ello existe un generador online que te proporciona el código necesario para presentar un aviso emergente (solo la primera vez que la visita entra en la página) y te evita calentamientos de cabezas.

Antes que nada es necesario que tengas una página con la Política de privacidad en tu sitio que es donde enviaras a tus visitas que quieran más información sobre el uso de cookies en tu sitio.

Luego solo tienes que rellenar los campos en el generador del aviso de cookies y obtener el código. El generador usa la librería jQuery por lo que es necesario tenerla implementada y además hay que bajarse el siguiente script, subirlo a tu sitio de alojamiento, copiar la url y cambiarla en el código que te han proporcionado (/PATH_TO_COOKIE_CONTROL/cookieControl-5.0.min.js)

De esta manera podrás informar a tus visitas que usas cookies en tu sitio...

Carrousel de entradas populares en Blogger con jQuery

Hace, otra vez, mucho tiempo que no escribo nada sobre cosas para Blogger, para matar el gusanillo os explico el carrousel de entradas populares que acabo de poner, realizado usando el gadget que te proporciona Blogger, CSS y jQuery para animarlo.

1.-  Añadís el gadget de Entradas Populares desde el Panel/Diseño. Seleccionar más de cinco entradas y solo thumbnails.

2.-  En el CSS de vuestro blog añadís

.PopularPosts li {
list-style:none;
width: 200px;
float: left;
padding: 5px;
}
.PopularPosts .item-thumbnail {
float:none !important;
}
.PopularPosts .item-thumbnail img{
width: 180px;
height: 180px;
}
.PopularPosts .item-title {
margin-top: -190px;
padding: 20px 5px 5px;
position: relative;
width: 170px;
height: 155px;
text-align:center;
overflow:hidden;
font-weight:bold;
background: #304957;
opacity:0.7;
-moz-opacity: 0.7;
filter: alpha(opacity=70);
}
.PopularPosts .item-title a {
font-size:22px;
overflow:hidden;
line-height:26px;
}
.PopularPosts .item-title a:hover {
color:#fff;
}
.caroufredsel_wrapper {
width:1000px !important;
overflow:hidden;
margin:0 auto !important;
padding: 0 20px;
}
#PopularPosts1 li:nth-of-type(1) .item-title{
background:#f32a2a;
}
#PopularPosts1 li:nth-of-type(2) .item-title{
background:#dbabcd;
}
#PopularPosts1 li:nth-of-type(3) .item-title{
background:orange;
}
#PopularPosts1 li:nth-of-type(4) .item-title{
background:#6a8ce1;
}
#PopularPosts1 li:nth-of-type(5) .item-title{
background:#84c659;
}

Algunas cosas a tener en cuenta:

.- Ajustar el ancho del Carrousel en .caroufredsel_wrapper (width)
.- Para item-title uso márgenes negativos y posiciones relativas por que si no, no va el efecto del cambio de color
.- El tamaño de las imágenes esta establecido en 180x180px, si queréis modificarlo deberéis ajustar los márgenes y tamaños de item-title
.- Los colores se pueden cambiar en #PopularPosts1 li:nth-of-type(X)

3.-  Script para animar el carrousel. Esta realizado con un plugin de jQuery por lo que debéis tener implementada esa librería para que funcione. Debéis bajaros el plugin, subirlo a vuestra web de alojamiento e insertamos la librería jQuery (los que ya la usáis no es necesario) y el plugin del carrousel antes de </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='URL ALOJAMIENTO PLUGIN' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#PopularPosts1 ul&quot;).carouFredSel({
auto : {
items : 1,
duration : 3000,
easing : &quot;linear&quot;,
pauseDuration : 10000,
pauseOnHover : true
}
});
});
</script>

Os he explicado como utilizarlo con el gadget de entradas populares pero en realidad sirve para cualquier lista que queráis convertir en un carrousel...

Feeds a los que puedes suscribirte en Twitter

Hay veces en las que queremos estar informados de una serie de acciones en redes sociales y no sabemos como hacerlo, plataformas como Twitter proporcionan una serie de feeds que nos permiten estar informados cómodamente en nuestro reader sin mayor esfuerzo.


Estos formatos de feed que ofrece Twitter son los siguientes:

1. Ultimas actualizaciones de un usuario en concreto

https://twitter.com/statuses/user_timeline/USUARIO.rss

2. Favoritos de cualquier usuario

https://api.twitter.com/1/favorites/USUARIO.rss

3. Menciones de cualquier usuario

http://search.twitter.com/search.rss?q=to:@USUARIO

4. Feed de una búsqueda por palabras, incluso hashtags

http://search.twitter.com/search.rss?q=BUSQUEDA o HASHTAG

Si queremos realizar una búsqueda con mas de una palabra deberemos rellenar el espacio en blanco con %20

5. Feed de una lista

https://api.twitter.com/1//lists/NOMBRE DE LA LISTA/statuses.atom

En Digital Inspiration puedes encontrar más feeds de otras redes sociales que pueden resultar muy útiles para monitorizar.

Facebook acepta tres formas diferentes de introducir la contraseña

Estamos acostumbrados, para acceder a cualquier plataforma que nos la requiera, a tener que introducir exactamente la contraseña que pusimos cuando nos dimos de alta en un servicio, teniendo en cuenta si usamos mayúsculas o no. Facebook permite hasta tres variantes de esa contraseña para facilitar el acceso.

Las tres formas que acepta Facebook son:

.- La contraseña original.

.- La contraseña original con la primera letra en mayúscula si accedes desde un móvil.

.- Tu contraseña original con las letras invertidas (hablamos de mayúsculas o minúsculas), si tu contraseña era toda mayúsculas y la introduces toda minúsculas o al revés, la aceptara.

Los motivos que esgrime Facebook para esto son lógicos, mucho móviles "capitalizan" automáticamente la primera letra, la ponen en mayúscula, y la tercera forma es para evitar el efecto del bloqueo de mayúsculas activado.

Vía || ZDNet

Generador de botones sociales flotantes para tu blog

Muchos son los que me preguntan sobre los botones sociales que flotan en las entradas de este sitio, están realizados usando jQuery y un plugin llamado Portamento, pero hay otra forma mucho mas sencilla de obtenerlos para cualquier sitio.

BloggerThemes tiene un generador automático que te permite tenerlos, solo debes seleccionar de que redes sociales vas a usar los botones, están disponibles, Facebook, Twitter, Google Plus, LinkedIn y Digg, el color que tendrá la barra y si la vas a poner a la derecha o a la izquierda. Una vez acabado solo debes acabar la selección y pulsar el botón de añadir a Blogger para obtener la barra lateral flotante con los botones sociales.

Como evitar que suban tus fotos a Pinterest

Con el auge de Pinterest, muchos son los que desean que sus dibujos y fotografías no sean subidos a esta plataforma, para los sitios que usan HTML (Blogger por ejemplo) solo se trata de añadir una etiqueta meta en la sección head de su plantilla.

Añadiendo esta etiqueta <meta name="pinterest" content="nopin"/> de esta forma los usuarios de Pinterest obtendrán un mensaje de aviso en los que se les indica que no es posible subir esas fotos o imágenes.

Para los sitios de Wordpress también es posible hacerlo como Hongkiat explica...

Nuevos gadgets en Blogger

Desde hoy Blogger ha puesto a disposición de sus usuarios dos nuevos gadgets relacionados con Google Plus, la insignia de nuestro perfil y el botón +1.

Para usarlos solo debes ir a la pestaña diseño, añadir un gadget y te aparecerán estas posibilidades. Un par de cosas a tener en cuenta, el botón +1 será el de tu blog en general, no el que se utiliza para compartir independientemente cada articulo, y la segunda, para añadir la insignia de Google Plus, debes copiar antes el ID de tu perfil de Google Plus al que vas a enlazar.

Siguen las novedades en Blogger....

Manuales de redes sociales

Walnuters edita a menudo lo que consideramos son de los manuales mas completos en español que te puedes encontrar sobre las distintas redes sociales, hemos considerado importante hacer una recopilación de ellos y ponerlos a vuestra disposición para que os puedan servir de ayuda.

Manual sobre Twitter 2012

Manual sobre Pinterest

Manual sobre Delicious

Manual sobre Pivacidad en Facebook

Manual sobre Xing

Manual sobre LinkedIn

Blogger grandes novedades para el SEO de nuestro blog

Los usuarios de Blogger estamos de enhorabuena, Blogger acaba de lanzar una serie de mejoras realmente importantes y que nos van a facilitar mucho algunos aspectos como la indexación de imágenes, insertar enlaces "nofollow", personalizar una pagina 404, etc.

Ahora si vamos a Configuración veremos una nueva posibilidad denominada Preferencias de Búsquedas en la que podemos ajustar:

.- Descripción de nuestro blog, la clásica etiqueta meta description que nos permite insertar el texto que se mostrara en los motores de búsqueda cuando se muestra url principal.

.- Mensaje de página no encontrada personalizado. Por fin una pagina de error, 404 plenamente personalizable, ya os mostrábamos como conseguir una emulación de ella, esta parte admite HTML pero si no queréis calentaros mucho la cabeza podéis usar una imagen como enlace a vuestra pagina principal, como hacemos nosotros en este sitio.

.- Redireccionamiento personalizado. Importante apartado este que nos va a permitir redireccionar cualquier pagina de nuestro sitio hacia otra página, se pueden añadir varias, desconocemos si hay alguna limitación pero pensamos que no la habrá, y no debemos confundirlo con un redireccionamiento completo de nuestro sitios.

.- Por fin, nos permiten crear nuestros propios archivos para robots.txt, pero cuidado si no eres un usuario realmente experto y avanzado, mejor no tocar nada ahí, corremos el riesgo de perder nuestra indexación en los buscadores.

Además en el apartado de la edición de artículos ahora al subir una imagen te da la posibilidad de añadirle las etiquetas alt y title, al mas puro estilo Wordpress y al añadir enlaces en los posts puedes también elegir si quieres que se abra en una nueva ventana y añadirle el atributo rel="nofollow" de cara a los buscadores.

Por ultimo, lo que nos parece de los mas importante, la posibilidad de elegir la descripción individual de cada articulo que queramos que aparezca en los buscadores, cosa imposible hasta ahora y que de cara a mejorar el SEO de nuestros sitios es básica.

Bienvenidas sean TODAS esta nuevas mejoras de Blogger....

Blogger ya distingue la procedencia de los dominios

El jueves pasado repasando el blog de mi compi Lola, Ajoblanco, me fije que Blogger ya había puesto en marcha la distinción del país en sus urls, cosa de la que os advertíamos hace algunas fechas.

Como ya os avisamos, y conociendo a Blogger, ahora seguramente habrá un pequeño lío en los buscadores, se producirá contenido duplicado y no tenemos muy claro que todo el trabajo de enlaces que se haya hecho en redes sociales no quede inutilizado. Para evitar esto hay una pequeña cosa que podéis hacer, en los códigos de los botones donde tengáis puesto data:post.url modificarlo por data:post.canonicalUrl, esto permitirá que siga apareciendo el .com en vez del .es.

Pasados unos días veremos como han hecho las cosas de bien estos de Blogger....

Insertar Pinterest en Facebook

Insertar Pinterest en tu página de Facebook puede ser una interesante manera de atraer mas visitas, podemos insertarlo de forma bastante fácil usando Static Iframe Tab que te permite insertar un iframe dentro de una pestaña.

Una vez instalada la aplicación en Facebook solo deberemos insertar nuestra url de Pinterest tal como os muestro en la imagen siguiente y cambiar el nombre de la pestaña

También podréis cambiar el icono que se muestra por defecto pulsando sobre Tab Image y subiendo el logo de Pinterest.

Iconos sociales con efecto 3D

Para instalar estos iconos sociales con efecto 3d, asemejan unos botones que se quedan pulsados. Solo debes añadir un elemento HTML a tu plantilla e incrustar el código que hay debajo. No olvides rellenar las urls de tu feed y redes sociales en el código (negrita)

<style type="text/css">
/* Iconos Sociales */
.social-ico {width: 300px;}
.social-rss, .social-twitter, .social-facebook, .social-google{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyceCOldE2_T0s7zzu7EP-d7PeTcqjYUkJBFqEWDlNJIAWaPXwAmaO1jIcpsJcSeU0HqfkKRFQa6582y_rCqWxBBaek0AAW5vxMXCq5L_EFos1Xlw21ISXXqR4D4D1eZfoyXbX0QyfrmW9/s0/socialico.png) no-repeat top left; }
.social-facebook{ background-position: 0 0; width: 64px; height: 64px; float:left;}
.social-facebook:active{ background-position: -74px 0; width: 64px; height: 64px;}
.social-facebook:hover{ background-position: -74px 0; width: 64px; height: 64px;}
.social-google{ background-position: -148px 0; width: 64px; height: 64px;float:left;}
.social-google:active{ background-position: -222px 0; width: 64px; height: 64px;}
.social-google:hover{ background-position: -222px 0; width: 64px; height: 64px;}
.social-rss{ background-position: -296px 0; width: 64px; height: 64px; float:left;}
.social-rss:active{ background-position: -370px 0; width: 64px; height: 64px;}
.social-rss:hover{ background-position: -370px 0; width: 64px; height: 64px;}
.social-twitter{ background-position: -444px 0; width: 64px; height: 64px; float:left;}
.social-twitter:active{ background-position: -518px 0; width: 64px; height: 64px;}
.social-twitter:hover{ background-position: -518px 0; width: 64px; height: 64px;}
</style>
<div class="social-ico">
<a href="URL DE TU FEED" target="_blank" title="Suscribete y no te pierdas nuestros articulos!!!" rel="nofollow"><span class="social-rss"></span></a> <a href="URL DE TWITTER" target="_blank" title="Síguenos en Twitter, interactuar es facil" rel="nofollow"><span class="social-twitter"></span></a> <a href="URL DE FACEBOOK" target="_blank" title="Síguenos en Facebook" rel="nofollow"><span class="social-facebook"></span></a> <a href="URL DE GOOGLE PLUS" target="_blank" title="Síguenos en Google+" rel="nofollow"><span class="social-google"></span></a>
</div>

Iconos creados por Land of Web para uso personal y comercial.

Botón de compartir en Pinterest para Blogger

Hace algunos días os mostrábamos que Pinterest ofrecía sus propios botones para que las visitas de nuestro blog puedan compartir en sus tableros nuestros contenidos pero la realidad es que he tenido muchos problemas a la hora de que funcionasen correctamente.

La única solución que me ha funcionado correctamente es usando una imagen y el código que encontré en OutNumbered.

<a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());"><img alt="Pin It" class="aligncenter" src="http://img.photobucket.com/albums/v419/green_tea/pin.jpg" /></a>

Que son los códigos QR

Un código QR es un sistema para almacenar información parecido a los códigos de barras habituales con la diferencia que un código QR almacena datos en dos dimensiones y puede ser escaneado vertical u horizontalmente para ser decodificado.

Se caracterizan por tres cuadrados que se encuentran en las esquinas y que permiten detectar la posición del código al lector. Las siglas QR provienen del inglés y significan Quick Response (Respuesta Rápida),debido a que se creo para que se leyeran a gran velocidad.

Estos códigos pueden almacenar una variedad de datos frente al código de barras tradicional que almacena hasta 30 números, mientras que un código QR puede almacenar hasta 7.089 números. Esta diferencia permite que en ellos podamos insertar:

.- Texto
.- Enlaces
.- Números de teléfonos
.- SMS / MMS
.- Email (Enviar mensaje)
.- vCard o MeCard
.- Entrada de la agenda (vCalendar)
.- Almacenar un hipervínculo lo cual presenta un sinfín de posibilidades como reproducir un vídeo, descarga de una aplicación móvil, el check-in en Foursquare, actualizar un estado de Twitter, mapas, etc.

En un principio su desarrollo se centro en las grandes fábricas para facilitar el inventario de sus productos pero la aparición de aplicaciones que permiten leerlos a través de dispositivos móviles y que se puedan aplicar a casi cualquier tipo de superficie, ha permitido que den el salto a la calle y cada vez sean más sus usos.

Su uso creció un 1.600% en el año 2010 y un 22% de las empresas incluidas en Fortune 50 ya lo han utilizado. Los códigos QR dominan este campo de códigos de barras en 2D aunque hablar en general de códigos QR no es correcto, existen otros formatos, tal vez menos conocidos de códigos de barra en 2D como Data Matrix, EZcode ScanLife y Microsoft Tag.

Hay varias diferencias en estos formatos de código, pero básicamente EZcode ScanLife y Microsoft Tag son formatos propietarios sólo descifrable por sus herramientas, mientras que los formatos QR y Data Matrix son de estándar abierto.

Actualmente existen muchos generadores en línea de códigos QR, por lo que generarlos es una tarea bastante sencilla, QRStuff es uno de ellos que incluso te permite agregarle colores si lo deseas.

Como ejemplo de uso puedes ver la última campaña de Heineken en la que en un festival de música uso los códigos QR para que los asistentes pudiesen llevar un mensaje personal...