ESCAPARATE DIGITAL 2019: MENÚ VERTICAL DE ICONOS SOCIALES PARA BLOGGER

MENÚ VERTICAL DE ICONOS SOCIALES PARA BLOGGER.

El menu que os propongo en esta ocasion no es para enlazar las secciones de vuestro blog o web, es para enlazar vuestras cuentas en las redes sociales.

Como podeis ver, esta realizado con CSS3 y cuenta con 5 botones con los colores caracteristicos de cada red para conectar con vuestro Twitter, Google+, Facebook, Youtube y Feed RSS.

Esta diseñado esencialmente para ponerlo en la sidebar y se ajusta al tamaño de esta automaticamente.

Para añadirlo en vuestro blog o web, tan solo teneis que copiar el codigo de abajo y pegarlo donde querais mostrarlo.

Modo de Instalación:

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

Despues de haber insertado el código, un clic en "Guardar"

Recordad que tenéis que poner las URL de vuestras cuentas y la de vuestro feed donde esta indica

<div class="menusocialvertical"><ul><li><a href="https://URL DE TU TWITTER" class="twitterboton" target="_blank">sigueme en Twitter</a></li><li><a href="https://URL DE TU GOOGLE PLUS" class="googleboton" target="_blank">añademe a Google+</a></li><li><a href="http://URL DE TU FACEBOOK" class="facebookboton" target="_blank">siguememe en Facebook</a></li><li><a href="http://URL DE TU YOUTUBE" class="youtubeboton" target="_blank">mirame en YouTube</a></li>
02
<li><a href="http://URL DE TU FEED RSS" class="rssboton" target="_blank">suscribete al RSS</a></li></ul></div>
03
<style>
04
.menusocialvertical { width: 100%; margin: -10px;border:5px solid #000000; }
05
.menusocialvertical ul { margin: 0; padding: 0; }
06
.menusocialvertical ul li { list-style:none; padding: 0; text-transform: none;-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
07
-moz-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
08
box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8) inset;-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8) inset;box-shadow: 0px 0px 10px rgba(0,0,0,.8); inset}
09
.menusocialvertical ul li a { color: #fff !important; display:block;font-family:verdana;font-weight:bold;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; }
10
.menusocialvertical ul li a:hover { color: #ffffff !important;opacity:0.5; background-color: #cdcdcd; -webkit-transition: all 0.5s ease;
11
-moz-transition: all 0.5s ease;
12
-ms-transition: all 0.5s ease;
13
-o-transition: all 0.5s ease;
14
transition: all 0.5s ease; }
15
.menusocialvertical ul li .rssboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
16
.menusocialvertical ul li .twitterboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
17
.menusocialvertical li .facebookboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
18
.menusocialvertical ul li .googleboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
19
.menusocialvertical ul li .youtubeboton { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; background-size: 20px; padding: 17.5px 45px; }
20
</style>