» El blog de KnxDT: Blogger

Mostrando entradas con la etiqueta Blogger. Mostrar todas las entradas

martes, 5 de febrero de 2008

Como agregar buscador Google a tu blog

Hace unos días me llegaba una consulta que refería el tema de agregar un buscador Google para el blog, muy similar al de Adsense, aquí la respuesta. Para los usuarios que no usen Google Adsense y que deseen tener un buscador de Google en nuestro blog o web, solo hay que seguir unos sencillos pasos y estará listo.

Si no eres usuario Adsense y desear tener un buscador interno similar al de ellos, puedes usar el buscador por defecto que tiene Blogger con este fin (ver artículo) o hacer uso de los tres (buscadores) que Google pone a nuestra disposición. Se trata de los buscadores Google Free web Search, Google Free Safesearch y Google Free web search with site search.

El Google Free web Search es un buscador que se ubica en nuestra web y desde el cual se pueden hacer búsquedas para toda la web, el Google Free Safesearch es una especie particular del buscador anterior ya que se le califica de más seguro debido a que omite (excluye) los resultados de páginas con contenido para adultos, por último el Google Free web search with site search es un buscador que permite combinar el buscador para toda la web (Google Free web Search) y un buscador interno para nuestro website.

El Google Free web search with site search será del que hablaremos en este post y la manera de implementarlo es bastante sencilla, solo necesitas ir a tu panel de Diseño> Elementos de página> Agregar nuevo Elemento> Tipo HTML/Javascript y a continuación añadir este código:

<FORM method=GET action="http://www.google.com/search">
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif"
border="0" ALT="Google"></A>
</td>
<td>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Google Search">
<font size=-1>
<input type=hidden name=domains value="http://www.knxdt.com"><br><input type=radio name=sitesearch value=""> WWW <input type=radio name=sitesearch value="http://www.knxdt.com" checked> http://www.knxdt.com <br>
</font>
</td></tr></TABLE>
</FORM>

No olviden cambiar los campos donde dice http://www.knxdt.com por el nombre correspondiente a su dominio y no hay más nada que hacer. Guardan los cambios y listo.

Recuerden que las otras opciones como buscador son el Google Free web Search y el Google Free Safesearch, además de que si quieren hacerlo más personalizado pueden ir a este enlace y si aún asi les parece poco aquí el nivel de personalización es al grado de cuenta Google.

Enlace: Google Services

martes, 29 de enero de 2008

Enlaces de imagenes con efectos al pasar mouse

En este poste aprenderemos como agregar efectos a las imágenes para que parezcan animadas cuando el cursor del mouse se ubique sobre ellas. De esta manera espero solucionar una duda que me fue planteada hace poco y que resolveremos usando algo de Javascript, una pizca de CSS y un código modificado de HTML. Pasar el mouse sobre las imágenes siguientes.

Para lograr este efecto necesitamos dos imágenes, la que se muestra por defecto y la que se muestra cuando el cursor del mouse se posiciona sobre la imagen. El enlace de la imagen sería algo como el siguiente código:

Ese código debe ser escrito todo de corrido y en una sola línea, de lo contrario Blogger interpretará saltos de línea y generará un salto </br> que les malogrará todo el efecto. Además deben tener en cuenta que el nombreUnico es una cadena de caracteres que les recomiendo sea numérico (por ejemplo 51651165154) y único para cada par de imágenes a las que se le añada este efecto.

Citando a JMiur:

La imagen fija se mostrará como la imagen por defecto; cuando el puntero del ratón pase sobre el enlace (onmouseover), el script cambiará la dirección de esta y se mostrará la imagen animada. Cuando el puntero del ratón salga de encima del enlace (onmouseout), el script volverá a cambiar la dirección y mostrará la imagen fija.

Luego buscaremos la etiqueta </head> en nuestra plantilla (Panel> Diseño> Edición de HTML) y añadiremos justo antes de ésta el siguiente código CSS:

Este código evitará que las imágenes que pongamos usando este código adquieran a su alrededor un border azul intenso (propio de las imágenes que actúan como enlaces). Seguiremos con un código más que aunque no es obligatorio puede ayudar a que se logre un mejor efecto (yo en este post no lo he usado).

Ahora lo siguiente es implementar un código Javascript que servirá para optimizar la carga de las imágenes que se mostrarán en el evento onmouseover, de lo contrario, en el momento que se pase el mouse sobre la imagen recién se iniciará la carga de la imagen animada y se verá mal. Todas las imágenes que deseamos sean cargadas a nuestro blog serán añadidas a un arreglo en un código Javascript que se colocará antes de la pestaña </head> de su plantilla (igual que el código de CSS, el orden no es importante, pero ambos deben ir antes de la etiqueta indicada).

Donde N es la cantidad de imágenes que vayan agregando y ancho1 y alto1 son respectivamente el ancho y el alto de las imágenes que se están cargando. Con eso ya debe funcionar y quedarles como les he mostrado en las imágenes al inicio de este post. Si tienen dudas pueden consultar y juntos solucionaremos sus problemas ;).

jueves, 24 de enero de 2008

Como agregar favicon al blog de Blogger

En este post aprenderemos como agregar un favicon a nuestro blog de Blogger o página web en general, lo unico que necesitamos es una imagen que convertiremos a favicon con una herramienta online y editar unas líneas del código de la plantilla. Esta entrada ha sido actualizada de la original anteriormente posteada.

Para los que no manejen los términos, un favicon es el icono que aparece al lado de nuestro website (en Firefox siempre visible, en IE aparece cuando es añadido a Favoritos):

Aqui indico como se hace:

Lo primero que debemos elegir es una imagen cuadrada no muy grande (para evitar que se pixelee demasiado), de unos aprox 250 x250 px como máximo, luego de esto usaremos la siguiente herramienta obtenida de Dynamic Drive:

http://tools.dynamicdrive.com/favicon/

Al acceder al enlace anterior, en la parte inferior de la herramienta hacen clic en Examinar, eligen el archivo de imagen que usaran como icono y luego hacen clic en "Create ICON"

COMO CREAR UN ICONO PERSONALIZADO

Aqui les dejaré la imagen que usaremos como icono:

Seguimos los pasos (mencionados arriba), Examinar, Create icon y se nos mostrará una previsualizacion de como se verá nuestro icono. Luego click en "Download Favicon" para descargarlo, con eso lo guardan en su pc y asegúrense que quede guardado con el nombre favicon2.ico (si no pueden ver las extensiones es conveniente que lo habiliten: MI PC> Herramientas> Opcione de Carpeta> Ver> Ocultar las extensiones para tipo de archivo conocido - dejar desmarcado).

Luego que tienen el favicon en su pc lo deben subir a algun hosting que soporte este tipo de archivos, les recomiendo que se creen una cuenta en:

http://pages.google.com/

Para que puedan subir sus archivos (revisar este artículo de GooglePages como almacén gratuito de archivos), sino tambien pueden usar como tripod, 100webspace, etc. Para los que no puedan o sepan subir archivos a Google pages, envieme un mensaje para poder ayudarlos.

Con eso tendrán la url que supondremos sera:

http://www.myweb/favicon.ico

Luego que tenemos el favicon subido a internet solo resta colocar el codigo. Abrimos la Edicion de Plantilla. Luego buscan el tag </head> dentro de la plantilla y copian este codigo:

<link href='http://www.myweb/favicon.ico' rel='shortcut icon'/>

Solo recuerden reemplazar http://www.myweb/favicon.ico por la dirección donde tienen ustedes alojado su favicon (recomendable Google Pages). Y obtendran algo como esto:

Deben tener en cuenta que el nombre del favicon (si es que está subido a GooglePages) debe ser favicon2.ico, sino la imagen que mostrará sera la del favicon.ico por defecto de Google pages que es

y debería ser

. Vuelvo a recalcar, el código para agregar un favicon a su blog va antes de la etiqueta </head> y es el siguiente:

Recuerden cambiar http://www.mygooglepage.com/ por la dirección de su Google page.

Articulos relacionados:
Cómo agregar Bookmarks a tu blog (Blogger)
GooglePages como almacén de archivos

miércoles, 23 de enero de 2008

Como poner simbolos HTML en los posts de Blogger

Hace tiempo que quería explicar un post donde enseñaría como colocar simbolos HTML o de CSS en los blogs, en especial en los posts o las entradas de Blogger y hasta ahorita no me había dado un tiempo para hacerlo de la manera que quería, sin embargo hoy les enseñaré como hacerlo y espero que les sirva.

Lo primero que deben saber es que hay "símbolos" por defecto que el HTML reconoce como propios de su sintaxis. El blog se encuentra todo dentro de un conjunto de etiquetas de HTML llamados tags y que más o menos tienen la siguiente estructura:

<html>
<head><title>Título</title></head>
<body>
</body>
<html>

Lo anterior es sólo algo genérico y si no lo entendieron no importa para nada. En especial a lo que refiere a los símbolos mayor ">" y menor "<" que resultan un problema al ser escritos en las entradas. Si es que intenta escribir por ejemplo </div> dentro de un post o entrada de Blogger (u otro intérprete de HTML en general), de inmediato el sistema lo detectará como una etiqueta del HTML llamada div (propia de este lenguaje), por ende, no saldrá como queremos que se muestre. Así que sólo nos valdremos de unos códigos que tiene el propio HTML para hacer esto posible.

He visto a muchos bloggers sufriendo y que incluso en sus comentarios deben usar códigos como éstos:

[body][/body]

para denotar:

<body></body>

Hasta aquí todo ha sido puro "cuento", lamento haberlos hecho que lean ese pedazo de texto pero era ideal que tuvieran una introducción siquiera parcial de los problemas que existen al intentar mostrar códigos HTML dentro de un post.

Para mostrar etiquetas (tags) HTML dentro de un post sólo necesitamos algunos códigos. Por ejemplo:

Descripción	Notación	Código
Menor que	<	<
Mayor que	>	>
Ampersand	&	&

Si desean por ejemplo escribir el tag <head> deben poner en su entrada <head> (en la pestaña de Edición de HTML, no en el de Redactar). Con eso basta, si desean más códigos pueden visitar cualquier tabla de códigos HTML (ver enlace al final o aquí) y usar su HTML número o HTML nombre. Recuerden que esto también funciona al momento de querer escribir códigos HTML en sus comentarios. Así que basta de usar corchetes para emular los "mayor que" y "menor que" del HTML y en caso tuvieran dudas, las espero con gusto.

Observación: En la vista previa los códigos HTML escritos seguirán mostrándose tal y como se escribieron, su cambio a < y > se mostrará recién al momento de publicar el artículo. Pueden ver más muestras de cómo los he usado en estos posts:

Cómo quitar la barra de Blogger,
Cómo agregar un traductor a tu blog de Blogger,
Cómo agregar un menú superior a tu blog de Blogger, etc.

Otro ejemplo de despedida, por ejemplo para mostrar la estructura de la web puesta al inicio el código que deberían usar sería:

<html>
<head><title>Título<title></head>
<body>
</body>
<html>

Enlace: Códigos HTML

sábado, 29 de diciembre de 2007

Como eliminar la fecha en los posts de Blogger

En este post aprenderemos como eliminar o quitar la fecha de algunos posts en nuestro blog de Blogger, para esto lo que haremos será modificar nuestra plantilla de manera que diferencie a estos posts de una manera especial y luego en el artículo insertaremos un código CSS que lo haga invisible. Si no entendieron, no importa, solo sigan los pasos de JMiur.

Lo primero que deben tener es un artículo que hayan guardado o publicado, solo así éste tendrá una url asignada y podremos deducir cuál es cuando lo editamos, revisamos la url (en la barra de direcciones del navegador) y vemos algo como esto:

http://www.blogger.com/post-edit.g?blogID=XXXXXXXXX&postID=5981436675105647565

Las XXXXXXXXX nos indican el id del blog (es como un número que distingue tu blog de otro) lo cual no nos importará en este caso, en lo que nos centraremos será en el número que aparece identificando al post, es decir, el postID que en este ejemplo tiene el valor de 5981436675105647565 (en el de ustedes será otro número obviamente).

Cito:

Ese número identificatorio permanece invariable sin importa lo que hagamos, no se modifica si editamos el post, si le cambiamos el título o la fecha o si lo guardamos como borrador para publicarlo en otro momento.

En la plantilla (clic en "Expandir Plantilla de Artilugios") ese postID aparece una sola vez en una línea de código:

Lo que haremos será añadirle ese postID a la fecha de los posts para que no solo se identifiquen por ese número sino por una cadena mayor, enseguida detallaremos. La fecha de los posts por defecto se muestra gracias a esta línea de código:

Lo que haremos será añadirle ese ID a esta fecha, de modo que quede asi (descargar previamente copia de resguardo):

Tengan bastante cuidado con las comillas, las de verde a los extremos son comillas simples (') mientras que las comillas de fecha- son comillas dobles ("). Observación: Una comilla doble no es equivalente a dos comillas simples (mucho cuidado aquí).

Luego de hecho esto habremos logrado que la sección del blog donde se muestra la fecha del post tenga un ID único que será la combinación de la cadena de texto fecha- y del postID, con lo cual en el ejemplo mostrado al inicio, tendríamos: fecha-5981436675105647565

Todo esto ha sido hecho para tener un número que la fecha también sea diferenciada usando una cadena de texto como ID exclusivo, ahora debemos insertar un código de CSS que ocultará la fecha para ese post. Deben abrir de nuevo el post al cual quieren quitarle la fecha y en la pestaña de "Edición de HTML" añaden al comienzo de todo y en una sola línea el siguiente código:

Debo aclara que en este ejemplo hemos usado el número de post del ejemplo (5981436675105647565), en su caso cambian esa cifra por la del post que se ha seguido en todos los pasos. De esta manera le indicamos a la plantilla de CSS que a ese artículo o post en particular no debe mostrarle el título (de allí el display: none).

Cito:

En resumen, el primer paso es modificar la plantilla para crear eso nombres únicos. Hecho esto, de ahí en adelante, todo post tendrá una fecha que podemos manipular. Luego, creamos el post, lo publicamos o lo guardamos y luego, lo editamos para saber cuál es ese nombre exclusivo que aparecerá en la barra de direcciones del navegador. Por último, añadimos la etiqueta STYLE con el dato correspondiente y volvemos a publicar.

Un ejemplo de post sin fecha es el de mi Formulario de Contacto.

Enlace: Vagabundia

viernes, 7 de diciembre de 2007

Blogger regreso las configuraciones al español

Había mencionado en un artículo de hace unos días que Blogger había cambiado misteriosamente las configuraciones del Panel y la plantilla de los blogs en español a inglés. Al parecer se trataba de una especie de soporte al servicio de usuarios hispanohablantes, razón por la cual ya todo anda bien.

Mejoras evidentes aún no he visto y es probable que solo se haya tratado de un mantenimiento o por otro lado puede que aún no se develen las funcionalidades que Google nos tiene guardadas para un futuro (espero) no muy lejano. Por lo pronto la compañía de Sergey y Larry han modificado su buscador principal y se enfocan al uso de otras aplicaciones off-line que de desarrollan como un Google Desktop para todos los entornos. Cheers Google!

miércoles, 5 de diciembre de 2007

WTF ... ¿Que le paso a Blogger? Plantilla en ingles

Hace una hora Lokerard me comunicó por el msn que su plantilla había sido convertida al inglés al igual que el Panel de Blogger y quería que yo verificara si esto se daba en todos los blogs. En efecto, ingresé a mi blog y grande fue mi sorpresa cuando todos los textos habían sido convertidos al inglés incluyendo los menús del Panel y secciones diversas.

¿Qué le pasó a Blogger? No tengo la más mínima idea, sin embargo le ha resultado incómodo a algunos amigos usuarios que no se llevan muy bien con el inglés y otros que han visto partes de su plantilla pasarse a este idioma modificando los textos de enlaces importantes como "Entradas anteriores", "Deja un Comentario", "Suscripción por email", etc.

El problema no es solo para los bloggers que pueden dominar o no el inglés, sino también para algunos visitantes que pueden verse perdidos en un idioma americano y aunque ya está muy extendido ... el español también tiene presencia en la WEB 2.0. Solo resta esperar a ver qué sucede y si se soluciona o se queda asi.

martes, 4 de diciembre de 2007

Eliminar o quitar la barra de Blogger (navbar)

Para quitar o eliminar la barra de navegación de Blogger llamada navbar nos valdremos de un simple código en CSS. Debemos ir a nuestro Panel> Plantilla> Edición de HTML, aquí descargamos la plantilla como respaldo y buscamos la etiqueta <head>, a continuación colocamos el siguiente código.

En caso tengan problemas para quitar la barra o con el código, están en entera libertad de consultar.

miércoles, 28 de noviembre de 2007

Como agregar un menu superior en blog de Blogger

En este post enseñaré como crear un menú superior para nuestro blog de Blogger, para ello seguiremos algunos pasos y luego indicaré algunas opciones de personalización valiéndonos de conceptos básicos de HTML y CSS.

Lo primero que haremos será activar algunos elementos que Blogger tiene ocultos para su plantilla, esto ya lo he explicado con más detalle en esta entrada.

Una vez que hemos activado los nuevos elementos de Blogger procederemos a modificar nuestra plantilla de HTML. Vamos al Panel de Blogger y alli al menu Plantilla> Edición de HTML. Guardamos una copia de seguridad (Descargar Plantilla completa) y seguidamente buscamos la etiqueta </head> (conviene usar la combinación Ctrl+F para ubicarla más rapida con el navegador) y justo antes escribimos este código:

Debemos modificar los valores colorfondo1 y colorfondo2 que son los colores de fondo cuando el mouse se coloca fuera y encima del botón del menú respectivamente. También modifcaremos los valores colortexto1 y colortexto2 que son los colores del texto cuando el mouse se coloca fuera y encima del botón respectivamente.

¿De dónde sacan estos valores? Si el color definido no es muy extraño pueden optar por su palabra en inglés, ejemplo black, green, white, etc. , si por el contrario necesitan un color algo más específico pueden revisar una tabla de colores hexadecimales.

Los valores deben ser reemplazados incluyendo el # o usando la palabra en inglés (en caso se trate de algún color absoluto), aquí un ejemplo:

Si saben algo de CSS pueden intentar hacer otros cambios interesantes como por ejemplo en lugar de tener un color de fondo fijo podrían usar un degradado de fondo, por ejemplo, estas imágenes:

http://img206.imageshack.us/img206/4038/menuactiveuv8.png

http://img132.imageshack.us/img132/8325/menuhoveroa9.png

Como se puede observar se trata de dos imágenes muy delgadas (no más de 3 px cada una) pero que se pueden repetir en todo el eje X (ancho) de la barra de menúes y que nos darían un resultado como el mostrado en mi blog. ¿Desean algo así? Es sencillo, solo necesitan editar el código ligeramente y obtendrían algo como esto:

Se han añadido los enlaces de cada imagen se han añadido en el parámetro background del estilo CSS y se le ha añadido repeat-x para que se repita varias veces horizontalmente, no explicaré los demás códigos para no confundirlos demás pero pueden postear sus comentarios y en lo posible los ayudaré.

Luego que ya tienen el código que deseean (usen el último que les di si les conviene, aunque recomiendo que las imágenes de fondo las suban a su propia cuenta de Photobucket o algun otro Hosting de imágenes) solo basta añadir el menú, es decir, ya hemos dicho cómo va a ser pero ahora diremos cuáles serán las secciones del menú y algunas cositas más, para esto guardamos los cambios hechos en nuestra plantilla y vamos al Panel del menú Plantilla> Elementos de Página y creamos un nuevo elemento con el campo que se encuentra justo debajo del elemento Título del cuerpo de nuestro blog:

Y seleccionamos un elemento del tipo HTML/Javascript, nos aparecerán dos campos "Título" y "Contenido". El campo de título lo dejaremos vacío y en el campo de Contenido añadiremos el siguiente código:

  <ul class="barrademenu">
    <li><a href="enlace" title="El Blog de KnxDT">Inicio</a></li>
    <li><a href="enlace" title="">Quienes Somos</a></li>
    <li><a href="enlace" title="Ofertas para ti">Publicidad</a></li>
    <li><a href="enlace" title="Enterate">Novedades;/a></li>
    <li><a href="enlace" title="Contactame">Contacto;/a></li>
    </ul>
  <br style="clear: left"/>

Aqui pueden personalizar la lista añadiendo (o quitando) elementos de este tipo:

<li><a href="enlace" title="El Blog de KnxDT">Inicio</a></li>

Donde enlace es el enlace de destino de ese elemento del menú, Inicio es el texto visible en ese botón del menú y el campo entre comillas del title (en el ejemplo: El Blog de KnxDT) es un texto opcional que se muestra al poner el cursor el mouse sobre el botón, así:

Si no se deseara ningún texto se deja title="" como se ha hecho en algunos casos del código posteado como referencia. Cualquier duda postean.

domingo, 25 de noviembre de 2007

Logos para las victimas del PageRank

¿Sientes que el Pagerank de Google ha sido injusto contigo? ¿Te sientes víctima del Pagerank? ¿Aún sigues en cero y eso que tu blog ya lleva mas de 1 Google dance? Entonces es momento de alzar tu voz de protesta y cansarte de esos logos de Pagerank comunes. Ahora los logos para las victimas han llegado para quedarse.

Si te has sentido vulnerado luego de la última actualización del Pagerank de Google, más aún despues de las declaraciones de éste ultimo sobre las penalizaciones a los blogs por los intercambios y venta de enlaces o más, entonces estos logos son para ti. A continuación, los tan deseados logos victimarios de Pagerank.

Victim:

R.I.P.:

WTF ?:

ʞuɐɹǝƃɐd::

Has Been:

G P R V A (Google PageRank Victims Anonymous):

????????:

Half Full:

Half Empty:

Black Hat:

White Hat:

Buy This Link:

No Game:

PageRank:

EgoStroker:

No Crying:

Vía: Vagabundia, SporSayer, Leegar, Google Blogoscoped

Como agregar un buscador a tu blog de Blogger

En este post aprenderemos a como agregar o añadir un buscador a nuestro blog de Blogger, para esto solo hay que seguir 3 simples pasos. Recordemos que el buscador siempre debe ir en una zona visible (principalmente al inicio). Otro punto es que este buscador de Blogger es más conveniente añadirlo si es que no se cuenta con Adsense de Google o sólo para complementarlo.

Para añadir el código debemos:

1.- Acceder al menú Plantilla >Elementos de página

2.- Aquí, agregaremos un elemento del sidebar de tipo HTML/Javascript

3.- Al campo de título podemos ponerle "Buscador" o dejarlo vacío, el campo de contenido sí debe tener el siguiente código:

Resultado:

Pueden personalizar el texto Buscar por otro que ustedes deseen e incluso pueden añadirle estilos al botón, por ejemplo podrían añadirle códigos de CSS así:

Resultado:

Asi podrían ir jugando con otros diseños y parámetros de CSS. Cualquier duda postean.

lunes, 5 de noviembre de 2007

Organizacion de etiquetas en blog de Blogger

Esta sencilla entrada esta hecha con la finalidad de explicar con un poco mas de detalle (aún asi simple) lo que al manejo de etiquetas (también llamados tags) en Blogger se refiere.

Para comenzar diré que una etiqueta en Blogger es una especie de sello que se le da a cierto tema. Imaginemos que creamos una entrada que hable por ejemplo del nuevo juego que acaba de salir, entonces es conveniente agrupar a todas las entradas que tienen una temática similar para luego poder acceder a ellas de una manera más rapida ... en el ejemplo la etiqueta que se le podría asignar a esta entrada podría ser Juegos.

La manera como se asignan etiquetas en Blogger es una manera muy sencilla, solo deben escribir la(s) etiqueta(s) en el campo Etiquetas de entrada que Blogger muestra cuando se crea una entrada (esté en Edición de HTML o en Vista previa), las cuales deben estar separadas por comas (un espacio después de cada coma), asi:

Blogger, Trucos, Articulos

Veremos que una etiqueta de nombre Etiqueta tiene una url como a esta:

http://nombredetublog.blogspot.com/search/label/Etiqueta

Aquellas que tengan nombre separados usarán el caracter ASCII correspondiente, por ejemplo si usaramos una etiqueta Seguridad e Informatica, la url seria como esta:

http://nombredetublog.blogspot.com/search/label/Seguridad%20e%20Informatica

Como pueden ver los espacios en blanco han sido reemplazados por un codigo %20, esto debido a que estos se representan por el numero 20 en base hexadecimal. Si no lo entienden no importa, basta con que sepan que un espacio es representado por un %20 en una url, y esto no pasa solo en el caso de Blogger, sino en general.

En proximas ayudas se usará este articulo como una base simple para entender la organización de etiquetas y asi poder crear menús etiquetados.

domingo, 28 de octubre de 2007

Activar mas elementos bloqueados por Blogger

Blogger por defecto solo permite añadir algunos elementos de página que aparecen en ciertas secciones de la estructura principal del Blog, es decir, cuando accedemos a la sección de Plantilla> Elementos de Página nos encontramos con algo como ésto:

Lo que haremos será desbloquear algunas opciones ocultas que nos permitirán añadir más elementos en distintas nuevas zonas de la estructura, para ello iremos a Plantilla> Edición de HTML (antes que nada, descargémonos la plantilla original como copia de seguridad), alli clic en la opción "Expandir plantillas de artilugios" y luego (usando CTRL+F) buscaremos todos los textos donde haya esto:

showaddelement='no'

Y los reemplazaremos por:

showaddelement='yes'

Luego de eso, guardamos los cambios (Guarda Plantilla) y vamos a la sección Plantilla> Elementos de Página y veremos que ahora hay nuevas opciones de adición de elementos quedando algo así:

Con eso el desbloqueo está hecho y podremos añadir nuevos elementos que antes no podíamos y que nos facilitará el realizar varias tareas más adelante.

viernes, 26 de octubre de 2007

Crear una página inicial (fija) para blog de Blogger

Hoy día se me planteó una pregunta sobre cómo puede darse a un blog un esquema similar al de una página web, donde sólo se muestre una portada y por más que se escriban nuevos artículos, éstos no desplacen al texto que hacía de portada principal. La solución se me ocurrió después de unos minutos y expongo aquí.

Lo que se desea es dejar un texto como si fuera una entrada fija de manera que simule ser una página web estática fija, para ésto no se deben mostrar los artículos recientes sino hasta que se acceda a Vinculos en un menú o en alguna sección del texto de bienvenida, todo esto para los blogs de Blogger.

DESBLOQUEANDO RESTRICCIONES DE BLOGGER

Blogger por defecto solo permite añadir algunos elementos de página que aparecen en ciertas secciones de la estructura principal del Blog, es decir, cuando accedemos a la sección de Plantilla> Elemtentos de Página nos encontramos con algo como ésto:

Con eso el desbloqueo está hecho y podremos añadir nuevos elementos que podremos usar para personalizar nuestra página de inicio (fija) en nuestro blog de Blogger.

OCULTANDO LAS ENTRADAS DEL BLOG

Para que solo se muestre el texto de inicio ve al panel de Blogger donde dice Configuración> Formato y lo dejamos como se muestra:

Mostrar
Da clic donde sobre "Añadir nuevo elemento de página" al cuadro que se muestra en la imagen.

Luego seleccionamos el nuevo elemento, elige la opción "HTML/Javascript".

Alli tenemos dos campos: Título y Contenido. En título podemos poner algo representativo como Bienvenidos, Editorial, Inicio, etc. En contenido deben usar un texto de inicio (será lo que se mostrará como página de inicio), pueden usar todos los códigos HTML que deseen, pronto estaré posteando una referencia simple de HTML. Guardan los cambios y listo.

Debemos recordar que la página fija se mantendrá siempre por encima de todos los posts por lo que lo ideal sería crear una entra fija no muy grande, de manera tal que siempre aparezca en la parte superior pero no desvíe la atención de las entradas inferiores.

Saludos.

domingo, 21 de octubre de 2007

¿Cómo agregar un traductor a tu blog (Blogger)?

Este post lo creé con la intención de responder a muchas preguntas que me llegan sobre un traductor para el blog (en este caso de Blogger), no estoy seguro si el codigo se pueda insertar o no en Wordpress (al menos no con seguridad) ya que no uso Wordpress, pero allí se los dejo. En este enlace tienen como agregar un menú superior a su blog de blogger.

Lo primero que debemos hacer para añadir un traductor a tu blog (Blogger) es ir a la sección de Diseño> Plantilla> Elementos de Página. Luego en el sidebar (o donde deseen) dan clic en la opción "Añadir un elemento de página", a continuación se les mostrará un menú con estas opciones:

Como en la imagen lo que debemos hacer es seleccionar la opción que dice "HTML/Javascript", luego aparecerán dos campos: Título y Contenido. En cualquier caso los campos son:

Título:

Translate to your language

Contenido:

<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 100%; width: 160px;" name="wl_trglang">
<option value="EN"/>Spanish to English
<option value="FR"/>Spanish to French
<option value="ZH_CN"/>Spanish to Chinese (Simplified)
<option value="ZH_TW"/>Spanish to Chinese (Traditional)
<option value="NL"/>Spanish to Dutch
<option value="DE"/>Spanish to German
<option value="EL"/>Spanish to Greek
<option value="IT"/>Spanish to Italian
<option value="JA"/>Spanish to Japanese
<option value="KO"/>Spanish to Korean
<option value="PT"/>Spanish to Portuguese
<option value="RU"/>Spanish to Russian
<option value="AR"/>Spanish to Arabic
<option value="SV"/>Spanish to Swedish
</select>
<input value="http://www.aquivatublog.com" name="wl_url" type="hidden"/>
<input value="Go !" type="submit"/>

No olviden cambiar en ese código el texto que dice http://www.aquivatublog.com y reemplazarlo por la dirección de su blog. El campo de título ustedes pueden cambiarlo por el que deseen. Incluso el texto que dice "Go !" que es el que será mostrado en el botón. Pueden ponerle "Translate", "Traducir", etc. Una vez que copian esos dos códigos, guardan los cambios y listo.

Enlace: World Lingo

viernes, 28 de septiembre de 2007

Añadir web a buscador de Microsoft Live Search

Live Search es el buscador de Microsoft (si, tenia buscador), que fue relegado largamente por Yahoo en inicio, y ahora por Google, sin embargo les dejare aqui los pasos a seguir si quieren universalizar su blog y hacerlo accesible desde cualquier buscador como este.

Indexar un blog al Live Search de Microsoft no es nada complicado, lo primero que deben hacer es entrar a esta web: http://search.msn.com/docs/submit.aspx?lang=es-US

Luego te aparecera una pagina como esta:

Aqui llenas el campo del codigo de verficiacion (paso 1), tipeas la url de la direccion web que deseas agregar (paso 2) y lo envias (paso 3).

Actualizar imagen (thumbnail) en Ranking de Alexa

Alexa es un ranking que se construye a partir de la cantidad de visitantes que tienen una barra de seguimiento que se incluye con otros servicios web (como el de Megaupload) y que rastrea las paginas visitadas. Muy pocos (yo hasta hace poco) no saben como actualizar la imagen de su blog, aqui explico como.

Es muy simple. Si quieres ver tu Rank de Alexa debes entrar a:

http://mialexa.com/index.htm

Luego escribes la direccion de tu web (sin el http://) y le das clic donde dice "Calcular". Para actualizar el thumbnail de tu blog debes ir a la siguiente direccion:

http://thumbnails.alexa.com/update_thumbnail?url=url_de_tu_blog

Donde debes reemplazar url_de_tu_blog (sin el http://) por la direccion de tu blog. Por ejemplo, para mi caso seria:

http://thumbnails.alexa.com/update_thumbnail?url=knxdt.blogspot.com/

Articulos relacionados:

Como agregar Bookmarks a tu blog (Blogger)

jueves, 27 de septiembre de 2007

Como agregar Bookmarks a tu blog (Blogger)

He creado este articulo porque he visto que muchos bloggers tienen la duda (como hace algunas semanas yo) de como insertar o agregar bookmarks a su blog, en este caso de Blogger (no lo he probado en Wordpress).

Un bookmark es un marcador que permite enviar una noticia y compartirla valiendonos de distintos servicios web, graficamente se ve algo como:

Lo que deben hacer es ir a Plantilla> Edicion de HTML. Alli antes que nada hagan click en "Descargar plantilla completa" para crear una copia de seguridad por si hacen mal los cambios, luego clic en "Expandir plantillas de artilugios", dejenla marcado con el check.

Luego en la plantilla buscan el tag </head> y antes de eso pegan este codigo:

<style type='text/css'>
.pushbutton a:hover{
 position: relative; 
 top: 1px; 
 left: 1px;
 outline:none;
 }
.bookmark table{
 background-color:#000911; 
 border:1px hidden gray; 
 padding:2px;
 }
.bookmark td{
 font-size: 1em; 
 text-align: center; 
 vertical-align: middle; 
 color: #CCCCCC
 }
.bookmark img{
 vertical-align: middle;
 }
</style>

Eso para dar el efecto de boton a la imagen.

Luego despues de <p class='post-footer-line post-footer-line-3'/> pegan este codigo:

http://knxdtblog.googlepages.com/bookmarks.txt

Guardan la plantilla y listo.

PD: Editar el codigo puede conllevar a errores en la validacion de la plantilla.

jueves, 20 de septiembre de 2007

Modificar el tamaño de videos de Youtube

De seguro muy pocos saben de esta utilidad que se puede aprovechar cuando se ven videos desde el portal de videos Youtube, la cual hace posible que el video modifique su tamaño dependiendo del tamaño de la ventana que tu definas.

Se acabo el tamaño por defecto y el tamaño demasiado grande que eran las dos opciones que nos daba Youtube para ver videos desde su web. En el mejor de los casos lo que podías hacer era crear un documento html donde pegaras el codigo y modificaras los parametros de ancho y largo.

En realidad esto de logra de una manera muy simple, por ejemplo este video:

http://www.youtube.com/watch?v=dI6TZPRz0pk

Para ser visualizado redimensionando su tamaño solo suprimimos el watch? y cambiamos el = por un /, es decir:

http://www.youtube.com/v/dI6TZPRz0pk

Actualización:

Debido a que al parecer la ayuda que necesitan es de cómo modificar los parámetros del código de videos de Youtube para insertarlo en su blog o página web incluyo la explicación aquí:

Si lo que quieres es modificar el tamaño del video visto en tu blog solo debes editar el codigo y alterar los parametros width (ancho) y height (alto).

Por ejemplo si el codigo del video es:

El ancho es de 425 y el alto es de 350. Lo que debes hacer es cambiar el 425 por el ancho que desees y el 350 por el alto que desees (en ambos campos del código donde se repite), es decir, quedaria alto asi:

Donde XXX es el ancho y YYY el alto que has definido para ese video.