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

Herramientas II (Creando nuestros botones)

Algunos/as nos habeis comentado como conseguimos que algunos de nuestros enlaces y botones tengan otro tipo de fuente.

Para el diseño de los blogs de Yenodeblogs, la respuesta es muy sencilla: son imágenes.

Esta entrada la dedicaremos a realizar un botón. Por ejemplo el botón de leer más:

Para ello utilizaremos varias de las herramientas de las que ya hablamos en Herramientas I.

Abrimos Paint y GIMP.

En este caso teníamos el código html del color que queriamos utilizar, por lo tanto, en GIMP, clicamos sobre los cuadros de color...



... y en Notación HTML escribimos el código de nuestro color y damos a ENTER.



¿Por qué hacemos estos pasos?

Porque Paint no funciona con los códigos de html y necesitamos conocer la combinación de colores que se realiza para conseguir ese color. ¡Y ya la tenemos!
Si os fijais, por encima de la anotación vienen una serie de letras y numeritos, nosotros vamos a quedarnos con estas:


Abrimos el paint, y vamos a Colores - Modificar colores - Definir colores personalizados - y en "Rojo-verde-azul" copiamos los codigos que nos facilitan en GIMP. Agregamos el color personalizado, le damos a guardar, y listo! ya tenemos nuestro color incluido en la tableta de paint!



Ahora elegimos la forma que queremos para nuestro botón, en este caso, yo he elegido el eclipse.



Elegimos el tipo de fuente que queremos para nuestro botón.

Y escribimos sobre él.(con la opción transparente)

¡Ya tenemos nuestro botón con una fuente diferente casi terminado! Solo nos falta eliminar el fondo blanco de la imagen, para que no aparezca en nuestro blog, para ello regresamos a GIMP, le damos a Abrir y subimos nuestra imagen, vamos a Colores - Color Alfa - nos aseguramos que en "Desde" aparezca el color blanco y le damos a OK. Guardamos la imagen. ¡Cuidado! debemos guardarla con extensión .png sino el fondo de color blanco no desaparecerá.

Ahora queda lo más sencillo, incluirla en nuestra plantilla.
Nos situamos en el lugar donde queremos colocarla, en nuestro caso, en el lugar donde se encuentra el CSS del leer más. Y simplemente copiamos: background: url ( URL DE NUESTRA IMAGEN) no-repeat;


Parece más pesado de lo que es. Pero en la práctica puedes tardar unos 5 minutos en realizarlo únicamente. Hay páginas donde puedes generar tus botones, sin embargo a mí me gusta hacerlo así (algunas veces solo en GIMP) pero entiendo que paint os resultará más sencillo) ya que de esta manera puedo elegir totalmente como quiero que sean, como en este caso, una fuente de letra que defina a nuestras entradas, y que sean totalmente distintos a los demas :)

Resetear el CSS

En un comentario Arwen nos comenta lo siguiente:

"Tenemos la página que carga bien con Firefox pero sin embargo con Explorer depende de que tipo de fuente incluyamos saca caracteres raros (tipo ASCII) y hace el tamaño de letra (titulos laterales) más grande de lo habitual.
Aunque hemos quitado bastante material pesado de la página (slides y multimedia) cuesta cargar...alguna sugerencia???"


Nuestras plantillas, vienen todas con un CSS determinado. Reseteando estos estilos, nos evitará problemas como el de que nuestro blog se vea de manera diferentes en los navegadores. Reseteando el CSS conseguiremos que nuestro blog se vea como nosotros hemos diseñado :)


Para implementarlo, en primer lugar vamos a hacer una copia de nuestra plantilla.
El que yo utilizo, venía por defecto ya incluido en una de mis primeros diseños, y es el que he seguido manteniendo después.

Nos vamos a Diseño - Edición de HTML

Buscamos:

<b:skin>

Y justo después copiamos el siguiente código:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;

}

/* remember to define focus styles! */

:focus {
outline: 0;
}

body {
line-height: 1;
color: black;
background: white;

}

ol, ul {
list-style: none;

}

/* tables still need 'cellspacing="0"' in the markup */

table {
border-collapse: separate;
border-spacing: 0;

}

caption, th, td {
text-align: left;
font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: "";

}

blockquote, q {
quotes: "" "";

}

Guardamos los cambios y listo :)

Este código es de Eric Meyer.

Opción de "Responder comentario"

Emma nos comenta que le gustaría poder añadir a su blog la opción de responder cada comentario.


Es un tema algo complicado dependiendo de la plataforma que utilicemos, más que el hecho en sí de implementar un código en nuestra plantilla.

En Wordpress

Para wordpress la solución es muy sencilla. Actualmente muchas de sus plantillas ya incorporan esta opción.
Si no es así, existe un plugin para incluir la opción de responder cada mensaje. (@Reply/w comment preview)
Podemos descargarlo Aquí.

En Blogger

Sin embargo para blogger es diferente. No existe ningún script que nos permita de una manera fácil tenerlo en nuestro blog.
Durante el tiempo que he estado informándome sobre esto, la solución que más me ha gustado es la que da DISQUS.

Solamente hay que entrar en la página y registrarse .
Tras esto, nos vamos a nuestro blog, entramos en - Diseño - Edición HTML y Descargamos nuestra plantilla.

Una vez tenemos nuestra plantilla descargada, abrimos la página de Disqus, y vamos a Añadir website.

Escribimos nuestros datos... (el nombre que elijamos será el nick con el que aparecerán nuestros comentarios)

Elegimos nuestra plataforma (en este caso blogger) y aceptamos.

En Upload Template elegimos si queremos que los cambios afecten a las entradas que escribamos a partir de ahora (1) o, a todas las entradas (2). Pinchamos sobre examinar y subimos la plantilla de nuestro blog que previamente habiamos descargado.

Le damos a upload, tras esto nos aparecerá un nuevo código. Es el nuevo código de nuestra plantilla. Ponemos el ratón encima y seleccionamos todo el código.

Volvemos a nuestra plantilla. En Edición de HTML donde nos quedamos antes. Eliminamos todo el código y pegamos el nuevo codigo. Vamos a "Ver blog" y comprobamos que nuestros comentarios ¡han cambiado!


El único "inconveniente" que le veo es que nuestros comentarios dependen de ese servicio. Y no de blogger. Si el servidor que utiliza "se cae" perdemos todos nuestros comentarios, hasta que se solucione el problema. Aunque, en todo el tiempo que lleva funcionando ha fallado una vez, y tardaron menos de 10 minutos en solucionarlo :)

Para ver las imágenes a tamaño natural, haced clic en ellas.

Herramientas I

Las herramientas con las que trabaja un/a blogger son tan necesarias como el mismo blog. Sin ellas no podría conseguir casi nada de lo que implemento en mi plantilla, o, yendo más lejos, en las entradas.

En esta primera entrada, voy a comentaros las que yo utilizo más habitualmente. ¿Comenzamos?

- Paint: El paint de toda la vida. Es el que más uso para realizar todas las imágenes que utilizo en el diseño de las plantillas. También lo utilice alguna vez para escribir alguna entrada.

- GIMP: Simplemente genial. Como en el anterior también se pueden realizar imágenes, pero trae muchas más posibilidades. Girar imagenes, el texto, efectos, transparencias, etc. Este programa lo iremos viendo poco a poco.

- ImageShack: Para alojar imágenes.

- Colores html: Dispone de una serie de paletas según el color que buscas (grises, rojos, verdes, etc. )Además, cuenta con dos paletas más para, en una ir moviendo el ratón por todos los colores (a modo del paint) y en otra para ir jugando con las barras de color (rojo, verde y azul) para encontrar el color que deseamos :)

- DNJ CLip Color: Ultimamente es el que más utilizo. Por ejemplo para el nuevo diseño de Yenodeblogs, busqué una imagen en google de colores "tierra", y con este programa (hay que descargarlo) fui colocando el puntero sobre la imagen para que me diera el codigo del color que me gustaba. Esto también podemos hacerlo en GIMP, pero ya hay que subir la imagen a Gimp, por lo que así me parece muchomás cómodo.

- Skydrive. Muy util para alojar cualquier archivo. Sin embargo hace poco tiempo hubo problemas con aquellos que tenian extensión .js . Lo sigo utilizando para alojar imágenes ,música, y documentos.

- GoogleSites. También para alojar nuestros archivos. Lo comencé a utilizar cuando en skydrive no podía alojar los script de mi blog. El inconveniente que por el momento le he visto es que tampoco aloja archivos con extensión .js , pero podemos convertirla fácilmente en .txt y funciona igual.

Y creo que no me olvido de ninguna :)

Consejos para los blogs I

Desde hace ya algún tiempo en el que me incorporé al mundo de los blogs, he ido tomando nota de algunas cosas que me han llamado mucho la atención y que en parte han sido un impedimento para poder disfrutar de la estancia en los mismos, de poder dejar una simple opinión o de poder leer lo que el autor ha publicado. (...)

Por estos motivos, creo conveniente hacer algunas consideraciones.

- En algunos blogs, nada más entrar te recibe un mensaje publicitario que a veces tarda en cargar y supone una gran molestia porque llegan incluso a paralizar las aplicaciones de tu ordenador.

Esta bien tener publicidad para sacar algún dinerito extra, pero al que quiere entrar con asiduidad, se le hace muy molesto y llega a cansar, por lo que puedes perder un contacto.

- En otros, aún llamándote la atención algún artículo, casi son imposibles de leer porque molestan a la vista por su contraste de color (por ejemplo fondo negro y rosa fuerte) o porque las letras se confunden con el fondo y apenas se pueden ver.

En cierta ocasión encontré ciertos artículos que me interesaban y como no podía leerlos, los copié y pegue en mi ordenador para poder leerlos claramente.

- Se da el caso también que te lees un post y quieres dejar un comentario y no lo encuentras. En algunos blogs, te tienes que meter en dos accesos para poder comentar.

Respecto a los comentarios y una vez que has terminado de expresar tu opinión, a veces te salen unas letras anti spam ilegibles u ocultas entre colores y otras formas que dificultan el poder publicar ese comentario, por lo que cuando tenga esa persona que realizar otro comentario, se lo pensará...

- Para facilitar la lectura de los post, es aconsejable el justificar los márgenes y el dejar un espacio entre párrafo y párrafo.

- Para evitar faltas de ortografía, haz tus artículos en algún procesador de textos con corrector ortográfico para evitar errores y faltas, porque si tienes un buen relato pero tiene faltas de ortografía, lo desmerece.

- Intenta disponer de un espacio o facilita la forma de contactar. En algunos blogs es casi imposible o no lo tienen ni siquiera previsto.

Y siempre es bueno que te puedan decir algo por otro medio, pues sin querer te has podido equivocar en algo y siempre es mejor que te lo puedan decir en privado.

- Cuando vayas a dejar un comentario, pon bien tus datos, que es muy posible que a quien visites e incluso otros que han visto tu comentario es posible que quieran ver tu blog, pero si no lo has puesto correctamente, no accederán a tu blog.

- Procura visitar y dejar huella de tu paso, que si visitas y no comentas, no te estarás dando a conocer.

Espero que todo lo expuesto sea de vuestra utilidad.

(Entrada original de Európides)

Formulario de contacto

	Nombre: E-mail: URL del blog: MENSAJE: