Mostrar tus Tweets en tu blog (widget de Twitter)

Sabemos que hoy se obtienen visitas y tráfico por los motores de búsqueda y principalmente por las redes sociales. Es aquí a donde elige ir la mayoría de los usuarios en Interte en todo el planeta.Entonces qué mejor que tener parte de una de las redes sociales más visitadas en tu blog.
En esta ocasión elegimos Twitter, que nos ofrece un gadget que permite que tus lectores vean tus tweets de manera muy práctica.

Tener widget de Twitter en tu blog

1. Entra a Twitter e inicia sesión [twitter.com]
2. Ahora nos centramos en la parte inferior de la columna izquierda y vemos el link Recursos
   
3. Entramos en este link y nos guía a una página la cual le daremos click en "Widgets" [Click en imagen para ampliarla]
   
   
4. Luego iremos a una página en la que haremos click en la solapa "Mi sitio web" y luego cliqueamos en "Widget de perfil" [Click en imagen para ampliarla]
   

Una vez que hicimos este último paso, vamos a tener la siguiente pantalla:

En el que podemos modificar los colores en la solapa "Apariencia", modificar las medidas en la solapa "Dimensiones", o modificar la cantidad de tweets que querés que muestre en "Preferencias".
Cuando ya tengamos listo nuestro widget, vamos a hacer click en el botón "Finalizar & guardar código " [Ver imagen].

A continuación copiaremos el código que nos aparece [Ver imagen] y sigue los siguientes pasos, luego de la siguiente imagen.

1. Abrimos una pestaña o ventana nueva de tu navegador...
   
2. Vamos a Blogger
3. Diseño
4. Click en "Añadir un gadget"
5. Elegir el gadget del tipo HTML/Javascript
   
   
6. Pega el código copiado en Twitter
7. Guardar gadget → Guardar los cambios.

[Pasos para la anterior interfazBlogger → Diseño → Elementos de la página →
Click en "añadir un gadget" → Elegir el gadget en modo
HTML/Javascript→ Pegar código]

Menú con cajas de redes sociales para tu blog

Atención! Como bien indica luego, este truco se aplica en un gadget (sidebar)

Como ya dijimos en posts anteriores, las redes sociales ya son una parte inevitable para incorporar a la actualidad a tu blog.
Entonces qué mejor que incorporarlos a tu blog, haciendo así, que los visitantes puedan acceder a ellas mediante un diseño cómodo, elegante y fácil.
Este truco se puede ver claramente a la derecha de Teoría Blogger:

Enlaces de redes sociales

Para esto vamos a instalar el CSS en la plantilla yendo a Blogger.com → Diseño → Edición de HTML → buscamos la etiqueta </head> y arriba de este pegamos las siguientes fórmulas CSS:

<style>
/* LINKS DE REDES SOCIALES */
#seguir-redes-sociales {width:100%;float:right;}
.redsocialmenu {background:transparent;border:1px solid #898989;padding:10px;margin-bottom:10px;}
.redsocialmenu:hover{background:#CCCCCC;border:1px solid #898989;padding:10px;}
.redsocialmenu a {text-decoration:none;font-weight:bold;color:#555555;}
.redsocialmenu a:hover {text-decoration:none;font-weight:bold; color:#4CA5FF;}
.redsocialmenu img{vertical-align:middle;margin-right:5px}
</style>

Modificar el CSS[+]

Si los colores generales de las cajas no te gustan, puedes optar por cambiarlos de la siguiente forma:
En lo que está escrito en verde se puede poner transparent (está predeterminado) o puedes asignarle un código de color o el nombre. Esto sirve para cambiar el color al fondo de las cajas.
En lo que está escrito en rojo pasa lo mismo que en el anterior, pero en este caso se modifica el fondo de las cajas cuando un pasa el cursor por arriba de este.
En lo que está escrito en violeta vamos a poner una vez más el color que querramos para cambiar el color del link en el que vamos a entrar.
En lo que está escrito en amarillo vamos a poner otra vez el código o nombre del color para modificar el color del link al pasar el cursor sobre este.

---

Ahora vamos a insertar las cajas de los links de las redes sociales en un gadget, entonces vamos a Diseño → Elementos de la página → Añadir un gadget → Elegimos el tipo de gadget HTML/Javascript → Ahora copiamos el siguiente código HTML:

<div id="seguir-redes-sociales">
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyzoSHZOKTR0_rMZAT1os2R-SkRiOgmoglocLTsuUxWiK8zS9HlUs35duOqdrMzOB8V2CL-dHwOmdGybBeTzIWXC0JBFIxmxJyEi_zC5uEAPWprcdGOKdRgqWAQfZCow537gnxVVqgIdQ/s0/social-connect-facebook.png" title="Hazte Fan!" alt="Facebook" /> <a href="URL de página en Facebook">Facebook</a>
</div>
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Z5Fz__R2oUuyS_dxTPtImz-1H7G1014MZBDMomG7ZKpfNuioEbMCb_beBwkOUBqzWz8XIdFLXGE7sq2ULHxz47aaKMjdf3d6GRm4OdORm7JgTlqhswTWesDjB0Rir4XFJYvvxsEDljs/s0/social-connect-twitter.png" title="Sígueme!" alt="Twitter" /> <a href="URL de Twitter">Twitter</a>
</div>
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9IHn0uwL1gwzynncLWa3niJjktf3Jpkrd5ZqcPx0G47aBEIfVaQdx_HCMoM0QuOUvFlrB3iuQQNf1EdNlfw8Hzixk7gtH2j3Z8wnv8LeCMHa6KW-bi454h2-qdLzuJP212U2oijsO3aA/s1600/youtube-logo.png" title="Obsérvanos!" alt="Youtube" /> <a href="URL de usuario en Youtube">You Tube</a>
</div>
</div>

Como es posible deducir, en lo que está marcado en distintos colores va la URL de:

• La página en Facebook
• Tu usuario en Twitter
• Y tu canal en Youtube