martes, 31 de marzo de 2015

Blogger: Eliminate render-blocking JavaScript and CSS

Si has analizado tu blog en google page speed, de seguro te has encontrado con esta recomendación: "Eliminate render-blocking JavaScript and CSS in above-the-fold content" muy común en los blogs de blogger y también paginas web, ¿entonces que pasa con esto? simple uno de los factores que mas alenta los blogs, si logramos sobrepasar este problema nuestro blog aumentara de velocidad excepcionalmente, te haré una prueba, analisemos un blog recién creado. y veamos que nos dice google page speed antes de corregir este problema y después de arreglarlo.

Bien, entonces tenemos aquí un blog recién creado con una plantilla de "Sencillo" y como vemos nos aparece el condenado error.


Blogger: Eliminate render-blocking JavaScript and CSS

bien todo normal, ahora veamos el mismo blog con los cambios aplicados de Eliminate render-blocking JavaScript and CSS in above-the-fold content,


Eliminate render-blocking JavaScript and CSS in above-the-fold content

Wow! que aumento de velocidad de lo mas increíble! y como lograr esto, pues muy sencillo, para empezar tomaremos nota de todos los gadgets que tenemos, 

El truco que explicare, sirve para arreglar la velocidad que un blog trae por defecto, mejor dicho como fuera nuevo, recién creado y sin ningún gadget adicional, porque si tiene un blog con muchos gadgets que usan scripts, y un montón de cosas, solo arreglaremos un poco el lio.

Doy una advertencia antes de empezar el tutorial, si crees que mejor no lo aplicas pero quieres una mejor guía para acelerar tu blog visita esta entrada en la que enseño mejor que hacer para Acelera la carga del blog y mejorar su velocidad no desesperes.

aclaracion
ADVERTENCIA

  • Aplicar esta solución deshabilitara el diseñador de plantillas de blogger, así que si no eres un bloggero avanzado o con conocimientos en CSS y HTML mejor no lo hagas.
  • Algunos gadgets proporcionados por blogger como el botón +1 quedan deshabilitados, pero tu puedes colocarlos manualmente
  • también le decimos adiós a los comentarios de google+ en el blog
  • quedan advertidos XD


Para los que si quieren hacer esto dejemos tanto rodeo y comencemos con la optimizacion!

Eliminate render-blocking CSS in above-the-fold content

  • si en realidad quieres mejorar la velocidad de tu blog piensa en quitar todos esos gadges adicionales que empeoran este problema, ¿como saber que tipos de gadgets son? bueno intentare explicarlo, son gadgets como los botones de me gusta de facebook, google+, twitter, animales en el blog que se mueven, sliders, entre muchos otros, no te alarmes por lo de los botones, puedes usar opciones mas livianas como los que yo uso en mis entradas, que no alenta el blog.
  • una ves que ya no tengas los gadgets que estorben, haremos lo siguiente, arreglaremos primero el Eliminate render-blocking CSS in above-the-fold content, vamos a blogger
  • y rápido nos dirigimos a plantilla y copiamos todos los códigos CSS que tengamos y los pegamos en un blog de notas para guardarlos
  • ahora vamos a nuestro blog normalmente (en ver blog) y damos click derecho y en ver código fuente de la pagina.
  • aquí localizamos un  par de lineas como estas:


  1. <link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/xxxx-xxxxxxxx-widget_css_2_bundle.css' />
  2. <link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=xxxxxxxxxxxxxxxxxxxxxxxxxxxx' />


  • esas dos lineas nos dan el error del CSS, siempre están juntas y las encuentras en la parte de arriba, casi antes de terminar </head>, cuando las hayas  localizado, clickea en la dirección que contienen.
  • se abrirán 2 paginas, uno con muchos códigos CSS y otra con apenas 2 o 3 lineas de código css, en fin lo que tienes que hacer es copiar todas esos códigos y los pegas en el blog de notas que ya tenias arriba de los códigos que ya tenias, NOTA estos estilos son los de los gadgets de blogger y partes del mismo blog que tienen todos los blogs, si tu quieres puedes sacar las lineas que te sirvan, para así no meter todo ese código en tu blog
  • bien ahora nos regresamos a la plantilla de blogger y ubicamos  
  • todo lo que esta dentro de los b:skin lo borramos incluyendo los b:skin
  • y en su lugar pegamos este código:

     &lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin><style type='text/css'>Aquí pega los css</style>

  • y donde esta en color rojo pegamos todos los css que teníamos en el blog de notas y guardamos la plantilla.
    
    

Ya con esta parte quitamos el Eliminate render-blocking CSS in above-the-fold content, ahora eliminemos el Eliminate render-blocking javascript in above-the-fold content, recuerden que estas dos cosas van de la mano, una sola sube un poco la velocidad, pero juntas revientan!

Eliminate render-blocking JavaScript in above-the-fold content


  • Este es un poco mas sencillo ahora que sabes como es la temática. con esto también nos quitaremos de encima el molesto https://apis.google.com/js/plusone.js que también  alenta el blog
  • vamos a la plantilla de blogger y editar html
  • no vamos hasta la parte final del código y buscamos el </body>
  • eliminamos el body y pegamos este código en su lugar. 
    &lt;!--</body>--&gt;aqui codigos javascrit&lt;/body&gt;

  • como ya has visto la parte que esta enrojo sera para colocar todos los scritps externos que utilices como, los script de facebook, google analitycs, o cualquier otro script que tengan, si no tienes elimina esa parte.
  • guarda los cambios
Ahora mira tu blog y veras que rápido carga, y si loi compruebas en google page speed veras la diferencia!, bien eso fue todo espero les haya servido y cuéntenme como les fue.

martes, 16 de diciembre de 2014

Acelera la carga del blog y mejorar su velocidad


Acelera la carga del blog y mejorar su velocidad

¿Quieres que tu blog cargue rápido? estas cansado de esperar a que tu blog cargue y cargue y nada?, pues en este tema te daré los pasos necesarios para ver que ocasiona que tu blog sea lento y veremos como corregir estos problemas y así mejorar la velocidad de tu blog, si has venido aquí has echo bien, sabes la velocidad de una pagina web o un blog es en verdad fundamental, y si no me crees déjame explicarte:


viernes, 12 de diciembre de 2014

3 formas de colocar un buscador en tu blog

Para empezar un blog o un sitio web necesitas un buscador integrado, le dará mas enfoque a tu sitio web, es uno de los elementos mas esenciales que se pueden tener, ¿porque?, simple, si tienes un sitio con muchas entradas ¿como harán tus lectores para encontrar el contenido que quieran?, o ver si tienes articulo que tengan que ver con lo que ellos quieran ver, me entiendes, lo que quiero decir es que un buscador realmente ayuda mucho para la NAVEGACIÓN DE UN SITIO WEB, así que esto es mas bien un requisito mas que algo de solo colocar y ya, veamos 3 formas para colocar un  buscador en tu blog sea de blogger o wordpress.

entonces empecemos, ya que colocar un buscadores es bastante fácil, aquí te mostrare 3 formas de poner un buscador en tu blog,

PASOS PARA COLOCAR UN BUSCADOR EN TU BLOG

LA FORMA 1 ES FÁCIL,  ya que es directamente con la plataforma blogger, usaremos un buscador que viene en los gadgets:


  1. primero vayamos a blogger
  2. elige el blog al que le quieras colocar en buscador buscador blogger
    ahora dirígete a la opción Diseño (en la imagen)
  3. Y en los campos donde puedas agregar un gadget, elige esa opcion
  4. y en la lista de gadget que aparecen elige el de Buscador

  5. buscador blogger



  6. elige, mejor la opcion; "este blog", porque la verdad es que nadie usara tu buscador para la Internet y esto es solo estorbo. y te quedara un practico buscador un poco simple



LA FORMA 2 es fácil también Consta de colocar un buscador pero no de blogger si no usando códigos que permitan usar los principios de búsqueda de blogger, pero te preguntaras que diferencia hay entre usar este buscador y no uno del mismo blogger? pues simple hacen lo mismo pero el buscador de código es mas rápido a la hora de cargar, porque el de blogger tiene que cargar el gadget como tal, ya que blogger almacena los códigos en otro lugar y tiene que cargarlos, en cambio con el de código directo lo carga porque ya esta ahí: 

este sera el buscador que tendrás



  1. bueno primero dirígete a blogger
  2. en la pestaña "diseño"
  3. elige "Añadir un gadget"
  4. en la lista busca el que dice HTML/Javascript
  5. pega este código en el campo y dale en guardar


  6. <style type="text/css">
    #search {
    position:absolute;
    width:400px;
    margin: 0 auto;
    }
    
    #search-form1 {
    height:30px;
    border:1px solid #eee;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    background-color:#fff;
    overflow:hidden
    }
    
    #search-text1 {
    border-width:0;
    background:transparent
    }
    
    #search input[type="text"]{
    width:90%;
    padding:7px 0 12px 1em; /* posicion del texto en la caja */
    color:#333; /* color del texto en la caja */
    outline:0
    }
    
    #search-boton{
    position:absolute;
    top:0;
    right:0;
    height:32px;
    width:80px;
    border-width:0;
    background:#eee; /* color del texto en la caja */
    -webkit-border-radius:0 5px 5px 0;
    -moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0;
    cursor:pointer;
    }
    </style>
    
    <br />
    <div style="text-align: center;">
    <div id="search">
    <form action="/search" id="search-form" method="get" target="_top">
    <input id="search-text1" name="q" placeholder="Que Buscas" type="text" />
    <button id="search-boton" type="submit"><img border="0" src="http://4.bp.blogspot.com/-pewEzqFt2Tw/VH-ALUNPv5I/AAAAAAAABXY/0MrMF_DUMH0/s320/ico-search.png" /></button>
    </form>


  7. y listo tendras tu buscador mejorado.


LA FORMA 3 Y RECOMENDADA 
Si usas un blog, es claro que necesitas un buscador! y aunque blogger ya trae un gadget para agregar un buscador, este resulta ser muy básico y en lo personal no me gusta para nada, por suerte podemos colocar un buscador personalizado de google en nuestros blogs.

lunes, 16 de junio de 2014

Estudiar la prueba de Lectura critica ICFES

Bien como ya sabemos para el calebdario A o segundo examen del año del icfes, este implemento unos cambios para irse, adaptandose y alinearse con los demás exámenes de estado que realiza el Icfes, bien Ahora nos despedimos del conocido nucleo comun y le damos paso a las nuevas areas que este examne icfes evaluara, en este Caso la prueba de Lectura Critica, es preciso dejar claro que no es muy nuevo solo es la fucion de las peubas de lenguaje y filosofia, el icfes es muy claro en esta parte

Estudiar prueba de Ciencias Naturales icfes

ciencias naturales icfes


Bien como ya sabemos para el calendario A o segundo examen del ICFES en el año, este implemento unos cambios para irse, adaptándose y alinearse con los demás exámenes de estado que realiza el Icfes, bien Ahora nos despedimos del conocido núcleo común y le damos paso a las nuevas áreas que este examen icfes evaluara, en este Caso la prueba de Ciencias Naturales, es preciso dejar claro que no es muy nuevo, o pensar que lo que se ha estudiado se ha perdido, no, solo es la fusion de las pruebas deQuimica, Fisica y Biologia, el icfes es muy claro en esta parte


Estudiar ciencias sociales y competencias ciudadanas icfes

Bien como ya sabemos para el calendario A o segundo examen del año del icfes, este implemento unos cambios para irse, adaptándose y alinearse con los demás exámenes de estado que realiza el Icfes, bien Ahora nos despedimos del conocido núcleo común y le damos paso a las nuevas áreas que este examen icfes evaluara, en este Caso la prueba de Sociales y Competencias, es nuevo, un poco, ya que entra una nueva ares la de competencias ciudadanas que aplicaban en el icfes 5 y 9, es la fusión de las pruebas de sociales, violencia y sociedad, y la nueva integrante competencias ciudadanas, el icfes deja claro:

miércoles, 4 de junio de 2014

Herramientas para webmaster de google y blogger

Las herramientas para web master de google y bing es un tema al que llegara todo programador  web, webmaster o usuario escritor de blogs como blogger, ya que estos dos portales nos brinda la capacidad de vincular nuestros sitios aun mas con los motores de búsqueda, y darles control y optimizarlos, cuando conoces las  Webmaster tools, empiezas a conocer mas como trabajan los motores de búsqueda y lo que estos te aconsejan o piden de tu sitio para ayudarlo a posicionarse en  los buscadores, es realmente esencial para un programador o usuario que maneja un blog utilizar las herramientas para webmasters, estas son las que nos seguirán guiando a medida que nuestro blog crece, si usas las webmaster tools, podras no solo tener un sitemap de tu blog, también decirle a Google cuando quieres que actualice tu blog arreglar errores de datos estructurados, en fin muchas herramientas, Ahora te mostrare como utilizar estos pilares para usarlo en tu sitio web o blog, para ayudarlo a crecer.

viernes, 30 de mayo de 2014

Evitar descripciones duplicadas en entradas de blogger

Como evitar que las entradas tengan la misma descripción del blog o descripciones duplicadas

Hola en esta entrada te traigo una nueva solución a los problemas que trae blogger, estoy hablando de cuando las entradas tiene la misma descripción del blog, generalmente este problema se presenta a menudo en los blogs que están comenzando, yo también tuve que lidiar con las descripciones duplicadas, es por ello que traigo esta guía para ayudar a resolverlo,

jueves, 8 de mayo de 2014

Eliminar sombra en imagenes de blogger

Como eliminar las sombras en las imágenes de blogger


Vamos a quitar las sombras de la imágenes en blogger, Si has usado la plantilla filigrana, fantastico s.a o algunas de sencillo habrás notado unas molestas sombra que están en las imágenes o fotos que tengamos en el blog, a algunos blogueros esas sombras le gusta pero a otros (como yo) no les gusta ni un poco, pues bien te mostrare como quitar la sombra de las imágenes de blogger, dependiendo de la plantilla te mostrare como eliminarles el efecto sombreado

Agregar nuevos estilos de letra o fuentes en Blogger

como poner nuevas fuentes en blogger

Las fuentes que podemos agregar a nuestro blog le darán un toque de estética de mas calidad, ya que las fuentes preterminadas que usan como la arial, verdana, suelen ser casuales y poco atractivas, un  buen estilo de fuente o letra de tu blog podría encantar a tus lectores, dándole un mejor estilo a tu blog, aquí te mostrare la mejor manera de agregar fuentes nuevas a blogger, también se puede realizar en otras plataformas como wordpress, joomla u otros, si conocen bien a google fonts se darán cuenta de que tiene muchas formas de fuentes o tipos de letras, pero ademas de enseñarte como colocar estas fuentes te enseñare a optimizarlas para que no le quiten velocidad a tu blog.