Si queréis verlo en acción podéis ir a mi Bloc de Demos:
Este menu 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 rojo por 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
<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/AVvXsEjlEe9Y4pE4sFbtkgUvQG9Z6ETIXUwc0PiK9EaG1yONkbuEEg0DiTl9m8LkLpF2J-Cmvv0uqxa3mihJECpAvSMvkGCxO7dF2wK3eaIYoeEQxH19f2ksInNGtYcLQ0jfwOrbsKL_bg_99sw/s1600/menu5.gif); padding: 8px 0 0 35px; } #naranzul li a:hover { color: #FFF !important; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlEe9Y4pE4sFbtkgUvQG9Z6ETIXUwc0PiK9EaG1yONkbuEEg0DiTl9m8LkLpF2J-Cmvv0uqxa3mihJECpAvSMvkGCxO7dF2wK3eaIYoeEQxH19f2ksInNGtYcLQ0jfwOrbsKL_bg_99sw/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/AVvXsEjlEe9Y4pE4sFbtkgUvQG9Z6ETIXUwc0PiK9EaG1yONkbuEEg0DiTl9m8LkLpF2J-Cmvv0uqxa3mihJECpAvSMvkGCxO7dF2wK3eaIYoeEQxH19f2ksInNGtYcLQ0jfwOrbsKL_bg_99sw/s1600/menu5.gif); padding: 8px 0 0 35px; } #naranzul li a:hover { color: #FFF !important; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlEe9Y4pE4sFbtkgUvQG9Z6ETIXUwc0PiK9EaG1yONkbuEEg0DiTl9m8LkLpF2J-Cmvv0uqxa3mihJECpAvSMvkGCxO7dF2wK3eaIYoeEQxH19f2ksInNGtYcLQ0jfwOrbsKL_bg_99sw/s1600/menu5.gif) 0 -32px; padding: 8px 0 0 35px; } </style>
Fecha de la Publicación;31-07-2019
Fuente; redeando
Publicado por;
0 Comments