Como añadir un botón de Ayuda Blogs
............................................................................................................................Comentarios (4) | Publicado el 28 - 06 - 2008
Hace unos días Rogelio estrenaba Ayuda Blogs, un portal de envió de noticias pero solo relacionadas con el mundo de los blogs.
Cualquiera puede votar alguna de las noticias publicadas en Ayuda Blogs, pero para enviar una noticia hay que estar registrado, igual que en Menéame. Si el proyecto de Rogelio tiene éxito (eso espero y deseo) sería conveniente tener en el blog un botón que les pusiese las cosas fáciles a los usuarios de Ayuda Blogs. Así se facilitaría el envío de noticias a este portal y sería una fantástica manera de mejorar la visibilidad en La Red y conseguir nuevas visitas.
Vamos a ver como añadir este botón en Wordpress:
1º) Descarga esta imagen y subela a la carpeta donde guardes las imágenes (no enlaces ésta directamente):
2º) Ahora añade el siguiente código en la zona de tu plantilla donde quieras que aparezca el botón. Después le cambiaremos un trozo para adaptarlo a tu sitio:
3º) Ahora solo tienes que poner la url hasta la imagen que has subido a tu servidor donde dice ESTO_HAY_QUE_CAMBIARLO para que te quede algo así (es solo un ejemplo, no lo copies tal cual):
Y listo a partir de ahora tendrás un botón con el que ayudarás a que tus visitas puedan promocionar tus noticias y artículos. Saludos avinagrados.
Dar estilo al código en WordPress
............................................................................................................................Comentarios (9) | Publicado el 27 - 06 - 2008
Ahora que ya sabemos como mostrar código en WordPress vamos a ver como se le da estilo para que aparezca de la forma que más nos guste.
Lo primero que tenemos que hacer es abrir la hoja de estilos de nuestra plantilla, que normalmente es “style.css” o en su defecto otro con la terminación “css” (Cascading Style Sheets u Hojas de Estilo en Cascada).
Una vez localizado añadiremos el siguiente código para crear la clase “codigo”:
background-color:#f8f3f3;
color:blue;
font-family:’Courier New’,Courier,monospace;
font-weight:normal;
margin-top:10px;
padding:10px 2px 10px 10px;
border-left: 2px solid blue;
}
Ahora veremos lo que hace cada parte de este código para que se adapte a tu gusto:
1º) background-color: aquí puedes elegir el color que quieres para el fondo de tu código.
2º) color: aquí puedes elegir el color de la fuente.
3º) font-family: aquí puedes elegir la familia de fuentes que utilizaremos para representar el código.
4º) font-weight: aquí elegimos el grosor de la fuente. Para elegir otro grosor lee ésto.
5º) margin-top: con esto conseguimos dejar un pequeño margen entre el texto y el código. Cambia el valor 10px si quieres que tener más o menos espacio. Si quieres aumentar el espacio al final del código solo tienes que añadir la línea magin-bottom:*px; y sustituir el asterísco por el valor que quieras.
6º) padding: los valores asignados a este campo crearán un margen interno dentro del contenedor que contiene el código. Los valores corresponde, en este orden, a los márgenes internos superior, derecho, inferior e izquierdo.
7º) border-left: con esta propiedad creamos un borde a la izquierda de nuestro contenedor con un grosor de 2 pixeles, con trazo continuo (solid) y de color azul (blue). Si quieres modificar estos valores lee ésto.
Ahora cuando queramos escribir algo de código en uno de nuestros posts crearemos un contenedor metiendo el código entre las etiquetas <div class="codigo"></div>.
De esta forma si escribimos en nuestro post algo como ésto:
<div class="codigo">
<html>
<head>
<title>Hola</title>
</head>
</html>
</div>
Cuando el post se publique obtendremos esto otro:
<head>
<title>Hola</title>
</head>
</html>
Bueno pues ya sabéis como dar estilo a vuestro código con la ayuda de las hojas de estilo. Iremos viendo más cosistas. Saludos avinagrados.
Como escribir código en WordPress
............................................................................................................................Comentarios (6) | Publicado el 24 - 06 - 2008
Los que utilizan WordPress ya saben que si intentan mostrar una porción de código en uno de sus posts se encontrarán con el problema de que el código no aparece en pantalla.
Existen más de un plugin para hacer ésto, pero siempre que es posible evito instalar un plugin para así mejorar el rendimiento de la página.
El problema fundamental a la hora de mostrar código en pantalla es que WordPress interpreta los caracteres que utiliza HTML para definir sus etiquetas (<,>) y no muestra el código en el post correspondiente.
Conociendo el problema es fácil saber cual es la solución. Simplemente habría que sustituir < por < y > por > para evitar que el código sea interpretado.
Hacer ésto de forma manual puede ser bastante tedioso (de hecho lo es) por eso lo mejor es recurrir a alguna utilidad (en este caso online) que nos permita convertir todo un código (o porción) para obtener el resultado adecuado. Yo utilizo este conversor de entidades html, de modo que si coloco un trozo de código en la zona “Texto a convertir” y luego pincho en “Convertir” obtengo el texto ya codificado que podré insertar directamente en el post.
De esta forma ya no tendrás problema a la hora de insertar código en tus posts de WordPress. Ahora puedes ver como dar estilo al código para que se diferencie del resto del contenido. Saludos avinagrados.
Vigila tu código con frecuencia
............................................................................................................................Comentarios (16) | Publicado el 20 - 06 - 2008
Os debo un artículo desde hace varios meses y es que no se si recordaréis que por el mes de febrero sufrí un “pequeño” problema con la indexación de este blog por parte de Google.
Para refrescaros la memoria os recuerdo que el problema consistía en que Google mostraba unos caracteres chinos donde deberían de aparecer letras como la “ñ” o vocales acentuadas. Esto provocaba que una palabra como “artículos” fuese interpretada por Google como dos palabras “art” y “culos” al quedar separadas ambas por el carácter chino.
En ese artículo os contaba que debido a esto Google me mandaba búsquedas para la palabra “culo” (la mitad de la palabra “artículos”) y como en el post en el que os conté el problema también hablaba de los caracteres “asiáticos” pues Google empezó a considerarme el rey de los “culos asiaticos” y a mandarme visitas para esa búsqueda. Así de simple y así de chungo.
El caso es que después de probar montones de cosas para arreglar este problema se me ocurrió validar el código de mi página y bingo!!!
El servicio de validación de la w3C me mostró que en mi “Theme” tenía caracteres propios del lenguaje español sin convertir a sus entidades en HTML.
Para que todo el mundo lo entienda, si haces un Theme en WordPress y pones como conjunto de caracteres (charset) UTF-8 entonces no puedes escribir directamente en las plantillas de tu Theme algunos caracteres sin convertir a sus entidades HTML correspondientes. Por ejemplo:
* ñ se cambia por ñ
* á se cambia á
De modo que busqué todas las vocales acentuadas en mi Theme y las sustituí por las entidades correspondientes así como otros caracteres problemáticos como la “ñ”. Después de esto la página validaba correctamente y se acabó el problema.
Mi consejo es que reviséis vuestro código de vez en cuando, sobre todo después de cada modificación de la plantilla, para evitar evitar problemas innecesarios. Por cierto, como veis en la imagen de arriba esta página es completamente valida en XHTML 1.0 Transitional, excepto cuando inserto algún vídeo de YouTube que provee un código no valido y devuelve algún error, pero eso será tema para otro día 
Saludos avinagrados.
Botones de Bitacoras.com
............................................................................................................................Comentarios (20) | Publicado el 19 - 06 - 2008
He añadido un botón del agregador de noticias de Bitacoras.com al final de cada artículo y he pensado que no estaría de más explicaros como hacerlo y para que sirve.
Lo primero es aclarar que existen dos plugins para hacer esto mismo automáticamente en Wordpress y Blogger. Solo te recomiendo que uses estos plugins si no quieres o no puedes modificar la plantilla de tu Theme, ya que insertando el código directamente conseguirás un menor consumo de recursos.
Como añadir un botón de Bitacoras a Wordpress:
Es muy sencillo, solo tienes que buscar la zona de tu plantilla donde quieras que aparezca e insertar el siguiente código pero cambiando un par de cosas (resaltadas en negritas):
Dependiendo del tamaño que quieras que tenga el botón de Bitacoras deberás sustituir en el código anterior la cadena TIPO_BOTON por una de estas palabras: big, normal, mini o mini2 (abajo puedes ver que tamaño corresponde a cada imagen).
Luego deberás sustituir URL_POST por el enlace permanente (permalink) o url de cada artículo. Para que Wordpress genere automáticamente estos enlaces solo debes sustituir URL_POST por el siguiente código:
De este modo si eliges un botón de tamaño normal (al igual que el mio) te valdrá el siguiente código:
Ahora solo tienes que añadirlo a tu plantilla en el lugar que quieres que aparezca y listo para usar.
Como añadir un botón de Bitacoras a Blogger:
Para hacer lo mismo con Blogger os recomiendo un par de artículos que me han sugerido los lectores del blog. Los artículos son:
- Agregar votaciones en Blogger (sugerido por Xombo)
- Votaciones de Bitácoras (sugerido por Kaka)
Para que sirve todo ésto:
Con los botones de Bitacoras.com permites que CUALQUIER visitante de tu blog valore los contenidos del mismo ya que no es necesario estar registrado para votar.
De esta forma puedes tener una mejor apreciación de lo que más gusta a tus visitas además de mejorar tu visibilidad en La Red, ya que las noticias más votadas llegaran a la portada de Bitacoras.com. Espero que les sea de utilidad. Saludos avinagrados.
Mi nombre es Javi, alias Vinagre Asesino, estudio Informática de Sistemas y aunque empecé a programar este blog desde cero para aprender un poco al final me pasé a WordPress. En el blog de Vinagre Asesino puedes encontrar un poco de todo y muchos manuales de informática paso a paso.
Para contactar conmigo puedes mandar un correo a:
Los 25 últimos artículos
- EBE 2.0
- Elfyourself 2008
- Nos vemos en EBE
- Backgammon gratis con DJ Backgammon
- Convertir DOCX a DOC
- Nuevo Hotmail
- 14 blogs ni uno más ni uno menos
- Editor de Imágenes
- Snow Bros. Ya lo puedes descargar!!!!
- Halloween 2008 en tu Ordenador
- Lentes para Cibervisión
- Busca 7 con Busca7
- Graffiti Creator
- Aletreando entre relatos y haikus
- Ares Tube
- Spyware Terminator
- Temas para XP
- Mi mensaje en la botella
- Convertir a MP3
- Snow Bros
- Los Juegos que tengo en mi PC
- Todos fuera de aquí!!!
- Traductor Google
- Ciberarmadura imprescindible en la Red
- Temas para Firefox
El blog mes a mes
- Noviembre 2008
- Octubre 2008
- Septiembre 2008
- Agosto 2008
- Julio 2008
- Junio 2008
- Mayo 2008
- Abril 2008
- Marzo 2008
- Febrero 2008
- Enero 2008
- Diciembre 2007
- Noviembre 2007
- Octubre 2007
- Septiembre 2007
- Agosto 2007
- Julio 2007
- Junio 2007
