¿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 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, aumentaremos 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 de velocidad 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 pagina web o un blog es en verdad fundamental, y si no me crees déjame explicarte:

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.