Sabemos que consejos para blogs hay muchos por Internet. Por eso Blogconsejo trabaja directamente en lo que tu quieras. Si quieres que escribamos sobre algún detalle, consejo o modificación para tu blog, ¡¡Escríbenos!!

27 may 2009

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 :)


22 may 2009

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.

20 may 2009

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.

18 may 2009

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 :)

16 may 2009

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