MENÚ PARA BLOGGER HORIZONTAL "BALLOON"

MENÚ PARA BLOGGER HORIZONTAL "BALLOON" .

Para que tengas una opcion original para poner los enlaces en tu blog o web, aqui te traigo otro menu diseñado con CSS e imagenes.
Le he puesto este nombre, porque en ingles 'balloon' quiere decir globo.
Como veras, al pasar el cursor sobre los enlaces, aparece un globo tipo comic de color negro que le da un aspecto original y visualmente diferente.

Para ponerlo en tu pagina, tan solo tienes que copiar el codigo de abajo y pegarlo en un gadget HTML, sustituyendo lo que esta en color rojo.

Si queréis verlo en acción podéis ir a mi Bloc de Demos lo veréis en el sidebar con el nombre Menú 'balloon'

Si queréis instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

Ir a Blogger

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

<div class="menuballoon"><ul><li><a href="ENLACE"><span>TEXTO</span></a></li><li><a href="ENLACE"><span>TEXTO</span></a></li>
<li><a href="ENLACE"><span>TEXTO</span></a></li><li><a href="ENLACE"><span>TEXTO</span></a></li><li><a href="ENLACE"><span>TEXTO</span></a></li></ul></div>

<style>
.menuballoon {
float: left;
height: 46px;
padding-left: 20px;
padding-top: 4px;
}
.menuballoon ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
.menuballoon li {
display: inline;
margin: 0;
padding: 0;
}
.menuballoon a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzaDnzcoUytEBpmBHNDrZF-nr5efp5sBDGW05UIUWp9GL4ONkTxqVVj42AZaBrtGbtxLDu5PSyglEexutgi-I0NnPG-CLHot1cptBTdDoOXAbX9Gb-k1qOmxWmiyh8pSm95B7y3dyUVc/s102/lefttab.jpg") no-repeat scroll left top transparent;
color: #262626;
float: left;
font-family: arial;
font-size: 12px;
line-height: normal;
margin: 0;
padding-left: 17px;
text-decoration: none;
}
.menuballoon a span {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTGxchzV57_kMUODtpn9aOb0qiHgGtAYz5DFIS8RAo0l7a-cziEam0vjirmtFlTJRMBFPiwge1pQ1FG_afGGOkKpxxnt65mtAP8_v_1IeiWjdVUKimfNKHDAqm56C9iuvcntFSy-vht5w/s300/righttab.jpg") no-repeat scroll right top transparent;
color: #262626;
display: block;
float: left;
font-weight: bold;
padding: 11px 18px 25px 0;
}
.menuballoon a span {
float: none;
}
.menuballoon a:hover span {
color: #FFFFFF;
}
.menuballoon li.selected a {
background-position: 0 -51px;
}
.menuballoon li.selected a span {
background-position: 100% -51px;
color: #FFFFFF;
}
.menuballoon a:hover, .glowingtabs li.selected a:hover {
background-position: 0 -51px;
}
.menuballoon a:hover span, .glowingtabs li.selected a:hover span {
background-position: 100% -51px;
}
</style>

Eso es todo, ahora un clic en "Guarda"