Dividir el Header o Cabecera del Blog

Estimados amigos bloggers. Luego de buscar, buscar y buscar, destruir plantillas con raros tutoriales y sufrir mucho (así es la vida de un novato, lo se) por fin encontré la manera de dividir el header o cabecera del blog sin morir en el intento.

Este es un espacio que queda desperdiciado cuando nuestro logo es pequeño o no usa el total de la cabecera. Luego de este tutorial ustedes dispondrán de ese "hueco" para poner un menú, una imagen, botones de redes sociales, un simple texto, un bloque de anuncios o lo que ustedes deseen.

Para logra esto debemos seguir apenas un par de pasos que os dejare a continuación.

Blog de viajes, plantilla ideal

Hola bloggeros. Hoy quiero compartir una plantilla que encontré en btemplates.com y me pareció muy útil para aquellos que incursionan en un blog de viajes.
Es una plantilla sencilla pero moderna y con las funcionalidades que se necesitan para este tipo de blogs.
El negocio de los viajes es algo que deja mucho dinero hoy en día, y si hablamos de Internet son muchas las búsquedas que tiene esta actividad. Por ende si estan en ese rubro o intentan inovar en el es importante que brinden informacion clara a sus lectores o potenciales clientes.

A mi entender esta es una plantilla ideal para esta función. O para aquellos que les gusta viajar y quieren hacer un blog personal creo que también iría muy bien. 

Tiene un menú con sub menú deslizantes, entradas resumidas con fecha de publicación y botón leer mas que se desliza, imágenes con efecto espejo y efecto hover, emoticons para los comentarios, post relacionados y el gadget de entradas populares adaptado a la plantilla.Todo para que tus viajes se vean como debe verse o vender muchos pasajes /gg.

Respaldar el blog completo en Blogger

Crear copia de seguridad en Blogger

Teniendo en cuenta que hacer un blog nos cuesta mucho trabajo y tiempo seria muy triste que un día sufriéramos la furia de Google y nuestro blog sea eliminado o algún mal intencionado se meta y borre las entradas o alguna cosas de esas. Por eso es MUY importante hacer un respaldo completo de nuestro blog. Es algo que esta a la vista pero muchos no lo hacen. Algunos simplemente por no hacerlo y otros porque no saben como. Para el segundo grupo de personas os voy a enseñar como hacerlo. Son 3 simples pasos que voy a pasar a mostrar con las siguientes imágenes.

Menú vertical con efecto de transición y descripciones

Hola bloggeros.
Quiero compartir este estético menú vertical con slider que seguro ira muy bien en alguno de sus blogs.

El mismo cuenta con un estilo "metálico", efecto de transición suave, titulo de la sección, descripción de la sección y un botón "Leer Mas" con un efecto hover que me gusto mucho.

Para aplicarlo en su blog deben ir a Su escritorio Blogger > Plantilla > Editar HTML y allí con CTRL + F buscan ]]></b:skin>. Justo antes pegan el siguiente código:

Problema con los sub menu de las plantillas blogger

Hace un tiempo publique un menú en la siguiente entrada Simple menú horizontal desplegable para blog y un bloggero me dijo que los sub menú quedan escondidos detrás del contenido. Como todo novato me puse a leer y descubrí cual es el problema. Resulta que las plantillas del diseñador de plantillas de blogger traen estilos pre definidos que encierran las personalizaciones que agregamos como el caso del menú que publique. Para solucionar esto vamos a eliminar esos estilos y dar rienda suelta a nuestra creatividad reprimida por esas plantillas. Como siempre recordaremos que no somos expertos y haremos una copia de seguridad de nuestra plantilla por si la embarramos. Luego de esto procederemos a eliminar estos malditos estilos pre diseñados que nos arruinan la vida. Para ello vamos al Escritorio Blogger > Plantilla > Editar HTML y con CTRL + F buscamos lo siguiente:

Pesonalizar los links de Entradas Recientes, Pagina Principal y Entradas Antiguas

Generalmente no veo plantillas que tengan personalizados los links de "Pagina Principal", "Entradas Recientes" y "Entradas Antiguas". Para mi es parte importante de la navegación del visitante porque estos links, que quedan casi perdidos, pueden hacer que el usuario intereactue y siga viendo el blog, y asi evitar el porcentaje de rebote. Se que no es un factor determinante pero pequeñas cosas hacen un gran conjunto.
En esta ocasión vamos a darle un fondo con degradado en CSS, redondearemos los bordes, le daremos negrita al texto y cambiaremos su color y aplicaremos un efecto "hover" para que cambie al posicionar el cursor.

Esta función esta puesta en este mismo blog, es la de la imagen y la pueden ver yendo hasta el final.

El código esta probado en la plantilla simple de blogger y funciona en Chrome, Firefox e Internet Explorer salvo la función de redondear los bordes que nuestro amigo IE no reconoce... (como siempre IE arruinando nuestras vidas).

 Para aplicarlo deben ir a la edición HTML de la pantilla y justo antes de ]]></b:skin> deben pegar el siguiente código CSS:

Personalizar los títulos de los gadgets

Hola bloggeros!
En esta ocasión hablare de los títulos de los gadgets. En el momento de personalizar mi primera plantilla fue un sufrimiento poder modificar todo lo que quería pero una de las cosas que mas dolores de cabeza me dio fue los títulos de los gadgets. Luego de leer, destruir plantillas y sufrir enfermedades depresivas llegue a un CSS que permite dar el estilo que uno quiere. En este caso el código que les dejare modificara todo el titulo, aunque ustedes elegirán que quieren y que no, las posibilidades son infinitas y les aseguro 100% que pueden adaptar los títulos de los gadgets a su plantilla como deseen. Les dejo el código separado entre columnas de izquierda y derecha por si quieren hacerlas con estilos diferentes y paso a explicarles que es cada cosa para que la puedan adaptar a su gusto.

Estilos de fuente HTML

La fuente del texto de nuestros blogs es parte muy importante del estilo de la plantilla. Para nosotros los novatos es difícil encontrar información clara en Google y como a mi me costo mucho encontrarla la comparto con ustedes para que el tema quede claro de una vez por todas.

Aquí encontraran 13 estilos diferentes de fuente HTML en los que están: "Verdana, Geneva, sans-serif", "Georgia, 'Times New Roman', Times, serif", "Courier New', Courier, monospace", "Arial, Helvetica, sans-serif", "Tahoma, Geneva, sans-serif", "Arial Black', Gadget, sans-serif", "Times New Roman', Times, serif", "Palatino Linotype', 'Book Antiqua', Palatino, serif", "Lucida Sans Unicode', 'Lucida Grande', sans-serif",  "'MS Serif', 'New York', serif", "Lucida Console', Monaco, monospace" y "Comic Sans MS', cursive".

Convertir HTML a texto plano

Si intentas pegar un código HTML en una entrada para compartir con otros colegas resultara que algunos caracteres se modificaran al momento de publicarla y eso hará que el código no cumpla su cometido. Para que el código quede como debe ir debemos convertirlo a "texto plano" (también pueden haber escuchado que a esta practica se le llama "parsear"). Sin entrar en detalles que no sabría explicar les dejo un box para solucionar el tema. Solo peguen el código que desean dejar en su entrada y den click en el botón azul "Pasar a texto plano" y listo. Ya pueden pegar el HTML en sus blogs para que otros lo vean correctamente.

Notaran que el resultado les dará caracteres extraños pero no se asusten, es así como debe quedar, úsenlo sin miedo y veran que va bien.
Como siempre, espero les sirva y muchas gracias por pasar!

Colores HTML o en numeros hexadecimales para el blog

Colores HTML

Al momento de meter mano a ciegas en nuestra plantilla de blogger, y se nos ocurre cambiar el diseño, nos encontramos con que los colores html están diferenciados con esos números antecedidos por el numeral (#) que parecen no decir nada. Para nosotros los novatos puede ser un dilema porque entre todo lo que debemos aprender, recordar esa infinita combinación numérica seria imposible. Pero como la Internet es sabia alguien que pensó en nosotros y creo un flash para que solo tengamos que buscar el color, copiarlo y dejarlo donde queramos. Una vez mas: ¡Gracias querida Internet!
Para conseguir el color solo deben moverse dentro del degradado y la barra a la derecha y luego copien el código que esta pegado a "Hex".  A continuación les dejo el flash para conseguir los colores html fácilmente.