Tutorial Menu Flotante II

Hola de nuevo mis blogueritas~ 

ahora les traigo un nuevo tutorial...un segundo tipo de menu flotante

 example:

   

 empezemos...

 

❤ Para blogskin deben pegar el codigo antes de </head>

❤ para plantilla de diseñador deberan agregar un gadget html/javascript y alli pegar el codigo

<style>
.satu {
-moz-border-radius: 25px 10px / 10px 25px;border-radius: 25px 10px / 10px 25px;padding:60px;
border: 1px dashed #ffabd5;height:85px;
width:20px;
margin-top:-134px;
margin-left:10px;
background-image:url('url imagen');color:white;
font-size:12px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#dua {
position:fixed;
border-top:2px solid #f13493;border-bottom:2px solid #f13493;width:40px;
height:24px;
padding:3px;
text-align:left;
top:90px;
left: -1px;
font-size:10pt;
font-family:trebuchet ms;
background-color:#ffabd5;
color:transparent;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#tiga {
position:fixed;
border-top:2px solid #f13493;border-bottom:2px solid #f13493;width:40px;
height:24px;
padding:3px;
text-align:left;
top:190px;
left: -1px;
font-size:10pt;
font-family:trebuchet ms;
background-color:#ffabd5;
color:#888;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
</style>
<center><div id="dua"><div id="tiga"><div class="satu"></div>
<div style="margin-top: -200px; margin-left:35px;">
<img src='http://i985.photobucket.com/albums/ae340/ameliaaaaaaaa/sitewelcome.png'/><center><div id="kotakstatus"><div class="y"></div>
<div style="margin-top: -34px;">
<br />
<br />
<style>
.float {
-webkit-transition: .9s;
-moz-transition: .9s;
margin-bottom:1px;
text-align:center;
display:inline-block;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDNpw06h1sYyPyFAhAJkrEe84jP265xZiUTvi_RoJHjGMguzEielVdjplbRN1W-9ale0VQM7vHpjw75X88FuPzoPbxBM9rmlOy6gsHP1TGnzpffiaoHdsjif7e7TLBBh9AcHQ0RItWmL4/s1600/pinkgrain.png");border:1.4px solid #6E6445;
color:#666;
font-family:trebuchet ms;
width:100px;
height:20px;
border-radius:1px;
padding-left:px;
-webkit-transition: .5s;
-moz-transition: .5s;
overflow: hidden;}
.float:hover {
border:1px dotted #999;
width:110px;
</style>
<center>
<a href="url"><div class="float"><div id="left">Link1</div></div></a><a href="url"><div class="float"><div id="left">Link2</div></div></a><a href="url"><div class="float"><div id="left">Link3</div></div></a><a href="url"><div class="float"><div id="left">Link4</div></div></a><a href="url"><div class="float"><div id="left">Link5</div></div></a><a href="url"><div class="float"><div id="left">Link6</div></div></a></center></div></div></center></div></div></div></center>

❤ url  del fondo del menu

❤ aqui pueden cambiar el tamaño,color y estilo del borde

❤ aqui deben colocar la imagen que ustedes quieran en la cabecera de su menu

❤ imagen del fondo de los link

nota: si quieren cambiar el background-img  por color deben cambiarlo por este codigo background-color:#ffabd5; o viseversa

espero les guste el tutorial y les sea facil de hacer,cualquier duda que tengan pueden preguntar y les ayudare lo antes posible.

bye bye~