Menu Flotante con imagen

                  

Bueno sigamos con los tutoriales, en este pos les traigo lo que iba a ser mi primer menu en este modelo , antes de realizar todos los cambios y eso este iba a ser el modelo inicial
click aqui para ver (x)

si te gusto este menu , es muy facil ponerlo y queda muy bonito en el blog, sin decir mas comencemos :

1. vas a ir a plantilla/editar plantilla, una ves que estes alli das click dentro del cuando donde se encuentran todos los codigos y presionas CTRL + F (el + no solo lo otro). Cuando te salga el buscador, coloca este codigo: ]]></b:skin> y le das buscar.
2. Una ves encontrado el codigo pegas el siguiente encima de ]]></b:skin>:


.navca{
text-align: center;
text-decoration: none;
font-family: Verdana, Arial;
}
.navca a{
text-transform:uppercase!important;
padding: 5px 5px 5px 5px;
display: inline-block;
background:#d976a3;
margin-top: 5px;
font-size: 8px;
color: #fff;
font-weight: bold;
display:block;
width:50px;
margin-left:-60px;
position:relative;
top:200px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color: rgba(155, 159, 202, 0.80);
}
.navca a:hover{
width:55px;
margin-left:-65px;
}
.border{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

Y le das guardar, ahora vas a diseño/nuevo gadget/htmlJavascrip y colcocas el siguiente codigo:

<div class="navca">
<a href="http://www.blogger.com/">LINK</a>
<a href="http://www.blogger.com/">LINK</a>
<a href="http://www.blogger.com/">LINK</a>
<a href="http://www.blogger.com/">LINK</a>
<a href="http://www.blogger.com/">LINK</a>
</div>
<img class="border" src="URL DE LA IMAGEN" width="ALTURA DE LA IMAGEN" />
EDITAR: 
Lo que esta en naranja: ahi colocaras la url de la entrada que quieras que lleve la pestaña.
Link: ahi pondras el nombre de la categoria ej: tutoriales , recursos etc.
Altura de la imagen: ahi depende de cada blog pero pon un numero y ve viendo como va quedando te recomiendo entre 40 y 35

2 comentarios:

  1. OMG!! Es muy genial ese menu seguro lo uso para próximo diseño ^^Ya no me pasaba mucho :c besos!

    Larita
    http://todocreadoparati.blogspot.com.ar/

    ResponderEliminar
  2. no pasa nada, yo me ausente por el estudio me alegra que te guste !

    ResponderEliminar

- No de spam.
- No malas palabras.
- Respeta al administrador y a los usuarios del blog
- Deja tu hermosa firma
Aqui algunos Emoji que puedes usar:
(ノ◕ヮ◕)ノ*:・゚✧ (=ω=;) (◕‿-) (✿ ♥‿♥) (づ。◕‿‿◕。)づ (•⊙ω⊙•)