Archive for the ‘Blogger’ Categorias
Jueves, Febrero 5th, 2009 |
Los blogs en Blogger cuentan por defecto con un buscador interno ubicado en navbar o barra de navegación, sin embargo, no es posible personalizarlo y adaptarlo a las necesidades de nuestro diseño. Por otro lado, con html y xml es posible replicar este buscador interno y adaptarlo completamente a nuestro gusto con estilos CSS.
Estructura HTML/XML
Como todo buscador, es necesario trabajarlo como un formulario con dos entradas en él, en otras palabras, una etiqueta form y dos input con lo valores de blog para procesar la búsqueda. El código es como el siguiente:
<div id='buscador'>
<form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'>
<div>
<input class='searchtext' id='q' name='q' type='text'/>
<input class='searchsubmit' type='image' name='submit' src='http://sitio-de-hosting.com/search.gif'/>
</div>
</form>
</div>
El primer input es el campo de texto donde el usuario escribirá su consulta, el segundo input es el botón para enviar la consulta escrita en el primero. Este segundo input además viene definido como tipo imagen (que bien puede ser un icono), por lo que solo hay que poner la ruta a nuestra imagen en el atributo src (src=”ruta”), dicha ruta puede obtenerse subiendo la imagen a un hosting gratuito como Imageshack o Photobucket. Es lo único que necesita modificarse en el código anterior.
Este código se puede agregar justo después del código (En Diseño/Edición de HTML):
<div id='sidebar-wrapper'>
para que aparezca en la parte alta de la barra lateral, aunque igual funciona en cualquier otra ubicación.
Estilos CSS
A partir de las clases e identificadores se puede dar estilo al formulario: aplicarle un fondo, bordes, formato al texto, espaciamiento, etc. con CSS. Creando un ejemplo sencillo:
/* Buscador.
Contenedor principal: form */#buscador form {
border:1px solid #999999;
background:#E5E5E5;
padding:10px;
margin:0 10px 15px;
position:relative;
}
/* Canpo de texto */
.searchtext {
padding:2px 5px;
color:#999;
font-size:11px;
line-height:15px;
height:15px;
width:87%;
border:2px solid #BBDAFD;
}
/* Botón de submit */
.searchsubmit {
position:absolute;
right:10px;
top:10px;
}
Y el resultado de estos estilos es algo como lo siguiente:
Buscador después de aplicarle estilos
Este es solo un ejemplo, pero puede usarse modificando la ruta de la imagen en el input, colores de fondo y bordes, el ancho y los margenes, etc. El código CSS siempre se coloca antes de:
]]></b:skin>
Resulta sencillo y vistoso arreglar este importante elemento de nuestro blog.
Posted in Blogger | 6 Comments »
Martes, Enero 20th, 2009 |
CSS Menú builder (constructor de menús CSS) es una excelente herramienta para crear menús css de forma vertical y horizontal, así como barras de referencia (breadcrumb). La forma de uno de esta herramienta es realmente sencillo, de forma general es la siguiente:
- Seleccionar el tipo de menú. Vertical, horizontal o barra de referencia.
- Elegir el color de fondo.
- Escoger el estilo del menú a partir de las imágenes que usara.
- Seleccionar los colores de cada elemento. Exportar el menú. El código html, css y las imágenes o un zip con todo lo necesario.
Algo que ayuda bastante es lo bien indicadas que están las opciones y la vista previa que se tiene del menú en todo momento. Tal vez lo más complejo será adaptar este menú a nuestro sitio web, pero nada que un básico de html y css no resuelva.
Sitio: CssMenuBuilder.com
Posted in Blogger, Diseño | 1 Comment »
Miércoles, Enero 14th, 2009 |
A pesar de que Blogger es una de las plataformas más extendidas para bloguear, de todos es conocida la limitación que tiene en lo que se refiere a widgets. Aunque Blogger in draft siempre permite algunas opciones más que las del Blogger normal, el servicio aún tiene carencias en este sentido. Bueno, le han añadido los gadgets de Google a las posibilidades de widgets pero…
Sin embargo, si estamos necesitados de algún widget que nos ofrezca una función en especial que no encontremos en Blogger, podemos recurrir a terceros. Por medio de alguno de los servicios que vamos a ver a continuación, es posible que encuentres lo que necesitas:
Widgetbox: quizá uno de los servicios más populares. Tiene una amplísima variedad de widgets clasificados por etiquetas y cuenta con un buscador interno. No es necesario registro, aunque éste es gratuito. Sin duda, el primer lugar donde buscar.
SpringWidgets: ofrece más de 40.000 widgets catalogados por categorías y etiquetas, además de disponer de buscador. Tampoco necesita de registro.
yourminis: tiene disponibles muchos menos widgets que los servicios anteriores, pero es rápido y fluído. No está clasificado ni por categorías ni por etiquetas, pero cuenta con un buscador interno.
Widgiland: widgets de todos los colores y plataformas, ya sea una red social, tu escritorio, un iPhone, Andriod… y blogs, claro. Aunque en este último aspecto, el número de widgets es bastante corto en relación con los dos primeros. No es necesario registro.
Vía | Blog And Web
Posted in Blogger, Recursos Web | No Comments »
Miércoles, Enero 14th, 2009 |
Hola amigos, debido a que sabemos que unas de las mejores opciones que tiene un blogger luego de probar el CMS Blogger, es mudarse a Wordpress para crecer, para dar un paso mas, para sentirse mas profesional (no digo que los que están en Blogger sean novatos); Pero es un paso importante, ya que mejoran muchas cosas de tu blog, como el diseño, SEO, en general todo.
Muchas veces lamentablemente queremos dar este bello y esperado paso, pero no tenemos dinero para comprar un hosting de pago, que la mayoria cobran de 3 a 10 dolares en adelante (mensuales), y muchos blogs ya sean personales, comerciales, ect… No tienen este presupuesto, por ese motivo aqui las traigo un listado de los mejores hostings gratuitos:
(más…)
Posted in Blogger, Recursos Web, Wordpress | 1 Comment »
Lunes, Enero 12th, 2009 |
Tener un dominio propio es como tener una marca y una identidad mejor definida y desde hace un tiempo Blogger te da la posibilidad de usar el tuyo en tu blog. A continuación te mostramos como hacerlo:
- Tu dominio
Lo primero es disponer de un dominio propio (ej tublog.com), si no cuentas con uno, existen muchos sitios para comprarlos, como mydomain o godaddy, este último es el más popular y económico en particular, lo recomiendo. En estos momentos los precios no rebasan los 9 dolares y todos te proveen de un panel para manejarlo. Sí quieres ahorrarte algunos pasos, puedes comprarlo en Blogger por un precio un poco mayor (10 dolares) y pasar al paso 3.
- Configuración en tu dominio.
- Entra al panel de tu dominio y busca la administración de DNS.
- Si existen registros CNAME, elimínalos. Después de eliminarlo o si no existe ninguno, crea uno nuevo, en el campo de nombre (name) coloca sin comillas “www” y en el nombre del hospedaje (host name) coloca sin comillas: “ghs.google.com” y guarda el registro.
Lo siguiente es direccionar los DNS (Domain Name System) de tu dominio con un registro CNAME, esto varia de acuerdo a la entidad registrante pero afortunadamente Google provee una guía en español para los servicios más comunes. De forma general el proceso es el siguiente:
Sí tienes problema con esto tienes todo el derecho a pedir que te auxilie tu empresa registradora.
- Configuración en Blogger.
- Entra Blogger y dirígete a la pestaña “Configuración” y ahí a la opción “Publicación”.
- Entra en el enlace de “Dominio personalizado”
- Sí no has comprado aun tu dominio, aquí lo puedes hacer pero a un precio un poco más alto, si ya dispones de él da clic en “Cambiar a opciones avanzadas”
- Introduce el nombre de tu dominio, por ej. www.tublog.com y guarda
- Ahora solo resta esperar para que el registrante actualice sus registros y la redirección se complete
Hay que ser pacientes en la actualización de los registros, algunos servicios pueden durar unos minutos y otros un par de días. Algo muy bueno es que Blogger se encarga de redireccionar tu dominio genérico (tublog.blogspot.com) al nuevo.
Dentro de un rato pondremos como hacerlo con el servicio de Name.com, esperenlo.
Posted in Blogger | 1 Comment »
