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
  

Marquesinas al estilo Teoría Blogger

Estilo T.B.

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% rgb(32, 134, 202); color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Estilo T.B.</marquee></p>

Blanco y negro

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% white; color: black; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="3" truespeed="1">Blanco y negro</marquee></p>

Negro y blanco

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% black; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Negro y blanco</marquee></p>

Azul

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% blue; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Azul</marquee></p>

Rojo

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% red; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Rojo</marquee></p>

Verde

<p style="border: 1px solid black; padding: 10px; background:green; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Verde</marquee></p>

Naranja

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% orange; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Naranja</marquee></p>

Amarillo

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% yellow; color: black; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Amarillo</marquee></p>

Violeta

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% blue; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Violeta</marquee></p>

Fuccia

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Fuchsia; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Fuccia</marquee></p>

Dorado

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Gold; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Dorado</marquee></p>

Marrón

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Brown; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Marrón</marquee></p>

Morado

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Purple; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Morado</marquee></p>

Plateado

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% silver; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Plateado</marquee></p>

---

Agregar una caja marquesina en mi blog

Para hacerlo, simplemente debes copiar el objeto deseado y puedes pegarlo en:

• Una entrada: Blogger → Creación de entradas → Nueva entrada → Solapa Edición de HTML.
• Un gadget: Blogger → Diseño → Elementos de la página → Añadir un gadget → HTML/Javascript.
  

Personalizar tu caja

Para crear tu propia caja con los colores que quieras, cambia los códigos marcados en colores:

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% rgb(32, 134, 202); color: rgb(255, 255, 255); font-family: arial,helvetica; font-size: 14px; font-weight: bold;"><marquee scrolldelay="30" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">Texto phttp://www.blogger.com/img/blank.gifara exponer</marquee></p>

Modifica el código en color rojo para asignar el color del fondo.
Modifica el código en color verde para asignar el color de la letra
Modifica el texto en color azul para asignar un texto que quieras que sea expuesto.

Video explicativo

Ver video en Teoría Blogger videos | Ir a Teoría Blogger videos