- ▲▼ Configura tu propio dominio en Blogger.com (blogspot)
1. En Configuración/Dirección del blog hacemos click en “Añadir un dominio personalizado“. Veremos que tenemos la opción de registrar el dominio a través de un partner de Google a un costo de US$10 al año, pero en este caso ya tenemos nuestro dominio en GoDaddy, por lo cual haremos click en “Configuración Avanzada“.
Configurar dominio en Blogger
2. A continuación veremos que “primero debe registrarse correctamente el dominio”. Por ello, introducimos el dominio que tenemos comprado, con www. (en este caso, www.trucoscandycrush.com) y hacemos click en “instrucciones de configuración“. Se abrirá una nueva ventana en inglés.
Configuración dominio Blogger
3. Seleccionamos la primera opción para la pregunta “Where would you like to host your blog?“: On a top-level domain (www.example.com). A continuación se desplegarán las inscrucciones, que indican que debemos entrar al panel de control del registrante (GoDaddy, en este caso) y añadir dos registros CNAME tal y como ahí se indica. Deja esa ventana abierta, porque las instrucciones son específicas para tu dominio.
4. En GoDaddy vamos a MyAccount/Products/Domains. Hacemos click en el botón “Launch” que está justo al dominio. Vamos a DNS Manager/Launch.
5. Ahora, el el panel de control de GoDaddy, debemos ir a “Add Record“, seleccionar el tipo de registro “CNAME (Alias)” y añadir los dos registros que se nos solicitan:
CNAME GoDaddy
En el primer registro, el nombre o alias debe ser www, y debe apuntar a ghs.google.com
El segundo registro a añadir es específico para cada blog (verifícalo en las instrucciones, como se indica en el paso 3). Un ejemplo denombre o alias es X6ZWHRKZH3IB, apuntando a gv-WPTBWFRADNYBWZ.dv.googlehosted.com.
Si previamente ya existe un registro CNAME de nombre www, lo modificamos y hacemos que apunte ghs.google.com. Una vez añadidos correctamente los dos registros CNAME, guardamos los cambios haciendo click en el botón “Save Zone File” (parte superior de la pantalla.
6. A continuación, de la misma manera que agregamos los registros CNAME, creamos 4 registros A (Host) para que nuestro dominio pueda usarse con y sin www. Es importante que hagamos este paso para que nuestros visitantes no se encuentren con una página de error al ingresar el nombre del dominio sin www.
Para cada registro A, ingresaremos como nombre nuestro dominio sin www “trucoscandycrush.com“, apuntando cada uno a las diferentes direcciones IP dadas por Google en las instrucciones del paso 3. Los cambios pueden demorar 1 hora en reflejarse.
7. Volvemos al paso 1 en nuestro panel de control de Blogger. Allí, de nuevo ingresamos nuestro dominio www.trucoscandycrush.com, y seleccionamos “Redireccionar trucoscandycrush.com a www.trucoscandycrush.com“. Guardamos los cambios.
¡Listo! Ahora ya tenemos nuestro propio dominio en Blogger.
- ▲▼ Añadir un logo correctamente en Blogger
A la hora de añadir un logo en Blogger lo más recomendable es hacerlo desde la opción “Diseño” del panel de de opciones, porque podemos reemplazarlo o borrarlo las veces que queramos sin necesidad de tocar el código de la plantilla. Una vez allí, seleccionamos “Editar” en el gadget de cabecera, justo donde aparece el título de nuestro blog. Veremos las siguientes opciones:
Logo en Blogger
Podemos subir el logo directamente desde nuestro escritorio, sin necesidad de hospedarlo previamente en algún hosting, pudiendo además escoger además dónde queremos que se ubique nuestro logo:
Detrás del título y la descripción: sitúa el logo como fondo (no borra el título ni la descripción).
En lugar del título y la descripción: el logo reemplazará al título y la descripción (éstos quedarán ocultos).
Colocar la descripción después de la imagen: Incluye el logo, pero oculta el título (no así la descripción del blog).
Reducir hasta ajustar: Ajusta el tamaño del logo al ancho de la cabecera. No recomiendo esta opción, porque puede hacer que el logo se vea “estirado”. Lo mejor es cambiar manualmente el tamaño de la imagen en nuestro editor de fotos para que se ajuste al ancho de la cabecera.
Por defecto, en las plantillas nuevas de Blogger, el logo aparece alineado a la izquierda. En las plantillas antiguas, el logo por defecto aparece centrado. Si quieres corregir la alineación del logo, busca el siguiente código CSS en Plantilla/Edición de HTML:
1 2 3 4 5#header-inner { background-position: center; margin-left: auto; margin-right: auto; }
Para cambiar el centrado del logo, debemos cambiar el “center” por “left” (izquierda) o “right” (derecha), sin las comillas, y cambiar los valores de márgenes (en vez de “auto”, poner “0″, si no queremos margen a la izquierda o a la derecha.
Calidad del logo
Como recomendación práctica, guarda tu logo siempre en formato PNG-24, desde Photoshop, Gimp o el editor de imagen y fotografía que prefieras, con transparencia si es posible. Esto, porque Blogger cambia automáticamente el peso de las imágenes JPG que subas, con la consecuente pérdida de calidad, cosa que no ocurre con el formato PNG.
- ▲▼ Widget de comentarios recientes con avatar para Blogger
agregar un gadget con los últimos comentarios pero mostrando avatar de los autores. Hay varios tutoriales al respecto, pero a veces es tedioso e innecesario seguirlos cuando tienes un generador que en menos de treinta segundos añadirá el gadget que necesitas. En Way2Blogging encontré un genial generador para añadir un widget de comentarios recientes a tu blog de Blogger. Aunque está en inglés, es realmente simple de usar, y no necesitarás tocar el código de tu plantilla en absoluto.
Comentarios recientes con avatar para Blogger
Sólo hay dos campos que necesitamos cambiar: Widget title (el título que queramos que lleve nuestro widget) y Blog URL (el enlace a nuestro blog, no el del feed). Los demás pueden quedar tal cual. Por defecto, el wiget mostrará 5 comentarios, con avatares de 60 píxeles de diámetro y con bordes redondeados. Aquellos comentarios de usuarios sin avatar mostrarán la imagen de incógnito de Gravatar, la cual podemos cambiar simplemente modificando el enlace que allí aparece (necesitamos alojarla previamente).
Una vez que hayamos hecho los cambios correspondientes, presionamos el botón “Generate“. A continuación, veremos un botón azul que dice “Add to Blogger“. Hacemos click sobre él, luego en “Añadir artilugio” en la nueva pestaña que se abrirá, y veremos que el widget se ha agregado a la barra lateral de nuestro blog.
- ▲▼ Usar un subdominio en tu Blog de Blogger (blogspot)
A veces tenemos un dominio comprado, y por alguna razón queremos crear un subdominio para usar en Blogger. Yo por ejemplo, hace años compré un dominio con mi nombre: claudiacontreras.com, y ahora quise usar Blogger para un blog personal bajo el subdominio blog.claudiacontreras.com.
1. Registro CNAME apuntando a ghs.google.com
Para utilizar un subdominio en Blogger, lo primero que tenemos que hacer es crear un registro CNAME apuntando a ghs.google.com. Ello podemos hacerlo:
1. Desde el panel de control de nuestro registrante de Dominio. Por ejemplo, en NAME.com, pinchando en nuestro dominio y accediendo a DNS Record Management debemos añadir “blog” en el primer campo (o nuestro subdominio) y “ghs.google.com” en el segundo:
Registro CNAME
2. Desde nuestro Cpanel: Dominios » Editor de Zona DNS Simple, seleccionamos nuestro dominio y añadimos:
Registro CNAME Cpanel
Siempre nuestro subdominio va en el primer campo, y ghs.google.com en el segundo.
2. Configuración del subdominio en Blogger
Ahora, debemos ir a Blogger, y acceder a Configuración » Publicación » Dirección del Blog » Añadir un dominio personalizado » Cambiar a la configuración avanzada.
Usar subdominio en Blogger
En el campo en blanco debemos introducir nuestro subdominio tal cual: blog.claudiacontreras.com, en este caso. Guardamos los cambios y esperamos. La redirección puede tomar desde algunos minutos hasta 24 horas (yo esperé 5 minutos).
Ahora podemos usar nuestro blogspot normalmente, con las ventajas de tener un subdominio (sobre todo si piensas en el SEO) y de usar Blogger (con toda la tecnología de Google).
- ▲▼ Cómo poner un reproductor de música en tu blog de Blogger
- Incluir un reproductor de audio en un blog hoy en día es realmente sencillo gracias a la etiqueta HTML5 <audio>, tal y como explica Amanda en BloggerBuster.
La etiqueta <audio>, que define el sonido (música o streams de audio) es nueva en HTML5 y es soportada por los siguientes navegadores: Internet Explorer 9, Firefox, Opera, Chrome, y Safari. El reproductor de música que permite incluir se verá así:
¿Quieres un reproductor de música en tu blog de Blogger?
El uso básico de dicha etiqueta audio es el siguiente:
1<audio controls controls>
2<source src="http://dl.dropbox.com/u/3549515/10%20-%20Unicornio.mp3" />
3Tu navegador no soporta la etiqueta audio.
4</audio>
Por lo tanto, deberás copiar ese código en la edición de HTML de la entrada donde quieras reproducir música o audio. Lo único que tienes que hacer es reemplazar en el código es cancion.mp3, que corresponde al enlace directo de tu archivo de audio.
Evidentemente, también necesitarás un hosting para almacenar tus archivos de audio.
Usando Dropbox para almacenar tu música
Dropbox es uno de los servicios de alojamiento más populares que te permite guardar todo tipo de archivos en la nube para acceder a ellos desde cualquier lugar. Puedes crear una cuenta gratuita con 2GB de almacenamiento, pudiendo enlazar directamente tus archivos almacenados ahí.
Una vez que has creado una cuenta en Dropbox y has ingresado a ella, deberás subir el archivo de audio que quieras poner en tu blog (mp3) en la carpeta “Public“. Cuando se haya cargado, tienes que hacer click sobre él con el botón derecho del mouse, seleccionando la opción “Copiar enlace público“.
Dropbox
Así obtendremos el enlace directo que necesitamos reemplazar en el código de más arriba.
Atributos de la etiqueta audio
El control “controls” hará que el audio se reproduzca sólo cuando el usuario haga click en el botón “play” del reproductor. Sin embargo, en W3SChools podemos ver otras opciones:
Autoplay: Reproduce automáticamente el audio una vez que está listo.
1<audio controls autoplay>
2<source src="cancion.mp3" />
3Tu navegador no soporta la etiqueta audio.
4</audio>
Loop: Reproduce el audio continuamente.
1<audio controls loop>
2<source src="cancion.mp3" />
3Tu navegador no soporta la etiqueta audio.
4</audio>
- ▲▼ Instalar una plantilla Blogger en la nueva interfaz
Saber instalar una plantilla Blogger es una de las primeras cosas que debemos hacer si comenzamos a usar dicha plataforma.
Si bien Blogger ha hecho grandes cambios a su interfaz durante el último año, el procedimiento sigue siendo básicamente el mismo:
Vamos a nuestro Panel de Control/Plantilla.
Hacemos click en Crear copia de seguridad/restablecer.
Veremos un cuadro de diálogo con dos opciones: la primera de ella es “Descargar plantilla completa“, la que debemos utilizar para hacer una copia completa de nuestra plantilla en caso de que queramos volver a ella. Una vez hecho esto (no es obligatorio, pero recomendado), pasaremos al siguiente paso.
Con el botón “Seleccionar archivo” que aparece en el mismo cuadro, seleccionaremos la plantilla que queremos subir, en formato XML. Por ejemplo: NuevaPlantilla.XML.
Hacemos click en “Subir” y esperamos que la plantilla cargue. En unos segundos la veremos instalada en nuestro blog.
Instalar Plantilla Blogger
Método alternativo:
Otra forma de subir una plantilla Blogger es desde Plantilla/Edición de HTML. Podemos seleccionar todo el contenido, suprimirlo y luego reemplazarlo por el contenido de nuestra plantilla NuevaPlantilla.XML. Eso sí, debemos ser muy cuidadosos en copiar todo el contenido.
Errores a la hora de subir plantillas:
A veces, al intentar subir plantillas, podemos recibir un mensaje de error como este:
“No hemos podido guardar la plantilla. Tu plantilla no se ha podido analizar debido a que su formato no es correcto. Asegúrate de que todos los elementos XML estén cerrados correctamente“.
Si subimos la plantilla con el “método alternativo”, es probable que no la hayamos copiado completamente. En tal caso, es recomendable “cargar la plantilla” en vez de copiar su contenido.
Si aun así no puedes subir la plantilla, recomiendo intentar con una de estas posibles soluciones:
Intentar subir con un navegador alternativo (no Internet Explorer).
Aplica una de las plantillas predeterminadas de Blogger. Cambia a una de las nuevas plantillas de Blogger, si ya no tienes una instalada, y trata de instalar de nuevo tu plantilla.
También puedes “Volver a la interfaz anterior de Blogger” (sólo temporalmente), ir a Diseño/Edición de HTML y utilizar una de las plantillas antiguas desde “Seleccionar plantilla de diseño“. A continuación, trata de reinstalar tu plantilla otra vez.
Consideraciones finales
Instalar una plantilla Blogger es un proceso realmente sencillo y rápido si se hace cuidadosamente, aunque de todas maneras siempre es necesario respaldar tu vieja plantilla y conservar tus artilugios (gadgets).
Hoy por hoy es realmente fácil encontrar plantillas Blogger gratuitas y de calidad en la red. Si bien con ellas puedes usar casi todas las funciones de Blogger, debes saber que el 99,9% están construidas bajo una base que no te permitirá usar el “Diseñador de Plantillas” de Blogger. No obstante, ello puede ser una ventaja si consideras que ya tendrás un diseño armado que podrás configurar con más facilidad (menos código y más simple).
- ▲▼ Añadir enlaces externos al menú de páginas de Blogger
Muchas personas que usan Blogger me han preguntado cómo hago para poner enlaces a mis cuentas de Twitter y Facebook en el menú. Solía responder que uso WordPress, o que pueden reemplazar un widget de tipo “PageList” (páginas) por un “LinkList” (lista de enlaces). Ello aún suena un poco complicado si se trata de retocar el código, especialmente para quienes comienzan con un blog.
La creación de páginas estáticas de Blogger siempre fue una de las funciones más esperadas. Sin embargo, el widget típico de Páginas sólo permitía mostrar las páginas del blog. Ello, por un lado, facilitaba enormemente el trabajo de los usuarios, al no tener que hacer nada para mostrar enlaces a sus páginas automáticamente, pero hacía extrañar las listas típicas de menú en HTML, que permiten enlazar lo que queramos.
Para quienes quieren tener un solo menú principal en su blog de Blogger que muestre páginas y enlaces externos, les tengo una buena noticia: Luis Gray anuncia que ya es posible añadir enlaces externos en un widget de páginas de Blogger.
Cómo hacerlo, paso por paso:
1. En Diseño/Elementos de la página, añadir un widget de Páginas en tu plantilla Blogger. Si ya lo tienes añadido, sáltate este paso.
2. Ve a Blogger in Draft, que te permite probar las nuevas funciones de Blogger antes de ser lanzadas públicamente. Una vez allí, accede al blog donde quieras añadir algún enlace externo, y ve a Páginas /Página nueva / Dirección Web.
Ahora, sólo agrega tu enlace, como se muestra a continuación:
Después de ello, el enlace será añadido automáticamente a tu menú de Páginas, y podrás moverlo a la ubicación que desees.
- ▲▼ Pure CSS Menu: Generador de menús desplegables sin javascript
Pure CSS Menu, desplegables (drop down) únicamente con CSS,
Aunque el sitio está en inglés, es intuitivo y simple de usar, especialmente para quienes tienen pocos conocimientos de CSS y HTML. Puedes elegir una plantilla, cambiar los bordes, colores, estilo de fuente, configurar enlaces con pocos clicks y descargar luego el paquete zip hacia tu computador.
Cómo instalar un menú (en Blogger)
El fichero “purecssmenu-com.zip” contiene un archivo HTML y una carpeta con imágenes. Su intalación no es complicada:
1. Abrir el archivo purecssmenu.html. Éste se abre en una nueva pestaña de tu navegador.
2. Una vez abierta la pestaña, hacer click sobre ella con el botón derecho de tu mouse, y seleccionar la opción “Ver código fuente de la página“. Esos son los correspondientes códigos a ser pegados en la plantilla.
3. El código CSS comprendido entre las etiquetas <style> y </style> (excluidas éstas), debe ser pegado en la Edición de HTML de la plantilla, justo antes de ]]></b:skin>. Guardar los cambios.
4. El código HTML comprendido entre los comentarios <!– Start PureCSSMenu.com MENU –> y <!– End PureCSSMenu.com MENU –> debe ser copiado antes o después del cierre del div ‘header-wrapper‘ (en la plantilla Mínima de Blogger), reemplazando las dobles comillas por comillas simples (‘). Una manera más simple de hacerlo, es creando un nuevo gadget de HTML/Javascript desde Diseño /Elementos de la página, en la sección llamada “crosscol-wrapper” que está justo bajo la cabecera y copypasteando el código allí. Esto último facilita su edición en cualquier momento.
5. Como últimos pasos, queda hospedar en tu hosting las imágenes contenidas en la carpeta images y reemplazar los enlaces en el CSS, justo donde se indica; y estilizar un poco el menú para integrarlo a la plantilla. Para ello, puedes modificar totalmente el CSS. En mi plantilla de pruebas, le di al contenedor #crosscol-wrapper un ancho de 100%, usando el mismo color del fondo que tenía originalmente mi menú:
#crosscol-wrapper { background:#E62E6B; width: 100%;}
- ▲▼ Leer más en Blogger… ¡al fin!
Hace tres meses veíamos la inyección de “sospechosos” códigos en las pantillas de Blogger que nos hacían pensar la posibilidad de la inclusión de “leer más” por defecto. Hoy ya es posible, y sin tener que añadir javascript o preocuparse por la velocidad de carga del blog o el hosting del script *.js.
Se activa de dos maneras:
1) Cambiando al nuevo editor de texto enriquecido WYSIWYG, desde Blogger in Draft (Configuración / Básico / Configuración global / Editor actualizado), y seleccionando el ícono “Insertar salto de línea” del editor.
2) Manualmente, y sin necesidad de ir a Blogger in Draft ni cambiar al editor actualizado:
Texto a mostrar<!-- more --> texto a ocultar
Adicionalmente, puedes cambiar el texto del enlace (por defecto “Más información”) en en elemento de Entradas del blog, desde la Edición de elementos.
Incorporando en plantillas antiguas
Si tienes una plantilla creada antes de junio, y no logras que se corten las entradas, lo más probable es que a tu plantilla le haga falta la siguiente pieza de código:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
Añádela entre el cuerpo y el pie de las entradas (post-footer), como en la siguiente imagen:
Un poco de CSS para estilizar el enlace
Con CSS, puedes adornar en enlace “leer más” o agregar un botón. Por ejemplo:
.jump-link {
background: #FF0084;
padding: 1px 5px;
border: 1px solid #FF0000;
width: 70px;
}
.jump-link a {
color: #FFF;
text-decoration: none;
font-weight: bold;
}
.jump-link:hover {
background: #FF0050;
border: 1px solid #FF0000;
}
.jump-link a:hover{
}
Si quieres que el botón quede flotando a la derecha, puedes hacerlo con la propiedad “float:right”:
.jump-link {
float: right;
}
Y limpiando la flotación con HTML, pegando bajo el código que hace posible el corte de las entradas:
<div style='clear: both;'/>
Finalmente, si seguiste algún tutorial para poner excerpts en Blogger y prefieres incluir el “leer más” de esta forma, es cosa de retroceder los pasos uno a uno y añadir el código correspondiente al jump-link.
- ▲▼ Cómo crear dos columnas de posts en Blogger
- Este mini-tutorial nace a partir de una pregunta vía e-mail. No se trata de dividir un post en dos columnas, sino de mostrar dos columnas de posts en vez de una. Puede ser muy útil para cambiar la forma en que se muestran los posts en la página principal y, en especial, para crear la base de una plantilla tipo Magazine como Turnoutmag.Empecemos con el experimento:1. Lo primero, es añadir el script “leer más con thumnails” y guardar los cambios. Como siempre, es recomendable descargar y realojar el archivo summary-post-v20-test.js. Si no, podría dejar de funcionar en cualquier momento.2. Configura las opciones del script del siguiente modo: summary_noimg = 300; summary_img = 230; img_thumb_height = 60; y img_thumb_width = 60. En realidad, puedes elegir las proporciones que quieras pero, para este experimento, yo elegí éstas.3. Amplía los contenedores de tu blog: el #main-wrapper debe tener al menos 580 píxeles de ancho, y el #outer-wrapper debe tener como ancho mínimo la suma del ancho del #main-wrapper con la del #sidebar-wrapper. Seguramente, también vas a tener que ampliar los contenedores #header-wrapper y #footer-wrapper para que sigan en concordancia con el diseño.4. Ahora, busca la siguiente sección en tu plantilla:]]></b:skin>Justo debajo, añade:<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><style type='text/css'>.post {border:1px solid #BFBFBF;float:left;height:300px;width:260px;margin:7px;padding:0px 5px 5px 5px;overflow:hidden;}</style></b:if></b:if>Lo anterior corresponde a estilos condicionales para la página de inicio. Se trata simplemente de especificar el alto y el ancho de los posts. En esta sección, también puedes añadir más estilos condicionales para el home (puedes ayudarte de la chuleta que creó Francisco). Así, por ejemplo, puedes cambiar el color del título de los posts o modificar el tamaño del texto en las entradas.5. Detalles adicionalesa) Seguramente, vas a necesitar limpiar la flotación de los links de navegación:#blog-pager {clear: both;}b) Puedes adornar con CSS el enlace “Leer más”:.rmlink {background: #CA8398;padding: 2px 5px;}.rmlink a:link, .rmlink a:hover, .rmlink a:visited{color: #FFF;}c) En Formato, necesitas cambiar el número de entradas a mostrar a un número par (idealmente 8, 10 ó 12).Consideraciones finales:Es una técnica muy sencilla, que puedes adaptar a tus necesidades y “adornar” con un poco de CSS y HTML:Puedes modificar los metadatos (fecha, autor, enlace de los comentarios), cambiándolos de lugar, añadiendo o quitando texto, o utilizando íconos para destacarlos.Seguramente, notarás que la fecha queda flotando arriba de uno o varios posts, por lo cual puede ser algo molesto y poco estético. Opta por ocultarla desde la sección Elementos de la Página, y usa en su lugar el fomato de la hora. También puedes moverla manualmente desde la edición de HTML, aunque puede ser más complejo si no estás familiarizado con la estructura de una plantilla Blogger.Si amplías más los contenedores de la plantilla, y reduces el tamaño de los posts en la página principal, puedes crear tres o más columnas de posts sin necesidad de retocar nada más. Inclusive, puedes llegar a crear galerías de imágenes modificando las propiedades del script.Si antes del contenedor #main-wrapper añades un plugin jQuery para crear slideshows, y complementas la técnica poniendo columnas en el footer y arreglando tu sidebar con widgets y más columnas, puedes tener una perfecta plantilla tipo magazine. Todo está en entreverse a jugar y experimentar un poco.
 |
&  |
&  |
0 comentarios:
Publicar un comentario