6 may. 2016

Tutorial Blogger : Que Gadgets añadir en Blogger -C4-P2

  • 9:00
  • por
Gadgets imprescindibles para añadir en Blogger

Hola ¿Que tal?  En esta 2ª parte vamos a añadir gadgets indispensables para nuestro blog. Además te facilito un código para poner muy chulo tu apartado Sobre Mi.

No todos los gadgets que encontramos en Blogger son necesarios, de hecho la mayoría no son recomendables. 

Sin embargo existen algunos imprescindibles que ayudarán en la navegación de tus lectores y en las impresiones que estos/as tengan de tu blog.

No me lio más y te dejo con la clase y recuerda que al final del post tienes el vídeo-tutorial :)

añadir gadget entradas populares

 Vamos a Diseño
 Luego vamos a darle a Añadir Gagdet en el sidebar.
 Buscamos Entradas Populares y le damos clic.
 Aparecemos en la ventana del gadget con opciones para personalizar. Elegimos lo que queramos.

 Le damos a Guardar.
* Si lo queremos mover de sitio, solo tenemos que pinchar y arrastrar hacia donde lo queramos dejar.


   ACTUALIZACIÓN :    hasta hace poco no se podía editar gran cosa en este gadget en cuanto a diseño, pero gracias a Oloman, del blog Oloblogger , esto ya es posible.

De forma muy simple,  pero importante, dejaremos nuestro gadget de post populares personalizado y con una mejora en su imagen notable.

Te dejo el post que tiene la explicación sobre Cambiar el tamaño de las imágenes en el gadget de entradas populares de Blogger y un vídeo para que te resulte más sencillo :)







añadir gadget sobre mi

 Repetimos los 3 primeros pasos del anterior apartado pero esta vez buscamos HTML/Javascript.
 En el Título escribimos Sobre mi o aquello que queramos.
 En el cuadro grande de texto, pegamos el siguiente código y modificamos lo que está en rojo por nuestros propios datos.*Solo lo que está en rojo, cuidaros de no eliminar las comillas. (si no sabes copiar tu dirección de imagen, lo que está en rojo que pone URL de tu imagen , mira este vídeo)

<div><center><a href='LA URL DE TU BLOG'><img src="URL de tu imagen" /></a></center></div>
<div style=''><p  style=" word-wrap: break-word; clear: both; text-align: justify; color:#8fb59e; font-size:10px;letter-spacing:2px;font-family: 'Arial';text-transform:uppercase; line-height:130%;padding-top:-30px;">TEXTO que quieras redactar</p> </div>
<div style='padding-top:15px;padding-bottom:10px;'><center><a href='URL DE TU FACEBOOK'><img src="https://4.bp.blogspot.com/-q06XCRlFTnI/VvwvWrXIFGI/AAAAAAAAFa0/elgVWvhqT7ArC3RKubZm9AI1btLhJ5NfA/s1600/FACEBOOK-azul.png" title="Facebook"/>
<a href='URL de tu Twitter'><img src="https://3.bp.blogspot.com/-KAedXhvU40s/VvwvXJAwLXI/AAAAAAAAFbI/YXiUwHRLOW0vErj_SgNUuC4wtChzG62mA/s1600/TWITTER-azul.png" title="Twitter"/></a>
<a href='URL de tu Instagram'><img src="https://2.bp.blogspot.com/-WzB2kUx0Tw4/VvwvWi3cv-I/AAAAAAAAFa8/l05iu94cgxASrB79g75jGisi08LW0ut0w/s1600/INSTAGRAM-azul.png" title="Instagram"/></a>
<a href='URL de tu Pinterest'><img src="https://3.bp.blogspot.com/-_twn5_vkMyA/VvwvXJNKyrI/AAAAAAAAFbE/lmvF4VuL4LY-OyaiW0OVu-4mKy1VkCcrQ/s1600/PINTEREST-azul.png" title="Pinterest"/></a>
<a href='URL de tu Google+'><img src="https://4.bp.blogspot.com/-LVDC0EXksFU/VvwvWshSDsI/AAAAAAAAFa4/j6NUZf9lSDgdsqqOdjXnxk21ONxDYrCvw/s1600/GOOGLEPLUS3-azul.png" title="Google+"/></a>
</a></center></div>

 Lo que está en fucsia se puede personalizar de esta manera: 

color:#8fb59eel color del texto.

font-size:10px;  mide el tamaño de las letras.

letter-spacing:2px;  mide la distancia entre cada carácteres/letras.

font-family: 'Arial'; Tipografía o Fuente de la letra.

text-transform:uppercasecambia a mayúsculas, lowercase cambia a minúsculas y si lo eliminas saldrá tal cual lo escribas.

line-height:130%; este porcentaje mide la distancia entre líneas/frases.

 Una vez preparado lo pegamos en el cuadro del gadget que hemos abierto, el HTML/Javascript y le damos a Guardar.


Si te fijas solo hay 6 etiquetas div 3 que abren <div obien <div> y 3 que cierran </div> 
Cada contenido dentro de esas partes es una parte del Sobre Mi , en este código que te facilito están en este orden:

<div> IMAGEN</div>

<div TEXTO </div>

<div> REDES SOCIALES </div>
Si lo que quieres es cambiar de posición los elementos, solo tendrás que cortar desde el <div> que abre hasta el </div> que cierra del elemento que quieres mover y pegarlo encima o debajo del elemento que prefieras. Cualquier duda me dejas un comentario ;)

añadir gadget suscripción por e-mail

 Repetimos los 3 primeros pasos del primer apartado pero esta vez buscamos Seguir por correo electrónico.

 Cambiamos el Título si queremos.

→ Guardamos y listo.

→ Si quieres cambiar su posición en el sidebar solo tienes que hacer clic y arrastrar a donde quieras.

vídeo-tutorial


fin de la clase
¿Ya se ha terminado? Pues sí, otra clase más completada!! Ya estamos más cerca de terminar.
En la siguiente clase veremos cómo eliminar Suscribirse a entradas (Atom) ¿Qué te parece? 
Haz clic en la siguiente imagen para ver todas las clases del curso gratis :)
Curso gratis paso a paso para crear un blog y diseñarlo a tu gusto con videotutoriales

Blogger paso a paso Mónica Lemos

Me apasiona la educación, en su sentido más amplio. Son muchos mis centros de interés, por ello creo que ser Blogger o Youtuber es una oportunidad de compartir lo mejor de cada persona al mundo. Mientras estoy intentando evolucionar 'educadamente' en esta 'loca' sociedad. Desde este rincón puedo ayudarte con asesorías y servicios ¿Te animas?

Comenta dudas, opiniones...



Ya han comentado 27 veces:

  1. Buen tutorial ayuda a que nuestros lectores sepan quienes somos y por cuales canales podemos conectar.

    ResponderEliminar
    Respuestas
    1. Hola Mariana, exacto!! de eso se trata, es algo super importante, verdad?
      Un beso y gracias por pasarte! :)

      Eliminar
  2. Tienes un blog precioso, por aquí me quedo :D

    ResponderEliminar
    Respuestas
    1. Muchas gracias !! Bienvenida!! ;)

      Eliminar
  3. lo máximo justo lo que buscaba :D cuando termine de editar mi blog te pasare el link para que veas como quedo :D

    ResponderEliminar
  4. Holaaa! me ha gustado mucho tus tips y vengo en busca de otro, a cerca de la foto, que pongo en mi area de "Sobre Mi", la cual haga lo que haga no quiere aparecer!! AYUDAAA

    ResponderEliminar
    Respuestas
    1. Hola! Debes copiar bien la URL de la imagen y seguir bien los pasos.no deberías tener problema!

      Lo has solucionado ya?
      Muack?

      Eliminar
  5. Me encanta tu blog, a mi tambien pe sucede lo mismo, lo imagen no se ve..

    ResponderEliminar
    Respuestas
    1. Lo has solucionado? Solo te puedo decir lo mismo que a la anterior chica
      Un saludo!

      Eliminar
  6. Muy Buenas!

    Me ha salido a la primera. Y eso que lo he intentado con otros gadgets y jamás me salía. Enhorabuena! Pero me gustaría que el texto no esté justificado si no alineado a la derecha porque crea unos espacios muy feos.

    ResponderEliminar
    Respuestas
    1. Genial Maria José!

      Pues es muy fácil, en vez de "justify" pones el tipo de alienación que quieres

      Rigth (derecha) o Left (izquierda)

      Muack! Gracias!

      Eliminar
  7. Anónimo5/30/2017

    hola estoy teniendo problemas al poner la foto .... me sale demasiado grande y no se como reducirla.

    ResponderEliminar
    Respuestas
    1. Puedes probar a redimensionar la imagen y volverla a subir al blog.
      Un saludo

      Eliminar
  8. el truco de la imagen es genial!
    me encanta!

    ResponderEliminar
  9. Anónimo7/19/2017

    Hola! Me encantaria responder tu encuesta de Fin De Curso pero no lo encuentro. ¿Me podras pasar el link?

    ResponderEliminar
    Respuestas
    1. Hola, las encuestas están cerradas, ya que no creo que continúe con el blog, por el momento.

      Muchas gracias por el interés :)

      Eliminar
  10. Anónimo8/03/2017

    Esta página es de WordPress o de blogger porque esta muy bonita?

    ResponderEliminar
    Respuestas
    1. Es de blogger, plantilla de Maira Gall adaptada por mi :)
      Muack

      Eliminar
  11. Anónimo8/03/2017

    Hablame de tu experiencia con el blog porque he escuchado muchas desventajas al utilizar blogger?

    ResponderEliminar
  12. Me está encantando tu curso. Literalmente me estás salvado! Me llevo fatal con Blogger y pierdo la paciencia porque a veces siento que todo me sale mal y no hay manera de que me funcione... pero me estás ayudando muchísimo y quiero darte las gracias.

    Justo en esta parte del curso hay algo que me ha costado entender y es dónde te habías ido para cambiar el código fuente... he tenido que ir en el vídeo para adelante y para atrás unas cuantas veces hasta que me di cuenta de que estabas en "Tema" ("plantilla" en tu vídeo) y ahí podía editar el html. Además al usar un Mac las cosas son un pelón distintas... pero me voy apañando.

    Un millón de gracias!!

    ResponderEliminar
    Respuestas
    1. Muchas gracias! YaaY, es que ha habido cambios ene Blogger, de todas formas funciona igual!

      Mucho ánimo la paciencia es imprescindible 😊

      Eliminar
    2. Hola! No sabes que gran ayuda me estas dando para entender como funcionan las cosas!
      Sinceramente tus vídeos resultan sencillos y muy didácticos para quienes, al menos en mi caso, no cazamos ni una.

      ¿Puedo consultar donde subes las fotos para conseguir luego el URL?

      Muchas gracias de antemano!

      Eliminar
    3. Hola Cccy, en el post pone que mires un vídeo donde lo explico. Generalmente yo las guardo en una entrada que no se publica nunca y tampoco se puede eliminar ni nada. Entonces en edición con cargo la imagen y luego le doy a copiar dirección de imagen. Y listo!

      Muchas gracias por tus palabras!! me ayudan mucho!
      Ánimo con eso!
      Saludos

      Eliminar
  13. Hola Mónica! diosos tus cursos, por cierto, de no ser por ellos prrobablemente no tendría blog alguno.
    Tengo una pregunta, no sé si me puedas ayudar un poco, en caso de que en el wadget de post populares quiera que salga únicamente la imagen, sin texto, ¿cómo le podría hacer?
    Y otra cosita, me he fijado que en varios blogs, el wadget de etiquetas, encuadran las palabras, y se ve más limpio de esa manera que en vez de tenerlo en lista u nube ¿no sabrás de casualidad como hacerlo?
    Gracias por adelantado, y disculpa las molestias!

    ResponderEliminar
  14. Como pongo notifiaciones push en blogger

    ResponderEliminar