Menú vertical Green Bubble

Hace tiempo construí el menú vertical Grey Drop. Esta vez te traigo un nuevo menú vertical, el Green Bubble:

DEMO


Su instalación es muy sencilla, por lo que en pocos pasos lo puedes tener en tu blog.

Diseño>Edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima añade estos bloques de CSS:

/* Menu Green Bubble
---------------- */
#Greenbubble {
padding:0;
width:150px;
margin:10px 0 0 10px;
}

#Greenbubble ul {
float:right;
margin:0;
padding:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#Greenbubble li a {
display:block;
margin:0 0 10px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9cUP4JbvslyRo2dWsVLnwpkeYMzvMO3OfIhBenSabeP-zf8tNB9TRYs16gGIiK59jDSNkL1iLbr6XYDSZE8ZsIvt6Tj8eMf9t4L6Mv5camB4Ov431q2wf9t_nMvTDWeCs9cFZd3pAy14/s1600-r/greenbubble.png) no-repeat scroll 0 0;
background-position: -22;
color: #ffffff;
font-family: Tahoma;
font-size: 13px;
height: 21px;
padding: 2px 0 0 30px;
width: 122px;
}
#Greenbubble li a:hover {
color:#FFFFFF;
font-family: Tahoma;
font-size: 13px;
height: 21px;
text-decoration:none;
background-position: 0px -23px;
}

/* Fin menu Green Bubble
----------- */

Ahora guarda la plantilla:




Seguidamente añadiremos los enlaces y el menú en la sidebar.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código:

<div id="Greenbubble">
<ul>
<li><a href="URL DE LA PAGINA" >TITULO</a></li>
<li><a href="URL DE LA PAGINA" >TITULO</a></li>
<li><a href="URL DE LA PAGINA" >TITULO</a></li>
<li><a href="URL DE LA PAGINA" >TITULO</a></li>
</ul>
</div>

Reemplaza URL DE LA PAGINA por la dirección de tu blog o web y TITULO por el título del enlace.

Si deseas añadir más enlaces al menú, utiliza líneas como esta:

<li><a href="URL DE LA PAGINA" >TITULO</a></li>

Y colócalas siempre antes del cierre </ul>.

Guarda el gadget para terminar y obtener así el menú Green Bubble.