Menu Bubblebar
Hola hoy les traigo mi primer tutorial HTML Wahoooo
Bien este es de ese menú muy bonito en forma de burbuja y es muy facil de incoporar
Para esto nos vamos a Diseño - Plantilla si tienen plantilla de blogskins es el mismo codigo
Y alli buscamos (ctrl + F) La Etiqueta:
</style>
</style>
ARRIBA De Ello Colocamos Lo Siguiente :
#bubblebar {font-family:lucida console; width:60px; position:fixed; right:15px; bottom:70px; z-index:999; font-size:9px; text-align:center;} .bubble {text-align:center; color:#555; float:right; height:10px; width:34px; padding-top:12px; padding-bottom:12px; margin-top:10px; overflow:hidden; -moz-border-radius: 17px 17px 17px 17px; border-radius:17px 17px 17px 17px; -webkit-transition: opacity 0.7s linear;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;} .bubble img {margin-bottom:10px; margin-top:-2px;} #vertical {position:fixed; width:10px; right:30px; bottom:0px; height:260px; background-image:url('http://25.media.tumblr.com/tumblr_ly0ae2N4hE1r9g6hvo6_r1_1280.png'); background-color:#f8c76f; -moz-border-radius: 10px 10px 0px 0px; border-radius:10px 10px 0px 0px; } #bubble1 {border:3px solid #9ec1f2; background-color:#fff} #bubble1:hover {padding:5px; height:50px; width:120px; border:3px solid #4680d2;} #bubble2 {border:3px solid #f795bc; background-color:#fff;} #bubble2:hover {padding:5px; height:50px; width:120px; border:3px solid #be2a65;} #music {border:3px solid #acacac; background-color:#fff; padding:14px 0px 10px 0px;} #music:hover {padding:5px; height:50px; width:50px; border:3px solid #111;} #bubbleplayer{padding:2px 0px 5px 0px;}
Luego buscamos La Etiqueta:
</body>
</body>
Y DEBAJO De ello colocamos:
<div id='vertical'></div> <div id='bubblebar'> <div class='bubble' id='bubble1'><img src="http://media.tumblr.com/tumblr_lkl6900eU61qfamg6.gif"/> <div>bubble 1 text here</div> </div><!--bubble1--> <div class='bubble' id='bubble2'><img src="http://i11.photobucket.com/albums/a168/evelynregly/minigifs/minicaderno2.gif"/> <div>bubble 2 text here</div> </div><!--bubble2--> <div class='bubble' id='music'><img src="http://static.tumblr.com/rltvkjt/jwflmr3vh/marcadores71.gif"/> <div id='bubbleplayer'>MUSIC PLAYER CODE</div> </div><!--music bubble--> </div><!--bubbleblar-->
* El codigo en ROJO puedes editar cambiandole la imagen y
agregarle URL
* El codigo de color ROSA por el texto que decees
^^
Espero les sirva
VISTA PREVIA