Creando un cuadro de noticias con jQuery 1.2.6

Empezamos... vamos a crear un cuadro de noticias utilizando jquery para la animación, en si la idea es que cada noticia se valla desvaneciendo mientras la otra noticia aparece en su lugar, le vamos a poner una imagen como titulo y un borde para que resulte elegante... el cuadro mas o menos luce así:

• Estrenando nuevo logo
   Hace poco me di a la tarea de innovar un poco el logo y de hay surgió una idea...
  
• Apoyemos a Souldhack!
   Ya casi llegamos a los 40 fans, esperemos sigan apoyándonos dándole me gusta a la pagina de Souldhack en Facebook
  
• Una posible actualizacion
   Hace poco me surgió una idea, que consiste en que la gente que quiera puede mandar sus artículos y serán publicados en Souldhack.
  
• Actualizamos el header
   Como muchos se han dado cuenta remodelamos un poco el header con una mejor vista del menu.
  

1. Lo primero que vamos a hacer es como siempre pegar la librería que nos da el efecto. En este caso utilizaremos la librería 1.2.6 yo la he subido a mi googlecode, bueno he aquí la librería y el script. Así que nos vamos a Plantilla > Edicion HTML, Expandimos plantillas de artilugios y la siguiente librería la vamos a pegar antes de "</head>" 

<script type="text/javascript" src="http://souldhack.googlecode.com/files/jquery-1.2.6.min.js"></script>

2. Ya instalada la librería y el script pasaremos al segundo paso que es darle diseño y forma a nuestro cuadro de noticias. aquí le daremos ancho y alto también le pondremos los valores de las imágenes, los bordes y los espacios. Así que nos vamos a Plantilla > Edición HTML y el siguiente código CSS lo vamos a pegar antes de: "]]></b:skin>"

#cuadronot{
height:200px;
width:238px;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:6px 10px 14px 10px;
background-color:#fff;
}
#cuadronot li{
border:0; margin:0; padding:0; list-style:none;
}
#cuadronot li{
height:60px;
padding:5px;
list-style:none;
}
#cuadronot a{
color:#000000;
margin-bottom:
}
#cuadronot .news-title{
display:block;
font-weight:bold;
margin-bottom:0px;
font-size:11px;
}
#cuadronot .news-text{
display:block;
font-size:10px;
color:#666666;
line-height: 1.1;
}
#cuadronot img{
float:left;
width:50px;
height:50px;
margin-right:14px;
padding:4px;
border:solid 1px #DEDEDE;
}
#cuadronot p {
font-size: 10px;
line-height: 1.1;
}
.context{
background-color:#ccc;
width:260px;
padding: 5px;
}

3. Ya puesto el diseño CSS por fin pasaremos al ultimo paso que como todos sabrán es representar y mostrar el cuadro de noticias mediante HTML, también aquí incluiremos la imagen de titulo de noticias. Recuerden que esto es un código HTML y lo vamos a pegar en: Diseño > Añadir un gadget > HTML/Javascript.

<div class="context"><img alt="" style="width: 259px;" src="URL DE LA IMAGEN DEL ENCABEZADO NOTICIAS" />
<ul id="cuadronot">
<li><img alt="" src="URL IMG PRIMERA NOTICIA" />
<a class="news-title" href="#">Titulo primera noticia</a>
<span class="news-text">Texto de la primera noticia</span>
</li>
<li><img alt="" src="URL IMG SEGUNDA NOTICIA" />
<a class="news-title" href=" # ">Titulo segunda noticia</a>
<span class="news-text">Texto de la segunda noticia</span>
</li>
<li><img alt="" src="URL IMG TERCERA NOTICIA" />
<a class="news-title" href=" # ">Titulo tercera noticia</a>
<span class="news-text">Texto de la tercera noticia</span>
</li>
<li><img alt="" src="URL IMG CUARTA NOTICIA" />
<a class="news-title" href=" # ">Titulo cuarta noticia</a>
<span class="news-text">Texto de la cuarta noticia</span>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){

var first = 0;
var speed = 700;
var pause = 3500;

function removeFirst(){
first = $('ul#cuadronot li:first').html();
$('ul#cuadronot li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#cuadronot').append(last)
$('ul#cuadronot li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>

Y bueno con esto hemos acabado de crear nuestro cuadro de noticias muy elegante y con un efecto muy vistoso con la librería jQuery 1.2.6, también cabe destacar la utilidad de este cuadro, Y bueno, alguna duda o comentario haganmelo saber