¿QUIERES LLEVAR TU BLOG AL MAXIMO?
Inovablog es un Blog hecho en Blogger para brindarte los Mejores Tutoriales de Calidad,
Trucos Y Soluciones junto a otros Gadgets para ayudarte a enriquecer o iniciar tu Blog.
¡Tenemos listo lo que necesitas para empezar!
Pasos Basicos
Personalizacion y Trucos
Optimizacion
Te avisaremos cuando hay nuevos trucos
¡No te pierdas ningun contenido, recibe directamente en tu correo los temas recien publicados!
LO MAS RECIENTE EN INOVABLOG

inovablog

2017/11/17

Botones para Compartir el Blog en Redes Sociales

Como poner botones para compartir en redes sociales  nuestro blogger, ahora que las redes sociales cada vez están haciendo mas peso sobre los motores de búsqueda, es esencial hallar una forma de compartir, nuestro blog de blogger o una web, ademas de eso, regar nuestra url por las redes sociales ayuda a aumentar el trafico de visitas en nuestro sitio, una buena forma de lograrlo es insertar iconos o botones de estas redes sociales en el blog, para que los usuarios que interactúan en el, puedan compartir nuestro enlace, y así se difunda. No confundir, lo que mostrare en esta entrada es para compartir una URL especifica o la pagina principal, si lo que estas buscando es colocar botones para compartir las entradas o post visita esta entrada de botones para compartir las entradas de blogger, por otro lado si lo que quieres son iconos tipo sígueme en tu blog sigue esta entrada para colocar iconos para seguidores, no siendo mas, basta de parloteo y manos a la obra.


Botones para compartir en Redes Sociales

Tengo listos estos botones (como los de la imagen), para agregarlos a tu blog, solo debes seleccionarlos y pegarlos en un HTML/Javascript. Si usas dispositivo movil o no quieres copiar el código, usa el botón rápido que dice Añadir a Blogger, pero recuerda que debes cambiar lo que dice URL-BLOG por la URL de tu blog o pagina. Nota el botón de facebook no se vera hasta que le coloques la URL de tu blog.

Si usas wordpress: copia el código -> ve a Escritorio-> Apariencia-> Widgets -> elige el widget cuyo nombre es ‘Texto’-> y pega el código.




O también este diseño estilo botón pequeño con contador al lado del botón, como en el caso de arriba puedes agregarlo mas rápido o desde un dispositivo movil con el boton Añadir a Blogger, recuerda cambiar lo que esta en color rojo por la URL de tu Blog. Nota el botón de facebook no se vera hasta que le coloques la URL de tu blog.

 compartir en Redes Sociales



También les presento estos estilizados iconos sociales para compartir el blog en redes sociales como los de arriba, solo que en estos incluye pinterest y likedin, a diferencia de los anteriores, estos iconos no generan carga adicional, (es decir no cargan los scripts de los botones) son livianos y están optimizados al 100%, al dar click para compartir el blog se abre una pequeña ventana POP Up! y después de compartir en enlace se cierra, ademas de que se tornan circulares y con una leve sombra al pasar el cursor sobre ellos, muy buena opción para los que prefieren este tipo de estilo, puedes ver como funcionan a continuación, Recuerda cambiar donde dice URL-BLOG por la dirección de tu blog.

compartir en facebook compartir en google+ compartir en twitter compartir en pinterest compartir en likedin





Como no incluir por lo menos el mismo estilo de botones pero para los usuarios que prefieren algo un poco mas pequeño literalmente, por ello también tengo estos bonitos iconos sociales para compartir, tienen las mismas funciones que los anteriores, simplemente son un poco mas pequeños, aunque no son los mismos, son iconos diferentes a los otros ya que están hechos de este tamaño para una mejor optimizacion, puedes verlos en acción a continuación. Recuerda cambiar donde dice URL-BLOG por la dirección de tu blog.

compartir en facebook compartir en google+ compartir en twitter compartir en pinterest compartir en likedin






Pero eso no es todo para los bloggers que no les gusta el diseño cuadrado les tengo este impecable diseño de Inovablog, tipo iconos redondos con rotación al pasar el mause por ellos, una muy buena forma para cautivar a tus usuarios y motivarlos a compartir el blog, tiene la misma función que los anteriores solo que el estilo es diferente, están de impacto y recuerda cambiar lo que dice URL_BLOG por la dirección de la pagina que vas a ponerle.

compartir en facebook compartir en google+ compartir en twitter compartir en pinterest compartir en likedin



Botones, compartir el blog, compartir en redes sociales, compartir sitio en facebook, compartir blog en twitter, boton para compartir, publicar en redes sociales, compartir tu blog en redes sociales, agregar botones de redes sociales, enlace para compartir en facebook, compartir mi blog en redes

4 plantillas estilo facebook para blogger

E aquí 4 hermosas plantillas con diseño estilo facebook para los usuarios de blogger que amen esta red social, consta de 4 plantillas muy similares a la pagina facebook para integrar en tu blog (blogger) . algunas tendrán que hacerles alguna configuración desde el html pero bien vale la pena hacerlo, bien sin mas preámbulo te las presento, plantillas facebook para blogger.
plantillas estilo facebook para blogger

2017/11/15

Como Poner Metatags en Blogger

Bien, vamos a agregar MetaTags en nuestro blog o pagina, para ello les presento un generador de etiquetas meta, como también pueden ser conocidas, las cuales son muy importantes para el SEO de nuestros sitios, consta de un formulario en el que  llenas los campos y te genera un código HTML para poder integrarlas en el blog, tu pagina de wordpress o cualquier otro sitio que tengas, hay algunas diferencias leves en cuanto a si funcionan para blogger o sitios en general, pues mi web va dirigida para aplicar específicamente sobre blogs de esta plataforma, pero no habrá mucho problema, también actualizaremos algunas etiquetas esenciales y de paso nos evitaremos un problema con la etiqueta Descripción (descripciones duplicadas).

metatag meta tag

2017/11/14

Botones Sociales para Compartir las Entradas de Blogger

Los botones para compartir entradas del blog en redes sociales, son la llave maestra para cualquier bloggero (avanzado o novato) nada mejor que un usuario al que le gusto una de tus publicaciones pueda compartirla con sus amigos o conocidos, aquí es donde entras los botones sociales ya que ayudan a difundir el contenido de nuestras publicaciones y las mismas atrayendo mas publico y ahorrándonos trabajo de difucion del blog, siendo esto muy importante ahora que las redes sociales tienen un peso mayor sobre los buscadores. En esta entrada te enseñare como colocarlos en tu blog, mas que todo en las entradas individuales, por experiencia propia usaremos los mas populares, como lo son el de Me gusta, Twittear y +1, pero igual tendremos de los otros, también este truco sirve para wordpress y otros sitios web, no confundir, si lo que estas buscando es colocar iconos tipo sígueme en tu blog sigue esta entrada para colocar iconos para seguidores por otro lado si quieres los botones pero para una URL especifica visita esta entrada de botones para difundir la pagina principal, basta de parloteo y manos a la obra.

Botones Sociales para compartir entradas Blogger

2017/11/13

Envíar Pagina a Google, Yahoo y Bing, Motores de Búsqueda

Bien, en esta entrada vamos a enviar nuestra URL del Blog o pagina a los motores de búsqueda Google, Yahoo y Bing, que son los principales, tambien hay muchos otros como yandex, ask, entre otros, pero por mi parte dejare la indexacion de estos para despues, ya que estadisticamente los principales que mencione son los mas usados, si tu pagina es nueva o notas que aun no tiene la presencia que tanto quisieras en los resultados de búsqueda, talvez se deba a su ausencia en los dichos motores, entonces sera importante añadir la web a los indices de buscadores para darlo de alta, ya que así aceleraremos la indexacion de este por parte de ellos, ahora veremos los 3 sitios para sugerir  los enlaces de nuestros blog o webs.

2017/11/12

Menu que Cubra toda la Pantalla (Fullscreen)

Hola gente, esta vez traigo un tutorial para colocar un menu que cubra toda la pantalla en nuestro blog, si ya lo notaste cambie el diseño del blog, pues estaba un poco cansado con el anterior aunque no estaba nada mal a mi parecer, aprovechando, puse una navegación tipo fullscreen, este le dio un respiro fresco a mi pagina, solo tienes que presionar las 3 lineas que están en la esquina (icono de la hamburguesa  ) para desplegarlo, saldrá desde la esquina izquierda, es una gran ventaja tener uno de este tipo, gracias al icono de la hamburguesa que cada vez es mas frecuente en tabletas y smartphones, así pues , este se adapta a toda la pantalla y muestra las secciones.

Cuando alguien visite el blog y vea la figura, sabrá exactamente que se trata de un menu, tiene un estilo fresco, simple pero muy atractivo, por eso no cuenta con submenus, si lo que querías era uno con desplegables pues tendrás que buscar por otro lado, por mi parte no necesito los submenus, pues cada uno pertenece a una pagina principal, bueno, ya con este desplegado, para cerrarlo solo debes dar click en símbolo x que aparecerá en la esquina, dejando la palabrería de lado, mira esta demostración de su funcionamiento, presionarlo y mira como funciona!

 ≡
Pues que te pareció? genial no? bien eso es lo te tendremos en el blog, un menu que ocupe todo el ancho y alto de pagina, ademas de lo visto el código para implementarlo es bastante corto, pero lo mejor es que es responsive! osea que se adapta a los dispositivos móviles, manos a la obra.

Como Hacer el Responsive Menu Fullscreen?

Primero tenemos que tener nuestro código HTML, (esto lo haré orientado a blogs de blogger, si usas wordpress o cualquier otra plataforma pues tu ya entenderás como implementarlos), en donde estarán las listas o secciones, es donde colocaremos los enlaces, usaremos este código:

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="enlace1">Pagina1</a>
    <a href="enlace2">Pagina2</a>
    <a href="enlace3">Pagina3</a>
    <a href="enlace4">Pagina4</a>     
  </div>
</div>
<div id='spani'>
<span onclick="openNav()">&#160;&#8801;</span></div>

Para colocarlo en el blog:

  1. Copia el código que te mostré.
  2. Nos vamos a a diseño 
  3. Añadir un gadget
  4. Elegimos  uno del tipo HTML/Javascript 
  5. Pega los códigos que copiaste 
  6. y guarda.
Con esto tendremos lo primero, ahora vamos a agregar los estilos para darle forma:

.overlay {
height: 100%; /*Alto del menu*/
width: 0;
position: fixed; 
z-index: 1; 
left: 0;
top: 0;
background-color: rgba(0,0,0, 0.9); /*Color de fondo*/
overflow-x: hidden; 
transition: 0.5s; /*Tiempo que tarda el despliegue*/
}
.overlay-content {
position: relative;
top: 25%; /*Altura de enlaces desde el top de pantalla*/
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 46px; /*Tamaño texto de enlaces*/
color: #818181; /*Color de enlaces*/
display: block; 
transition: 0.3s; /*Tiempo hover de enlaces*/
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1; /*Cuando pasa el raton en un enlace*/
}
.overlay .closebtn {
position: absolute;
top: 20px; /*Altura de la X*/
right: 45px; /*Posicion de la X*/
font-size: 60px; /*Tamaño de la X*/
}
#spani span{
font-size:60px; cursor:pointer;font-family: "Times New Roman", Georgia, Serif;
}

  • Ve a Personalizar
  • En Avanzado 
  • Busca en lo ultimo Añadir CSS 
  • Pega el código de arriba
Otra forma mas manual es:
  • Ve Plantilla 
  • Editar HTML 
  • busca con CTRL+F ]]></b:skin> y pegalo justo arriba de este y guarda los cambios.
Bien, los estilos están listos para terminar con todo haremos lo siguiente, colocaremos un trozo de script que se encargara de la función de despliegue.

<script type='text/javascript'>
function openNav() {
    document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}</script>

  • Copia el código
  • Ve Plantilla 
  • Editar HTML 
  • Busca con CTRL+F </body> y pegalo justo arriba de este 
  • Guarda los cambios.
Con esto ya tenemos lista nuestra navegación que ocupa toda la pagina!!

Configuración del Menu: 

En el código HTML: el texto en color verde es la dirección que se abrirá al presionar una sección, lo que tiene que hacer es cambiarlo por la URL que quieras que abra, lo de color rojo es el nombre de la pagina que abrirá, cámbialo según lo que quieras mostrar.

Si quieres agregar otro link solo debes agregar este código debajo de cualquiera de los otros enlaces:

<a href="enlace5">Pagina5</a>

En el CSS: hay etiquetas de color rojo mostrando algunos atributos como el tiempo de despliegue, tamño de letra etc, cambia estos valores si quieres para ir probando y personalizando tu menu fullscreen a tu gusto

En el Script: dejalo asi,

BONUS Si quieres abrir el menu de arriba a bajo

El despliegue es de izquierda a derecha, pero si en ligar de eso te gustaría mas que lo hiciera de arriba a abajo solo tienes que hacer esto:

En la parte de CSS en el primer fragmento intercambia los valores de height: 100%; y width: 0; de manera que queden height:0; y width:  100%;
Y en la parte de Script en vez de style.width ponemos style.height y listo, eso sera todo.

Te ha gustado este truco? puedes ver su versión original en w3schools, si es así agradezco lo compartas con tus amigos, no siendo mas nos estamos leyendo!

2017/11/11

Acelera tu Blog, Aumenta la Velocidad de Carga


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, 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 para aumentar su carga a lo que mas podamos, si has venido aquí has hecho bien, te mostrare los consejos básicos y las técnicas que uso para hacer que mi blog vuele a la hora de cargar, bueno no exagero, en una escala de 0 a 100 con este ultimo el mejor de los resultados, según google page speed, mi blog estaría de 95 a 97, pues con los anuncios y google analytics se me baja un poco el promedio, sabes, la velocidad de una sitio web es en verdad fundamental, y si no me crees déjame explicarte que puede acarrear que tu sitio sea lento.



¿Que ocasiona la carga lenta?

Las consecuencias de tener un blog con velocidad lamentable, noo son muchas cosas pero desencadenan una manada de problemas si lo piensas.

  1. Hará que los usuarios se cansen de esperar y se vayan
  2. Tiene mal posicionamiento en los buscadores
  3. Causara una perdida de visitas significativa y/o de ventas

Bien no cansado con eso ahora te doy a disposición estos servicios para que analices y observes cuanto se demora en cargar tu blog. Prueba: Google page speed  este servicio excelente de google analizara nuestro sitio y ubicara los dolores de cabeza, lo mejor es que funciona para el blog en computadoras como también para móviles :), en este servicio lo esencial seria tener un puntaje de mas de 93 tanto en computadoras como en móviles

Otra muy buena opción, prueba con Gtmetrix este es otro excelente servicio para ver cuanto se demora en cargar nuestras paginas, aquí al igual que el otro ya mencionado te dice que es lo que tienes que arreglar para mejorar la velocidad de tu blog, lo esencial serial tener un puntaje de A A

Pero lo malo es que ambos ofrecen una información que para muchos bloggeros es muy complicada de aplicar porque no son expertos en el tema o simplemente blogger no lo permite. Bueno basta de cháchara manos a la obra!

Principales problemas de velocidad en los blogs:

Ahora como mayormente mis guias van dirigidas para blog de blogger, te nombrare los principales problemas que tienen estos en cuanto al problema de la carga lenta, y la verdad lo reconozco, cuando recién empece en blogger yo también era de los que colocaban un montón de cosas pensando que se vería bonito o decorado y colocaba esas famosas "mascotas", y así sucesivamente mi blog se convertía en un "blog caracol".

  1. Suelen tener muchas imágenes
  2. Exceso de anuncios
  3. Mascotas en el blog 
  4. Efectos que les hayan agregado que utilizan librerías externas
  5. Contadores de visitas con formas diferentes
  6. Calculadoras, relojes, etc.
Pues no sigo porque la lista llegaría hasta el infinito y mas allá, no mentira estoy exagerando :)

Consejos para que tu blog cargue mas rápido

Antes de empezar, daré algunos consejos prácticos que puedes emplear sin problemas que ayudaran a livianar tu sitio. esto pues si no eres un poco conocedor de blogger, te puede resultar algo complicado aplicar los últimos 4 temas, pero no hay problema, de la mano lo haremos todo bien.
  1. Ambos sabemos que esos relojes online no son necesarios.... 
  2. Sus primos los calendarios también deben irse :(
  3. El 90% de los usuarios no juegan con las mascotas que tienen en el blog como perros, ratones, peses, pájaros y cualquier otro animal animado
  4. Esa imagen de cabecera esta muy grande, piensa en reducirla o sustituirla con texto
  5.  Ese juguete que sigue al cursor es entretenido pero no sirve, como ojos que se mueven con el mouse, etc.
  6. La mayoría no escucha tu música porque ellos prefieren escuchar la que tienen en el computador, ese reproductor de mp3 es molesto y muy lento
  7. Su prima la emisora FM o cualquiera también vuela de aquí
  8. Las frases o chistes del día estorban y alentan
  9. Ultimas noticias para estar bien informado, No gracias no lo veo...
  10. Las imágenes de fondo son cheveres, si es necesario considera cambiarlas por un fondo de color
  11. Si usas anuncios, prueba otras maneras para que no tengas muchos
  12. Esos gadgets para buscar en wikipedia o youtube o no se que cosa, nadie los usa 

Herramientas de Blogger

Mostrar menos entradas en el blog

Bajar el numero de entradas sera favorable para aligerar al blog
  1. Muestra menos entradas en la pagina principal
  2. accede a blogger
  3. dirígete a configuración
  4. en entradas y comentarios
  5.  y en donde dice:


  6. y escoja un numero cómodo como 5 entradas

Uso de Saltos de linea para mejorar la velocidad

Esto hará que cada entrada muestre solo un trozo de la entrada y deja Un "LEER MAS" para ver la entrada completa

  1. cuando este en una entrada a punto de publicar,  en la barra de herramientas de arriba busca este icono sALTO PAGINA BLOGGER
  2. y mira en que punto de la entrada quieres cortar, esto hará que muestre solo la parte superior que decidiste mostrar si miras mi entrada principal veras que solo muestra una parte de ella en ves de toda la entrada completa. 


Quitar la navbar

la navbar esa barra que en verdad no sirve para nada, es una de las causas que mas demoran la velocidad el blog, solo tienes que ir a diseño y busca el gadget "barra de navegación" y desactivarlo

mejora la velocidad de tu blog


Wow empezamos quitando relojes y ahora terminamos aplicando cambios realmente difíciles o confusos, solo si eres un bloguero bien comprometido, quieres aventurarte a un poco mas o quieres sacarle el maximo de velocidad al blog sigue estos consejos, pero antes, yo creo que ya con los consejos anteriormente dichos tu blog es ya un poco mas rápido como el promedio, si sabes usa estos métodos si no, no lo hagas, y si quieres experimentar, crear una copia de seguridad

Acelerar carga de imágenes

Tema importante si no puedes deshacerte de las imágenes o son necesarias aplica optimizacion de imágenes y cada ves que vayas a subir una imagen a blogger utiliza el TinyPNG este servicio elimina el peso innecesario de la imágenes sin perder calidad. recuerda subir las imágenes a picasa.

Redimensionar la imagen

Antes de subir la imagen al blog, es recomendable si es necesario cambiarle es tamaño, solo si es necesario, por ejemplo: tenemos una imagen que vamos a usar en una entrada y su tamaño es de 3000x2500px, joder... es muy grande! si la subimos asi al blog, cuando cargue se va a demorar una eternidad, por eso es pecado usar imágenes tan grandes si la vamos a usar en un espacio pequeño, si es el caso de los wallpapers pues no importa esta recomendación, para ver que tamaño tiene tu imagen solo tiene que darle un click sobre ella o buscar la información de la imagen como se ve continuación:

Optimizar las Imágenes con seo
Y para cambiarle el tamaño ya deben hacer uso de programas como Paint o Photoshop entre muchos otros, también hay paginas online que cambian el tamaño de imágenes, pero muchas de estas también les quitan calidad o resolución, si es el caso de usar una de estas la mejor que recomiendo es Pixlr.



Reducir peso innecesario

Muchas imágenes guardan meta datos innecesarios los cuales se pueden "reciclar" o eliminar, esto para hacer que tenga un peso mucho menor, lo cual es conveniente tanto para la carga de la imagen que implique también a la del blog mismo. por ejemplo: podria tener lista una figura para una de mis entradas, pero cuando me fijo en la información, me doy cuenta de que pesa 105KB (si no sabes que significa son las unidades de medida informática, no hay problema sigue leyendo), podría sin problemas ahorrarme un gran porcentaje de peso y dejarla en unos cómodos 21,1 KB, una reducción considerable, para ello usaremos una herramienta excelente que recomiendo, el servicio online TinyPNG, perfecto para PNG, JPEG (formatos de imagen) entre otros, y en cuanto a los GIF recomiendo Gfycat muy bueno, sin duda dejaran tus imágenes super livianas sin perdida de calidad.

Uso de CSS Sprites

Eliminate render-blocking JavaScript and CSS

Entre otras palabras este truco permitirá quitar la carga adicional de javascript y css innecesarios que tienen los blogs de blogger, es decir cuando el blog esta cargando, también lo hacen códigos que no son usados en el blog, este paso es un poco complicado pero muy eficaz, yo diría que es el mas eficaz que hay para acelerar el blog, para mayor detalle entra en esta entrada donde explico todo sobre Eliminate render-blocking JavaScript and CSS.



2017/11/10

Crear un Menu en Blogger

Hola, vamos a crear un menú de paginas en blogger, si has visto en otras paginas o blogs, veras que tienen un  menú horizontal con secciones, pues bien esas son las paginas y en este articulo veremos como poner un menú para tu blogger. Recurada sigue bien los pasos y muy pronto tendrás tus propio menú de paginas en tu blog, mas fácil.. imposible!. Algo clave que te tengo que decir es que el menú que vamos a hacer es del gadget de la misma plataforma de blogger, ya que también se puede hacer un menú por aparte, es decir, instalar un menú en blogger hecho por nosotros mismos, pero este no es ese caso, el porque menciono lo del menú que nosotros podemos hacer, es porque el menú de blogger no admite o todavía no tiene un menú desplegable o con subsecciones, ejemplo al seleccionar una de las opciones del menu despliega mas opciones como el mio. Después de haber hecho el menú puedes personalizarlo aqui.

menú de paginas blogger

Google fonts: Pesonaliza tu blog con una fuente

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.