Enlaces Rotantes
¿Haz visto los enlaces rotantes de la página principal de blogger? Con este código puedes lograr ese efecto en tu blog. Copia y pega este código justamente entre los <head></head> de tu blog.

Luego copia la siguiente pieza de código en tu template donde quieras mostrar los enlaces:


<!--Codigo Fade Links-->
<div id="tab">
<div id="recent-changes-box">
<ul id="recent-changes">
<li><a href="http://google.com">Google1</a>
</li>
<li><a href="http://blogger.com">Blogger2</a>
</li>
<li><a href="http://gmail.com">G-mail3</a>
</li>
<li><a href="http://daleclick.net">Daleclick4</a>
</li>
<li><a href="http://wikeo.com">Wikeo</a>
</li>
</ul>
</div>
</div>
<!--Codigo Fade Links-->

Este código puede que muestre errores si estas usando algun otro código como el del calendario y/o en templates que utilicen la palabra "tab" en su css. Para evitar esto te recomiento que lo hagas desde un iframe o sea, incluir el código en un documento .html que se encuentre en un "hosting" aparte y mostrar los enlaces desde un iframe dentro del template, por lo general en el "sidebar" o barra lateral.

Ejemplo:



Ahora bien, en el código existen 3 partes que puedes editar segun tu gusto y para el funcionamiento correcto del mismo. La primera es bastante arriba al inicio del código donde dice:

<style type="text/css">
.hide{display:none;}
.show{display:inline;}
#tab {background:none;margin-top:0px;}
#tab li {padding:0 0 0 0px;}
#tab ul#recent-changes {height:54px;width:180px;padding:0px;}
</style>

...donde 54 se refiere a la altura de la ventana que muestra los enlaces rotantes ya que si vas a incluir mas de 3 enlaces a simple vista (algo que voy a explicar ahora) esta debe ser un poco más grande; y donde 180 se refiere a el ancho ya que si vas a incluir un enlace extenso puede que no se muestre todo si este número es muy bajito.

Otra parte que debes prestar atención en el código es casi al final donde dice:

<script type="text/javascript" language="Javascript"><!--
function setupListStyle(linkList) {
linkList.BACKGROUND_COLOR = [245, 237, 227];
linkList.LINK_COLOR = [51, 102, 204];
linkList.OLD_LINK_COLOR = [180, 180, 240];
}
function setupRecentlyUpdated() {
window.updated = new BLOG_ScrollList("recent-changes");
setupListStyle(updated);
updated.SHOW_TIME = 2500; Tiempo que tarde en cambiar de un link a otro
updated.SHOW_STEPS = 20;
updated.SHOW_DELAY = 500;
updated.SHOW_DISTANCE = 18;
updated.SHOW_COUNT = 2; Número de enlaces que deseas mostrar a primera vista
updated.HIDE_TIME = 300;
updated.HIDE_STEPS = 100; Velocidad del movimiento al cambiar de un link a otro
updated.HIDE_DISTANCE = 25;
updated.init();
}
window.onload = function() {
setupRecentlyUpdated();
}
//--> </script>

...donde 2500 se refiere al "tiempo que tarde en cambiar de un link a otro", 2 se refiere al "número de enlaces que deseas mostrar a primera vista" y 100 se refiere a la "velocidad del movimiento al cambiar de un link a otro".

Finalmente para cambiar el estilo y color de los enlaces debes hacerlo directamente antes de cada palabra en el enlace; por ejemplo si uno de los enlaces dice Click Aquí, deberás incluir el código para modificar el estilo del enlace, así:

<li><a href="http://loquesea.com"><font color="red" face="Verdana" size=1>Click Aquí</font></a></li>

...igual que en el ejemplo, justamente antes de la palabra NO antes del código de enlace <a href...

Si tienes preguntas sobre este código favor visitar el foro de daleclick, gracias.
 posted by: Admin at: 11/03/2005 06:08:00 AM -




<< Home

DC Templates™