Etiquetas

Navegador Flotante -menu-

Hey! Que Onda? hoy te traigo un tuto, es de como colocar un lindo menu flotante para tu blog, algo asi:
| LIVE PREVIEW |

 Home > Design > Add a Gadget > Html
 Copia el Codigo siguiente:

<head>
<link href='http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow' rel='stylesheet' type='text/css'/>
</head>

<style>
.posi {
position:fixed;
top:100px;
left:10px;
}
.menroll {
     background: #FFF;
     width: 40px;
     height: 40px;
     padding: 5px;
     -webkit-border-radius: 60px;
     -moz-border-radius: 60px;
     border-radius: 60px;
     -webkit-transition-duration: .90s;
     -webkit-box-shadow: 0px 0px 4px #000;
     -moz-box-shadow: 0px 0px 4px #000;
     box-shadow: 0px 0px 4px #000;
     overflow: hidden;
     margin-bottom: 5px;}
.menroll:hover {
     background: #FFCCDD;
     width: 180px;
     height: 40px;
     padding: 5px;
     -webkit-border-radius: 60px;
     -moz-border-radius: 60px;
     border-radius: 60px;
     -webkit-transition-duration: .90s;}
.rollimag {
     width: 40px;
     height: 40px;
     float: right;
     -webkit-border-radius: 60px;
     -moz-border-radius: 60px;
     border-radius: 60px;
     -webkit-transition-duration: .90s;
     z-index: 100;}
.menroll:hover .rollimag  {
     width: 40px;
     height: 40px;
     float: right;
     -webkit-border-radius: 60px;
     -moz-border-radius: 60px;
     border-radius: 60px;
     -webkit-transition-duration: .90s;
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     -webkit-box-shadow: 0px 0px 4px #000;
     -moz-box-shadow: 0px 0px 4px #000;
     box-shadow: -2px 0px 9px #000;}
.tituroll {
     width: 300px;
     color: #FCFBFE;
     font-size: 12px;
     font-family: Jacques Francois Shadow;
     z-index: 50;
     margin-top: 7px;
     margin-bottom: -25px;
     -webkit-transition-duration: .90s;
     opacity:0;
     -moz-opacity: 0;
     filter: alpha(opacity=0);
     text-shadow:0px 0px 5px #000;}
.menroll:hover .tituroll  {
     text-shadow:0px 0px 2px #FC839B;
     margin-left: 5px;
     -webkit-transition-duration: .90s;
     opacity: 1;
     -moz-opacity: 1;
     filter: alpha(opacity=100);}
</style>
<div class="posi">

  <div class="menroll">
    <div class="tituroll">
TITULO</div>
<img src="http://data.whicdn.com/images/49054459/tumblr_mgc73zf1lB1s1svfvo1_500_large.png" class="rollimag" />
  </div>
</a>
<br>
<a href='LINKHERE'>
  <div class="menroll">
    <div class="tituroll">
TITULO</div>
<img src="http://data.whicdn.com/images/49054459/tumblr_mgc73zf1lB1s1svfvo1_500_large.png" class="rollimag" />
  </div>
</a>
<br>
<a href='LINKHERE'>
  <div class="menroll">
    <div class="tituroll">
TITULO</div>
<img src="http://data.whicdn.com/images/49054459/tumblr_mgc73zf1lB1s1svfvo1_500_large.png" class="rollimag" />
  </div>
</a>
<br>
<a href='LINKHERE'>
  <div class="menroll">
    <div class="tituroll">
TITULO</div>
<img src="http://data.whicdn.com/images/49054459/tumblr_mgc73zf1lB1s1svfvo1_500_large.png" class="rollimag" />
  </div>
</a>
Ahora a editar!
Lo que esta en LILA:  es la url de la imagen que estara alado del titulo
Donde dice Link Here ira tu enlace
Donde dice titulo colocaras el titulo de acuerdo a tu enlace.
Espero que te haya gustado y te sirva. Espero tu comentario!
Creditos: 
Etiquetas:

Comentarios

Publicar un comentario

Genial! Vas a dejarme un comentario?
Recuerda...
-No ulsultos
-No spam
-Puedes hacer pedidos amablemente.
-Si ves algo tuyo avisamelo de buena forma.
Eso es todo >w< gracias por dejarme un comentario, me hacen la personita mas feliz de la tierra❤
Caritas:
(｡◕‿◕｡)(◕_◕)(◕‿◕)\(◕ ◡ ◕\)Σ ◕ ◡ ◕(◕︵◕)(´◕ฺω◕ฺ｀)(◕ฺ∀◕ฺ)✿◕‿◕✿ ❀◕‿◕❀ ❁◕‿◕❁✾◕‿◕✾ (°∀°)(• ε •)(●´ω｀●)
Ծ_Ծஇ_இอ_อ อ้_อ้ ๏_๏๏̯͡๏ •▱• ↁ_ↁ ⇎_⇎≧ヮ≦ ⊙ω⊙ ⊙▂⊙ ⊙△⊙ ⊙︿⊙ ʘ‿ʘ ⊙﹏⊙ ⊙０⊙╰☆╮□_□ ◉_◉ ◉△◉ ○_○ ◔_◔ ◔ᴗ◔ ◕◡◕◪_◪ ◮_◮☆¸☆☻_☻♥◡♥句_句（゜Д゜）☜(⌒▽⌒)☞ (☞ﾟヮﾟ)☞ ☜(ﾟヮﾟ☜)^ㅂ^ ヽ(ｏ`皿′ｏ)ﾉ (≧ロ≦) (ΘεΘ;)

Entradas populares