Mostrando entradas con la etiqueta Blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta Blogger. Mostrar todas las entradas

Tutorial: ¿Cómo usar Font Awesome en Blogger?

Lenis Querales Blanco
usar-font-awesome-blog-blogger


Probablemente haz visto una gran cantidad de blogs que incluyen al lado de cada elemento del menú un icono. O tal vez has visto que colocan los botones para seguimiento en redes sociales. 

Puede que te preguntes ¿Cómo lo hacen? Hoy día las mayorías de las plantillas para Wordpress y Blogger incluyen una fuente de iconos llamada Font Awesome.

Shutterstock.com INT


Pero ¿qué pasa si la tuya no la incluye o si no sabes incluir los iconos? Este tutorial te lo explica. 


Te puede interesar:
Tutorial: Cómo configurar un dominio .com.ve en Blogger
Los 15 mejores bancos de imágenes de la web
Los errores que cometí en el primer año del blog y que debes evitar


¿Qué es Font Awesome?


Font Awesome es una fuente compuesta por iconos vectoriales escalables que se pueden personalizar al instante aplicando reglas CSS: tamaño, color, sombra paralela y otras modificaciones.

¿Por qué usar Font Awesome?


  • En un solo paquete incluye unos  675 iconos de diversos temas y continuamente se están incluyendo nuevos. 
  • Completamente libre para uso comercial, proyectos de código abierto y casi cualquier cosa que desees.
  • No requiere JavaScript
  • Al ser gráficos vectoriales escalables los iconos se ven bien sin importar el tamaño. Nunca se distorsionan.
  • Los iconos se ven perfectos en pantallas de alta resolución.

¿Cómo usar Font Awesome en Blogger?


Incluir los iconos de font awesome en un blog de blogger es muy sencillo y no tiene nada de complejidad. Aquí veremos el método más sencillo de hacerlo. 


1. Vamos a nuestro escritorio de Blogger, específicamente a la sección Temas y elegimos Editar HTML.
2. Una vez veamos nuestro código debemos buscar (usa ctrl+f) la etiqueta </head>  y antes de esta línea  copiamos lo siguiente:



En este caso, 4.7.0 se refiere a la versión de la fuente. Si quieres saber cual es la más reciente ve a la página oficial. 


Ya hemos agregado font awesome a nuestro blog. Ahora comencemos a usarlo. Veamos dos de los usos más comunes que se dan a los iconos en un blog.


Incluir iconos de las redes sociales


Supongamos que quieres incluir los iconos de las redes sociales para facilitar que tus usuarios te encuentren y te sigan.

Quizás deseas algo parecido a la imagen:



Para hacerlo, lo primero que debes hacer es ubicar el código de las redes (todos están en Brands icons), en font-awesome al hacer clic sobre el icono nos aparece el código que debemos copiar.

Tomemos como ejemplo el icono de Twitter



Una vez tengas todos los códigos debemos añadir los iconos a nuestro blog, supongamos que queremos que aparezcan en la sidebar. Vamos a Diseño, agregar un nuevo gadget (donde queramos que aparezca)

Ahora copiamos el siguiente código:



Como resultado veremos los iconos que dirigen a nuestros perfiles en la posición que elegimos, pero los veremos de esta manera (un poco pequeños):



Para mejorar su apariencia recurrimos a CSS, en Tema -> Personalizar-> Avanzado, copiamos el siguiente código



El resultado:



Recuerda colocar el color y tamaño que quieras, y si tienes un poco de conocimiento en CSS puedes personalizar a tu gusto los iconos.


Colocar iconos en nuestro menú

Colocar los iconos en el menú es mucho más sencillo todavía, solo debemos buscar el código del icono que deseemos. 

Una vez que lo tengamos, vamos a Tema -> Editar HTML, buscamos el código del menú  y en la línea de cada elemento del mismo agregamos <i class='URL-DEL-ICONO'/>

En mi caso sería 


Ya hemos aprendido a incluir Font Awesome en nuestro blog si nuestra plantilla no la trae, como ves en un método muy sencillo y rápido que no requiere tener muchos conocimientos de HTML y CSS. 

¿Qué te ha parecido el tutorial? ¿Ya usas Font Awesome en tu blog?


Personaliza tu página 404 y deja de perder lectores

Lenis Querales Blanco
Personaliza-la-página-de-error-404-de-tu-blog

Publicado: 01/02/17

Seguro te ha pasado que estás buscando algo en internet y cuando crees haber encontrado la página ideal y la abres te aparece algo como: “404 Page not found” o “Error 404 Página no encontrada” ¿qué haces en ese momento? Pues te vas de esa página que nada dice y que no te da motivos para quedarte.

Ahora imagina que el usuario es otra persona y que ese mensaje le aparece justamente al intentar ingresar a una página de tu blog, ¿el resultado? Una visita menos, un lector insatisfecho que muy probablemente no querrá volver a tu sitio.

Pero ¿qué es eso de página de error 404? ¿Por qué debes personalizar la de tu blog y cómo puedes hacerlo? Ahora lo aprenderás.


Personaliza la página de error 404 de tu blog y deja de perder lectores


¿Qué es la página de error 404? 

El error 404 se produce cuando alguien ingresa a una dirección web que no existe y la página en la que se indica ese error se conoce a menudo como página 404. Esta página puede aparecer básicamente por 4 razones:

1. El usuario ha hecho clic en un enlace roto: es posible que el usuario llegue a esta página proveniente de otro post de tu blog, y en este caso eso sucede porque tu has escrito o creado mal el enlace.

2. La página se ha eliminado: quizás alguna razón te haya llevado a eliminar un post o página de tu blog, por eso al intentar acceder al mismo obviamente no podrás. Por ejemplo si ingresas a esta dirección de mi blog no la encontrarás pues ese post lo borré (no me preguntes por qué).

3. Enlace externo a tu blog mal escrito: si alguien te ha enlazado desde su sitio y no escribió bien la dirección, saltará un error 404.

4. El usuario no ha escrito la URL correctamente, esto aunque poco común puede pasar al escribir una dirección manualmente.

¿Por qué tener una página 404 personalizada? 


Generalmente las páginas 404 no dicen nada más que “Page not found” o “Página no encontrada” lo que hace que el lector sencillamente salga de tu web porque no se le explica lo que sucedió ni se le da opciones o motivos para quedarse en tu sitio ¿Cómo podemos evitar que se vaya? Simple, personalizando la página de error 404 de tu sitio. 

Antes de personalizar, si quieres conocer la apariencia actual de tu página 404, coloca en el navegador una dirección que sabes que no existe, algo así: unaexperiencia20.com.ve/hdvhjbv o simplemente unaexperiencia20.com.ve/404 (Recuerda sustituir “unaexperiencia20” por la dirección de tu blog).  Al hacer esto verás si necesitas personalizar esta página de tu blog (lo más seguro es que si). Muy probablemente lo que veas es una página de error 404 predeterminada de la plataforma que utilices o si tienes una plantilla externa y esta tiene su propia página 404 esta será la que verás.


¿Qué puedes incluir en tu página 404? 

No existen ningún tipo de reglas para ello, por lo tanto puedes incluir lo que desees o lo que mejor se adapte a tu estrategia, pero básicamente puedes hacer lo siguiente:

- Asegúrate de que la página 404 tenga el mismo aspecto que el resto del sitio: es decir, debe combinar con tu blog porque es una página más de tu blog. Incluye la imagen de cabecera, tu logo, y utiliza los colores que identifican tu marca. Por ejemplo, observa la página 404 del blog de Maider Tomasena ¿acaso alguien puede dudar que se trata de una página de su blog? No lo creo.

error-404-Maider-Tomasena


- La mayoría de quienes usan internet no tienen ni idea de que significa “Error 404” por eso debes explicar claramente a los visitantes que no se encuentra la página que buscan y por eso ven esa página. Incluso puedes mencionar las razones por las que eso ocurrió. El estilo lo marcas tú. Si quieres ver un ejemplo brillante de cómo explicar a qué se debe el error 404 fíjate en como lo hace Gastre en su blog (de los blogs que sigo esta es la página 404 que más me gusta por su sencillez e informalidad).

error-404-Gastre


- No pierdas esa visita que te acaba de llegar, para ello puedes incluir un enlace a la página principal de tu sitio, a tus mejores posts, a los más recientes o a las categorías principales del blog. La idea es que quien te visita no vea como únicas opciones los botones “atrás” o “cerrar” de su navegador. Por ejemplo, la página 404 del blog de Ignacio Santiago es una de las más completas que he visto, incluye varias de las opciones mencionadas.

error-404-ignacio-santiago



- Agrega un buscador, así le permitirás al lector encontrar, dentro de tu mismo sitio, lo que está buscando y te asegurarás que se quede un ratito más en tu blog. También es probable que la búsqueda le arroje varios resultados y quede enganchado un largo rato con tu contenido. En la página de error de su blog, José Antonio Carreño incluye precisamente un buscador como elemento principal.

error-404-josé-antonio-carreño


- Incluye el menú principal de tu blog, de esta manera el lector tendrá más oportunidades de navegar por tu sitio y no se verá tentado de buenas a primeras a presionar la “x” y perderse del mapa.

- Es probable que no te hayas dado cuenta que hay enlaces rotos en tu blog, por ello puedes incluir en la página 404 un formulario u otro medio para que el lector te notifique de la existencia de los mismos. Diles que te expliquen brevemente lo que sucedió al intentar ver la página, así te darás cuenta, entre otras cosas, si siguió un enlace externo, que te han enlazado mal y podrás escribirle al autor para que corrija el error. Si incluyes esta opción, tus visitantes verán que te importa su opinión y que valoras su ayuda.

- Si en tu sitio vendes algo puedes aprovechar la página 404 para promocionar algunos de tus productos.

- Sácale una sonrisa a tu visitante; para ello sé creativo al escribir el mensaje, incluye alguna imagen atractiva, gif u otro elemento que haga ver de forma positiva el error. A todo el mundo le gusta aquello que le causa algo de risa o lleva un toque de ironía (en realidad no sé si a todo el mundo, pero a mi si me gusta). Un ejemplo magnifico de esto es la página 404 de "Mi Posicionamiento Web" de Rubén Alonso (tienes que verla en vivo, para que te enganches con el perro).

error-404-mi-posicionamiento-web


- Pon a disposición algún recurso para descargar a cambio de una suscripción: un ebook, plantilla, infografía, lo que se te ocurra. Esto es justamente lo que verás en la página 404 de Oink My God.

error-404-oink-my-god


- Deja información de contacto, tus cuentas en redes sociales, teléfono, correo u otro dato.

Personalizar la página 404 en Blogger

Si tu blog es creado con Blogger puedes personalizar tu página de una de estas maneras:

1. Blogger incluye la opción de colocar un mensaje personalizado en tu página 404, para ello ve a Configuración → Preferencias para motores de búsqueda, en el apartado Errores y redireccionamientos encuentras la opción “Mensaje de página no encontrada personalizado” has clic en Editar y escribe tu texto. También puedes preparar una imagen y texto desde el creador de entradas de tu blog y copiar el código html de la misma, para luego pegarlo en la casilla. Si quieres más detalles de cómo hacerlo revisa estos tutoriales:


2. Si estás usando una plantilla externa de blogger es muy probable que esta incluía la opción de personalizar la página 404, ve a Plantilla → Editar html, ubica el código de la página 404 y edítala a tu gusto. Esto fue justo lo que yo hice pues inicialmente la página solo incluía el mensaje página no encontrada (en tailandés por cierto ¿?) y un botón para ir al inicio del blog.

Personalizar la página 404 en Wordpress

En el caso de Wordpress puedes usar plugins o  trabajar sobre el código de tu plantilla:

Usa un Plugin 

404Page: Una de las maneras más fáciles de crear tu página 404, lo harás tal como si estuvieras escribiendo un post, puedes incluir además de texto una imagen.

Custom 404:  Con este plugin puedes crear tu página, agregarle un fondo, imagen, editar  el color y el estilo de las fuentes.

Trabaja sobre el código de tu plantilla

Para ello te recomiendo el tutorial "Guía Para Personalizar La Página De Error 404 En WordPress"  escrito por Johnny Galo en DKSignMT. 

En resumen, un error 404 puede correr (literalmente) a más de una persona de tu blog, por eso es importante que personalices esta página y permitas que desde ella el visitante encuentre lo que busca y se quede en tu blog, que a fin de cuentas en lo que quieres ¿no?

¿Ya revisaste y personalizaste tu página de error 404? ¿qué encontraremos en ella?


Tutorial: Cómo configurar un dominio .com.ve en blogger

Lenis Querales Blanco
configurar domino .com.ve en blogger


Entre las cosas que podemos y debemos hacer desde el principio para mejorar nuestro blog y darle un toque más profesional se encuentra el usar un dominio personalizado, que nos permita dejar de lucir el .blogspot (o Wordpress) en nuestra dirección.

Aprende aquí lo que todo blogger debe saber y hacer desde el principio


Lo cierto es que después de varios meses con el blog, por fin me decidí a cambiarle el dominio, comencé a buscar alternativas y me decidí por adquirir un dominio .com.ve, el proceso de adquisición es lo más sencillo y rápido de este mundo (dependiendo del tipo de pago que selecciones) pero el proceso de configuración puede volverse un dolor de cabeza, por lo menos para mi lo fue, pero después de intentar durante 2 días lo logré. ¿Cómo?

En este breve tutorial te lo explico.

Cómo configurar un dominio .com.ve en Blogger paso a paso


¿Qué necesitamos?


1. Tener un blog en blogger (obvio)
2. Comprar un dominio a CONATEL (Comisión Nacional de Telecomunicaciones de Venezuela) y configurar los DNS
3. Crear una cuenta en CDMON y editar los registros A y los CNAME

1. Tener un blog en blogger

Se supone que ya lo tienes, así que me salto este paso

2. Comprar un dominio a CONATEL y configurar los DNS



Registrate como nuevo usuario, para ello debes ir a la opción Registrese y llenar todos los campos con la información solicitada, una vez lo hagas recibirás un correo para confirmar tu cuenta.

Registro NIC

Ahora podrás iniciar sesión con tus datos, al hacerlo encontrarás un menú en la parte derecha de la pantalla, en él seleccionas la opción Registro.

Solicitar dominio NIC

En la nueva pantalla ingresa el nombre de dominio a comprar y selecciona la extensión (.com.ve, .net,ve, ,org.ve, .info.ve, .co.ve, .web,ve) luego haz clic en buscar y el sistema te dirá si está disponible o no.

dominio .com.ve


En la lista selecciona el que será tu dominio y haz clic en Registrar.

Disponibilidad de dominio

Después de hacer todos los pasos relacionados con el registro debes Pagar por tu dominio. Para ello selecciona en el menú lateral la opción Pagos, selecciona el dominio a pagar y haz clic en Continuar.
Más adelante selecciona la forma de pago: depósito bancario (lo que equivale a hacer cola), transferencia electrónica o tarjeta de crédito (cero colas y aprobación en pocos minutos). Si tu pago es aceptado ¡ya tienes tu dominio!


Ahora puedes configurar tu dominio en NIC

Selecciona en el menú la opción MisDominios, al hacerlo verás tu(s) dominio(s) activo(s) selecciona el que quieras editar.



Al entrar en él busca la opción Configurar DNS

Configurar DNS

y agrega los siguientes (en cada host del 1 al 3)
ns1.cdmon.net
ns2.cdmon.net
ns3.cdmon.net

Agrega uno por uno, cada vez que lo hagas recibirás un correo de confirmación que te llevará a un código de seguridad que debes ingresar en cada caso. 


Si agregaste los 3 DNS, ya terminaste con NIC (hasta dentro de un año que debes renovar tu dominio)

3. Crear una cuenta en CDMON y editar los registros A y los CNAME

CDMON es un servicio que nos permite adquirir y configurar dominios; algunas de sus funciones son gratis (esa es la que usaremos).

Entra a la página, crea tu cuenta e ingresa a tu panel de control, selecciona la opción DNS gratis, y luego DNS estático, y en esa pantalla selecciona Añadir dominio.

Añadir dominio en CDMON

Después de leer y aceptar las condiciones del servicio ingresa el nombre de tu dominio (el que creaste en NIC).

Añadir nuevo dominio


Nos vamos por un momento de CDMON y abrimos Blogger (en otra pestaña) entramos a las opciones de configuración de nuestro blog y en Lo Básico, en la sección Publicación haz clic en Configurar una URL de terceros para tu blog, escribe tu dominio comenzando con www y haz clic en guardar.

Añadir dominio personalizado blogger


Oh oh tienes un error ¿cierto? No pasa nada todos lo tenemos. Nota que en el error se incluyen 2 CNAME, el primero es estándar y el segundo varía para cada blog (ya usaremos estos CNAME, no cierres la ventana).

Error 12


Volvamos a CDMON y en el panel de gestión de nuestro dominio seleccionamos Gestionar DNS

Gestionar DNS CDMON

ahora ingresamos lo siguiente:


Registros A
Registros A CDMON



Una vez hayas ingresado las 4 IP borra las líneas con los parámetros www (si lo deseas) para que te quede así:

Registros A


Registros CNAME
Registros CNAME

Debería quedarte así:

Registros CNAME CDMON

Con este paso habrás terminado con CDMON pero cada 90 días debes reactivar tu cuenta.

Ahora hay que  esperar a que los cambios se realicen, esto podría ser en minutos o en unas 48 horas, si pasa este lapso de tiempo verifica lo que has hecho pues es probable que tengas un error. Ahora volvamos a la pestaña del error de Blogger e intenta guardar los cambios de nuevo, si todo va bien podrás acceder a tu blog con tu dominio .com.ve.

Si ya tienes tu dominio vuelve a Configuración de tu blog -> Lo básico, debajo del nombre de tu dominio, marca la casilla que redirecciona tu dominio sin "www." al inicio a la que si lo tiene.

Hasta acá el tutorial, en realidad no es tan difícil como parece, la clave está en seguir los pasos y especialmente en tener paciencia (no todo se resuelve en un minuto).