Aquí tenéis un nuevo tutorial para aprender a hacer menus del estilo que tengo yo en mi Blog ;)
He aprovechado Halloween para cambiar el menu de mi Blog de paso hacer el tutorial pero vosotros podéis darle el estilo que queráis a vuestros menus!!
<style text="type/css">
#inicio:hover {background-image: url('#')}
#tutoriales:hover {background-image: url('#')}
#youtube:hover {background-image: url('#')}
#recom:hover {background-image: url('#')}
</style>
<div style="background-image: url('#'); background-repeat: no-repeat; height: 200px; width: 850px; margin-left: -64px;">
<!-- Primer Boton-->
<a href="#">
<img id="inicio" alt="inicio" src="http://img4.imageshack.us/img4/544/iniciobg.png" style="position: absolute; top: 85px; left: -10px;" />
</a>
<!-- Segundo Boton -->
<a href="#">
<img id="tutoriales" alt="tutoriales" src="#" style="position: absolute; top: 26px; left: 90px; cursor:pointer;" />
</a>
<!-- Tercer Boton -->
<a href="#">
<img id="youtube" alt="youtube" src="#" style="position: absolute; top: 26px; left: 278px;" />
</a>
<!-- Cuarto Boton -->
<a href="#">
<img id="recom" alt="recom" src="#" style="position: absolute; top: 75px; left: 455px;" />
</a>
</div>
#inicio:hover {background-image: url('#')}
#tutoriales:hover {background-image: url('#')}
#youtube:hover {background-image: url('#')}
#recom:hover {background-image: url('#')}
</style>
<div style="background-image: url('#'); background-repeat: no-repeat; height: 200px; width: 850px; margin-left: -64px;">
<!-- Primer Boton-->
<a href="#">
<img id="inicio" alt="inicio" src="http://img4.imageshack.us/img4/544/iniciobg.png" style="position: absolute; top: 85px; left: -10px;" />
</a>
<!-- Segundo Boton -->
<a href="#">
<img id="tutoriales" alt="tutoriales" src="#" style="position: absolute; top: 26px; left: 90px; cursor:pointer;" />
</a>
<!-- Tercer Boton -->
<a href="#">
<img id="youtube" alt="youtube" src="#" style="position: absolute; top: 26px; left: 278px;" />
</a>
<!-- Cuarto Boton -->
<a href="#">
<img id="recom" alt="recom" src="#" style="position: absolute; top: 75px; left: 455px;" />
</a>
</div>
Bueno yo ando empezando con mi blog *o* y ya tenia mi menú pero este mola, principalmente voy a mirar que tal :3 gracias :3
ResponderEliminarRe lindo!gracias :D , me ayuda mucho tu blog
ResponderEliminarHola.
ResponderEliminarQuisiera pedirte que nos hicieras, un tutorial explicando cómo poder realizar, una página como la que tienes tú en "tutoriales". Quiero que me expliques como puedo poner los títulos de cada sección y enlazar los videos con el título del índice, etc.
Muchas gracias. Tú pagina me está ayudando mucho.
bueno esta muy bueno tu blog,, y quiero ver si me das algunos consejor por facebook de como mejorarlo
ResponderEliminarlink del blog
http://cityville-fans-vecinos.blogspot.com/
link de mi facebook
https://www.facebook.com/espeji
Bueno espero respuestas gracias
Muy bueno tu blog , te felicito!
ResponderEliminarhola .. la pregunta que tengo es q cuando se crea el boton ... y cuando piongo el boton de efecto me aparece por detras!! ps no se nota!! nada!! qq podria ser??
ResponderEliminaresque el efecto de hover siempre aparece por detras por eso a la imagen del efecto hay que hacerle un subrayado o algo que sobresalga de la imagen original para que se note^^
EliminarHola amigo podrias hacer un tutorial en el que expliques como agregarle subpestañas de dos columnas con este mismo estilo hover? Saludos
ResponderEliminar