El Favicon

El favicon (o icono de favoritos, minicono, imagen de pagina) es una pequeña imagen que se asocia a una página web, como puede ser la g minúscula azul de Google, la B naranja y blanca de Blogger, f blanca con fondo azul de Facebook. Pero, ¿Podemos crear una y ponerla para nuestro blog?

Personalizar Barra de Navegación de Blogger

A los que usamos plantillas personalizadas, la barra de navegación de blogger nos supone un atraso al no poder casi ni tocar por lo que solemos quitarla sin miramientos. Las plantillas por defecto de blogger las traen, y casi en todos los casos en ese azul corporativo que tanto da el cante. Os vamos a contar algunas personalizaciones que se pueden hacer de una forma fácil y efectiva.

Leer más nativo en Blogger

En una entrada anterior veíamos cómo hacer el truco de leer más (entradas resumidas en la página principal, accesibles en su totalidad desde un enlace tipo seguir leyendo). Pero desde que Blogger implementó de manera nativa la posibilidad de hacerlo, ya no es necesario complicarse la vida con aquel hack.

Cómo cambiar la URL y el nombre mostrado

Maria Amparo, una amiga mía, se abrió un blog el otro día. Le sugerí que se acortara la URL -dirección web del blog- porque resulta muy larga y redundante. Y me preguntó cómo se hacía. Claro, para un blogger experimentado, es una cosa sencilla, pero para alguien que acaba de empezar puede no resultar tanto.

Leer más en Blogger

Actualización: desde la implementación del leer más nativo en Blogger, este hack ya no es necesario. Hay otro post explicando la manera de hacerlo nativamente, sin hacks externos a Blogger. Lo podéis consultar aquí.

Abrir links en otra ventana

Mayo nos escribe con la siguiente consulta:

"Me gustaría saber lo que tengo que hacer para que los enlaces en el blog, se abran en otra ventana"

La solución es sencilla. Basta con añadir un poquito más de código a nuestros enlaces.
Justo después del link, añadiremos target="_blank"

Ver Ejemplo

En Tocayos, enlazas hacia los Premios 20blogs 2009 a través de una imagen.Para que este enlace se abra en otra página el código será el siguiente:

<a href="http://lablogoteca.20minutos.es/premios-20blogs/" target="_blank"><img src="http://estaticos.20minutos.es/i/vot03.gif" /></a>

Si quieres añadir una leyenda que aparezca al pasar el puntero sobre ese enlace, solo tienes que poner title="TEXTO QUE QUIERAS" en el código.

Ver Ejemplo

<a href="http://lablogoteca.20minutos.es/premios-20blogs/" target="_blank"><img src="http://estaticos.20minutos.es/i/vot03.gif" title="Premios 20Blogs"/></a>

Crear Blog (Parte 1)

Hola amigos.

Este artículo y los siguientes con este título, van dirigidos a todos aquellos usuarios de la red que aún no se han atrevido a crear un blog, por verlo o creerlo complicado o porque carecen de tiempo para estar investigando de los pasos a seguir para crearlo.

Todos tenemos una afición, algo que contar o algo que dar a conocer a los demás, pues a veces sin querer y sin saberlo, hay personas que tienen dentro de su mente pensamientos e ideas que nos puedan servir a los demás.

Por eso, os animo a que si no lo habéis hecho aún, os lancéis a crear vuestro propio blog.

Vamos a centrarnos en Blogger y en Wordpress, por ser los sitios más comunes. Si os fijais, vereis que es muy sencillo crear un blog, y que en todos los sitios se hace de manera muy similar.

En Blogger

Sólo necesitaremos crear una cuenta en Google, para que luego, acompañado de la contraseña que le pongas, te dé acceso a crear tu propio blog. También te sirve si ya tienes una cuenta en Gmail, Grupos de Google u orkut.


Lo primero es pensar en el nombre que le queremos dar(la URL).

Para crear esa cuenta en google, tendrás que tener otra cuenta en otro sitio, que es la que te identificará como usuario. Después tendrás que añadir una contraseña y responder a breves preguntas como lo haces al abrir otras cuentas y listo, ya tienes tu cuenta en Google.

Una vez que has entrado en tu cuenta de Google, entra en "mi cuenta" y después en Blogger, que te llevará a una página de Blogger en la que te la opción de poner el nombre al blog y una dirección o URL de blogspot. Comprueba también el que esté disponible y la puedas poner.

Verifica la palabra que te pone y dale a SIGUIENTE.



Ahí verás que te la la opción de elegir una plantilla que será la que le pongas de fondo y de diseño a tu blog.

Elige una que te guste, más adelante podrás cambiar si lo deseas. En mi caso he elegido la Mínima y le he dado a CONTINUAR.

En Wordpress

Entramos en http://es.wordpress.com/ y clicamos sobre "Regístrate ahora".

Rellenamos los datos que nos piden (En este caso señalaremos al final la casilla de " venga dame mi blog", y vamos a "Siguiente".

Después elegimos la url que tendrá nuestro blog, su titulo, lenguaje y privacidad (en este caso señalaremos la casilla de privacidad) y marcamos "Registrarse".

El paso siguiente será comprobar en nuestra bandeja de entrada si hemos recibido un mail para activar la cuenta en wordpress.

Entramos en el mail, y clicamos sobre el enlace que nos aparece para activar nuestra cuenta.

Nos aparecerá una página con nuestro nick y nuestra contraseña. Vamos a " View your site" donde visualizaremos nuestro nuevo blog o a "login" para comenzar a publicar o modificar el diseño :)

Y ya está creado el blog. A partir de aquí ya puedes publicar lo que quieras :)

Poco a poco seguiremos viendo y aclarando cosas que te van a resultar útiles y sencillas.

Un saludopides.

Recuperar un blog (con blogger)

Hola a todos!

Eva nos pide a través del formulario de contacto si existe alguna manera de "recuperar" un blog que ha sido suprimido.


La respuesta es SI. Desde hace un par de meses. Y además, de una manera muy sencilla.

Para comenzar ingresamos en blogger.com con nuestros datos de usuario. Tras esto vamos al escritorio.

Ahi, nos aparecerá el blog (o lista de blogs) que hemos creado desde esa cuenta de usuario.



Al final de ese listado, nos aparecerá el blog o blogs que hemos eliminado.



Daremos a "Recuperar" este blog. Tras esto nos aparecerá un mensaje debajo de "Escritorio" avisandonos de que nuestro blog ha sido recuperado :)

Efecto movimiento en el Header

Irene nos consultó a través del correo lo siguiente:

"Me gustaría saber como se logra el efecto para que el header se mueva cada vez que apoyas el cursor encima"

El efecto se logra de una manera muy sencilla, ya que los cambios que tenemos que hacer en nuestra plantilla, son mínimos.

Si os habeis fijado en los blogs de Yenodeblogs, en todos se ha incluido ese efecto, pero, además de afectar al header, afecta a los enlaces del blog (Titulos de las entradas, enlaces a las entradas, links, etc.)


En primer lugar, buscaremos donde se encuentra el código que afecta a los links.
En la mayoría de las plantillas lo encontraremos en

/* Links

----------------------------------------------- */

Una vez localizado, nos colocaremos después de a:hover {

Y justo ahí es donde debemos añadir el código que definirá el movimiento de nuestros links. Para ello, debemos elegir las direcciones en las que queremos que el movimiento se realice. Por ejemplo, en Blogconsejo, el efecto va hacia la izquierda y hacia abajo.

position: relative;

Y ahora añadiremos los valores que le daremos al movimiento. Escribiendo en una segunda linea el valor de "top" , "left", "bottom" o "right"

Con top estamos añadiendo el movimiento hacia abajo.
Con left hacia la derecha.
Si queremos que el efecto sea hacia arriba pondremos bottom.
Y si lo queremos hacia la izquierda pondremos right.

Además podremos elegir lo marcado que queremos que se vea este efecto. En nuestro caso el valor que le hemos dado es de 1px, pero si quieres que el efecto se note más, deberas darle un valor de 2px, o más.


Un ejemplo de esto seria:
top:1px;


- En el caso de blogconsejo, el movimiento se realiza con top y con left. Debeis tener en cuenta que si poneis top, no podeis poner bottom, y si poneis left no podeís poner righ, ya que no existiría movimiento alguno.

- Si quereis que el movimiento solo afecte al header, debereis realizar los mismos pasos pero en el codigo que afecta al header :)

- Solo será visible en el header si la cabecera está incluida en el elemento de la cabecera que nos muestra en - Elementos de Página-, si la imagen de nuestra cabecera está incuida en el código de la plantilla no se verá el movimiento.

Emoticonos para los comentarios

¿Tenéis un blog en Blogger y os gustaría tener emoticonos o emoticones para los comentarios? Pues continuad leyendo...

Antes de hacer nada conviene que os busquéis unos emoticonos que os gusten. Aparte del servicio del que yo los tomé, http://smilies-gifs.com/, no os voy a recomendar ningún sitio en concreto, pues sitios así los hay a montones y no sabría orientaros. Además, es cuestión de gustos sobre todo...

Una vez elegidos los monigotes, hay que alojarlos en algún servidor. Tres sitios son recomendables para ello:

1. Picasa: al fin y al cabo, es donde Blogger aloja nuestras imágenes.
2. ImageShack: buen lugar para alojar cualquier tipo de imágenes.
3. SkyDrive: el servicio anexo a MSN y Hotmail. A pesar de los cambios de URL en otros tipos de archivos, parece ser que con las imágenes, de momento, no cambian.

Para BlogConsejo estoy utilizando el último servicio. No obstante, yo recomiendo usar uno de los dos primeros para más seguridad.

Una vez alojados los archivos, tomamos buena nota de sus direcciones, porque las vamos a necesitar muy pronto.

Lo siguiente que necesitamos es un script para transformar determinadas combinaciones de letras en las imágenes de los emoticonos. Lo tenéis tras este enlace, en un archivo comprimido.

Descomprimimos y abrimos el archivo con un editor de textos, tipo Bloc de Notas. Localizamos estas lineas y ponemos las direcciones web de nuestras imágenes en sus lugares correspondientes:

Ver código


d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\)/g, ' <img src="URL_IMAGEN_SONRISA" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\s;-?\)/g, ' <img src="URL_IMAGEN_GUIÑO" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\$/g, ' <img src="URL_IMAGEN_RUBOR" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\(/g, ' <img src="URL_IMAGEN_TRISTE" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\s:-?D/ig, ' <img src="URL_IMAGEN_RISAS" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\sx-?D/ig, ' <img src="URL_IMAGEN_(IGUAL QUE EL ANTERIOR, ES POR SI ALGUIEN USA LA COMBINACIÓN xD)" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\sX-?D/ig, ' <img src="URL_IMAGEN_(IGUAL QUE EL ANTERIOR, ES POR SI ALGUIEN USA LA COMBINACIÓN XD)" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\s:-?P/ig, ' <img src="URL_IMAGEN_LENGUA" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\s:-?p/ig, ' <img src="URL_IMAGEN_LENGUA(IGUAL QUE EL ANTERIOR, ES POR SI SE USA LA p EN MINÚSCULAS)" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\s:-?S/ig, ' <img src="URL_IMAGEN_SUSTO" id="new" /> ');

d[i].innerHTML = d[i].innerHTML.replace(/\s:-?\O/g, ' <img src="URL_IMAGEN_OOOooo" id="new" /> ');


Sustituimos todo el texto que está en rojo por sus correspondientes direcciones, con el http:// incluido, y guardamos el archivo.

A continuación, lo subimos a un servidor. Yo lo que hago es cambiar la extensión .js del archivo a .txt y lo subo a Google Sites. No aconsejo, bajo ningún concepto, subir este archivo a SkyDrive, porque aunque recién subido funciona, a las pocas horas te cambian la URL y ya no te va.

Una vez subido, podemos hacer una llamada al script cualquier punto de la plantilla antes de </head>:

<script src='URL_DEL_ARCHIVO' type='text/javascript'/>

O bien, podemos hacer lo que aconseja JMiur de Vagabundia, de hacer que se cargue sólo cuando se abre una entrada concreta, aligerando la carga de la página principal. ¿Cómo? Colocando estas líneas de código justo antes de </body>, o justo antes de la side bar, es decir, antes de una linea que pone <div id='sidebar-wrapper'> o similar.

Yo lo he puesto en mi blog antes de </body> y, aunque ahora los emoticonos son los últimos en cargar, la página entera tarda menos en cargar.

Por último, el script que facilitamos está preconfigurado para funcionar sólo en los comentarios. Si queréis que funcione en más sitios, antes de subirlo deberíais buscar dentro del código del script esta línea:

var d = [], i=0, def = ['comment-body'];

Y entonces, entre los corchetes donde está ['comment-body'] añadir, separado por comas, las clases que queráis poner del blog para que funcionen los emoticonos en ellas. Por ejemplo, si en el ejemplo anterior, queremos que funcione también en las entradas, pondríamos lo resaltado en rojo:

var d = [], i=0, def = ['comment-body','post-body'];

Seguramente se han quedado cosas en el tintero. Si tenéis alguna duda, no dudéis en comentarlas.

Referencias:

Blotecnia: Tecnología y Sociedad - Emoticonos, smilies en Blogger

Geekaholic - De donde obtuve el script original

Vagabundia - Blogger y los emoticones