Hoy voy a tratar de explicar como colocar los botones que se observan bajo la cabecera de este blog para que aquellos que quieran ponerlo en su blog puedan hacerlo también.
La idea inicial de este elemento es extraída de la página
Pues, imitando las palabras de mis dos "maestros", mencionados anteriormente, voy a proceder a comenzar con la explicación.
Los menús estilo dock son característicos de los ordenadores Mac y que son altamente llamativos para el usuario por la forma en que aumentan de tamaño los íconos al pasar el mouse sobre ellos.
Tras explicar un poco que es lo que vamos a hacer en este momento lo llevaremos a cabo.
1. Vamos a Diseño > Edición de HTML y después de <head> pegamos este código:
- <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> <script src='http://sites.google.com/site/ciudadbloggerfiles/Home/interface.js' type='text/javascript'/>
2. Después, antes de ]]></b:skin> pegamos esto que nos permitiría modificar el estilo de nuestro menú. (ojo: el color de las letras está en negro, así que sobre blogs de fondo oscuro tendréis que cambiarlo)
/* Menu Dock
----------------------------------------------- */
.dock {
text-align: center;
height: 60px;
position: relative;
}
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
.dockItem img {
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.dockItem span {
display: none;
positon: absolute;
}
.dockContainter {
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
En este código, la parte en verde es el color del NOMBRE DEL BOTÓN, el cual podéis modificar a vuestro antojo cambiando el código hexadecimal del color. Para ver los códigos hexadecimales
3. Y finalmente copiamos el scrip siguiente en un elemento html/JavaScript bajo la cabecera de nuestro blog. (ojo: este código debéis personalizarlo a vuestro gusto y antojo, sustituyendo el texto en VERDE por las URL correspondientes a cada botón y enlace respetando SIEMPRE, en caso que las haya, las comillas).
<div class="dock" id="dock">
<div class="dockContainter" style="left: 334px; width: 420px;">
<a href="ENLACE" class="dockItem" linkindex="7" style="width: 60px; left: 0px;"><img src="URL DEL BOTÓN"><span style="display: none;">NOMBRE DEL BOTÓN</span></a>
<a target="_blank" href="ENLACE" class="dockItem" linkindex="8" style="width: 60px; left: 60px;"><img src="URL DEL BOTÓN"><span style="display: none;">NOMBRE DEL BOTÓN</span></a>
<a target="_blank" href="ENLACE" class="dockItem" linkindex="9" style="width: 60px; left: 120px;"><img src="URL DEL BOTÓN"><span style="display: none;">NOMBRE DEL BOTÓN</span></a>
<a target="_blank" href="ENLACE" class="dockItem" linkindex="10" style="width: 60px; left: 180px;"><img src="URL DEL BOTÓN"><span>NOMBRE DEL BOTÓN</span></a>
<a target="_blank" href="ENLACE" class="dockItem" linkindex="11" style="width: 60px; left: 240px;"><img src="URL DEL BOTÓN"><span>NOMBRE DEL BOTÓN</span></a>
<a href="ENLACE" class="dockItem" linkindex="12" style="width: 60px; left: 300px;"><img src="URL DEL BOTÓN"><span>NOMBRE DEL BOTÓN</span></a>
<a target="_blank" href="ENLACE" class="dockItem" linkindex="13" style="width: 60px; left: 360px;"><img src="URL DEL BOTÓN"><span> NOMBRE DEL BOTÓN</span></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Dock(
{
maxWidth: 90,
items: 'a',
itemsText: 'span',
container: '.dockContainter',
itemWidth: 60,
proximity: 70,
halign : 'center'
}
)
}
);
</script>
El menú está diseñado para 7 botones, pero si queréis poner alguno más podéis hacerlo añadiendo a continuación del séptimo otro más, copiando y pegando el anterior y modificando los datos que sea necesario modificar.
En el apartado ENLACE deberéis poner las URLs de los lugares a los que queráis llegar a través de cada uno de los botones.
En el apartado URL DEL BOTÓN deberéis poner la URL de la imágen del botón. Podéis poner las imágenes que queráis, incluso hechas por vosotros mismo en Photoshop o algún programa similar. Si queréis usar estos mismos que tengo puestos en este blog os dejo por aquí los enlaces para que los cojáis.
- Para INICIO: http://dl.dropbox.com/u/2616707/png/iconhome.png
- PARA FEED DE ENTRADAS: http://dl.dropbox.com/u/2616707/png/iconrss.png
- PARA TWITTER: http://dl.dropbox.com/u/2616707/png/icontwitter.png
- PARA FACEBOOK: http://dl.dropbox.com/u/2616707/png/iconfacebook.png
- PARA PICASSA: http://dl.dropbox.com/u/2616707/png/iconpicasa.png
- PARA CORREO: http://dl.dropbox.com/u/2616707/png/iconmail.png
- PARA AYUDA: http://dl.dropbox.com/u/2616707/png/iconhelp.png
En NOMBRE DEL BOTÓN podéis poner lo que cada cual crea conveniente.
Bueno, pues una vez colocado todo esto en los lugares correspondientes, el menú debería funcionar correctamente. Espero haberme explicado correctamente y que consigáis hacer unos hermosos menús con este pequeño tutorial.
Vaya Samu, me dejas flipando. No sabía que hubieses retomado tu weblog y mucho menos con tantas ganas.
ResponderEliminarSon muy interesantes estos posts que haces, voy a empezar a leerte muy a menudo. Sigue así.
Un abrazo amigo^^
Vaya Praus. Me alegro de que te haya gustado esta entrada. Encontré el menú rulando por ahí por los blogs y me gustó. Lo puse en mi blog y expliqué como hacerlo, pues después de todo es sencillo. Ahora me cree un nuevo blog de truquitos que es http://jugandoconblogger.blogspot.com.
ResponderEliminarGracias por leer Praus.
Hola! Muy Bueno el truco y lo se porque pues lo tienes en tu blog, pero a mi no me sale, hice lo que dijiste pero lo que dices que debe ir despues de skiin o eso ja me sale en la parte de hasta arriba de mi blog, las letras y las imagenes de los iconos me salen grandes y ni siquiera como iconos, bueno saluditllos y seguire tratando jajaja
ResponderEliminarBesos!
Anaena, ojo, que dice que el segundo código hay que ponerlo antes y no después como tu lo estás haciendo.
ResponderEliminar