MENÚ VERTICAL NARANJA Y AZUL
septiembre 02, 2019
Para organizar las secciones o categoría de tu blog, aquí tienes este menú que combina los colores azul y naranja con la imagen de una flechita en cada enlace.
Este menú es ideal para ponerlo en la sidebar o columna lateral del blog. Para ello, solo tienes que copiar el codigo de abajo y añadirlo en un gadget HTML/Javascript.
Sustituye lo que esta indicado en negrita el texto y las urls de tus enlaces.
Para poner mas enlaces, solo tienes que añadir la linea <li><a href="URL">TEXTO</a></li> debajo de las otras, tantas veces como quieras.
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
<center><div id="naranzul"><ul>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
</ul></div></center>
<style>#naranzul ul { list-style: none; margin: 0; padding: 0; } #naranzul img { border: none; } #naranzul { width: 200px; margin: 10px; } #naranzul li a { height: 32px; font-family:Helvetica; margin: 0; font-size: 15px; font-weight: bold; background: transparent; height: 24px; text-decoration: none; } #naranzul li a:link, #naranzul li a:visited { color: #FFF !important; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhemK3owh-fByCZ5QizpakSxeKXlZZUYgLZNjDI7SLlPdX94pHETY8co23ug0YjtKqf2o-sL2L7SrG-q6kVIAquyJ5aSKGwFYFFBx03rFIkx3f1VpOfqbLFHhD9aVKZf62iTqbCQE_SD0U/s1600/menu5.gif); padding: 8px 0 0 35px; } #naranzul li a:hover { color: #FFF !important; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhemK3owh-fByCZ5QizpakSxeKXlZZUYgLZNjDI7SLlPdX94pHETY8co23ug0YjtKqf2o-sL2L7SrG-q6kVIAquyJ5aSKGwFYFFBx03rFIkx3f1VpOfqbLFHhD9aVKZf62iTqbCQE_SD0U/s1600/menu5.gif) 0 -32px; padding: 8px 0 0 35px; } </style>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
</ul></div></center>
<style>#naranzul ul { list-style: none; margin: 0; padding: 0; } #naranzul img { border: none; } #naranzul { width: 200px; margin: 10px; } #naranzul li a { height: 32px; font-family:Helvetica; margin: 0; font-size: 15px; font-weight: bold; background: transparent; height: 24px; text-decoration: none; } #naranzul li a:link, #naranzul li a:visited { color: #FFF !important; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhemK3owh-fByCZ5QizpakSxeKXlZZUYgLZNjDI7SLlPdX94pHETY8co23ug0YjtKqf2o-sL2L7SrG-q6kVIAquyJ5aSKGwFYFFBx03rFIkx3f1VpOfqbLFHhD9aVKZf62iTqbCQE_SD0U/s1600/menu5.gif); padding: 8px 0 0 35px; } #naranzul li a:hover { color: #FFF !important; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhemK3owh-fByCZ5QizpakSxeKXlZZUYgLZNjDI7SLlPdX94pHETY8co23ug0YjtKqf2o-sL2L7SrG-q6kVIAquyJ5aSKGwFYFFBx03rFIkx3f1VpOfqbLFHhD9aVKZf62iTqbCQE_SD0U/s1600/menu5.gif) 0 -32px; padding: 8px 0 0 35px; } </style>
Después de haber insertado el código, un clic en "Guardar"
0 comentarios