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 botonescon 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 en un Gadget “HTML-Javascript y pegarlo donde querais mostrarlo.
Recordad que teneis que poner las urls de vuestras cuentas y la de vuestro feed donde esta indicado.
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente código en el interior
<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>
<li><a href="http://URL DE TU FEED RSS" class="rssboton" target="_blank">suscribete al RSS</a></li></ul></div>
<style>
.menusocialvertical { width: 100%; margin: -10px;border:5px solid #000000; }
.menusocialvertical ul { margin: 0; padding: 0; }
.menusocialvertical ul li { list-style:none; padding: 0; text-transform: none;-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
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}
.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; }
.menusocialvertical ul li a:hover { color: #ffffff !important;opacity:0.5; background-color: #cdcdcd; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }
.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; }
.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;}
.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; }
.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; }
.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; }
</style>
<li><a href="http://URL DE TU FEED RSS" class="rssboton" target="_blank">suscribete al RSS</a></li></ul></div>
<style>
.menusocialvertical { width: 100%; margin: -10px;border:5px solid #000000; }
.menusocialvertical ul { margin: 0; padding: 0; }
.menusocialvertical ul li { list-style:none; padding: 0; text-transform: none;-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);
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}
.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; }
.menusocialvertical ul li a:hover { color: #ffffff !important;opacity:0.5; background-color: #cdcdcd; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; }
.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; }
.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;}
.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; }
.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; }
.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; }
</style>
Después de haber insertado el código, un clic en "Guardar"
Data de la Publicación; 02-09-2019
Fuente; redeando
Publicado por;
- septiembre 02, 2019
- 0 Comments
