Популярные посты в боковой панели

Представляем вашему вниманию реализацию блока популярных постов в фиксированном блоке.

Как реализовать:

1. Сначала разметка html

<div id="rp_list" class="rp_list">
    <ul>
        <li>
            <div>
                <img src="images/1.jpg" alt=""/>
                <span class="rp_title">Название поста</span>
                <span class="rp_links">
                    <a target="_blank" href="#">Читать</a>
                    <a target="_blank" href="#">Описание</a>
                </span>
            </div>
        </li>
        ...
    </ul>
    <span id="rp_shuffle" class="rp_shuffle"></span>
</div>

2. Добавим кнопочку обновления под постами

<span id="rp_shuffle" class="rp_shuffle">
			</span>

3. Теперь добавим стили CSS

.rp_list {
	font-family:Verdana, Helvetica, sans-serif;
	position:fixed;
	right:-220px;
	top:140px;
	margin:0;
	padding:0;
}
span.rp_shuffle{
	background:#222 url(../images/shuffle.png) no-repeat 10px 50%;
	width:28px;
	height:14px;
	display:block;
	margin:10px 0px 0px 20px;
	cursor:pointer;
	padding:4px;
	border:1px solid #000;
	-moz-border-radius:5px 0px 0px 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
}
.rp_list ul{
	margin:0;
	padding:0;
	list-style:none;
}
.rp_list ul li{
	width: 240px;
	
	margin-bottom:5px;
	display:none;
}
.rp_list ul li div{
	display: block;
	line-height:15px;
	width: 240px;
	height: 80px;
	background:#333;
	border:1px solid #000;
	-moz-border-radius:5px 0px 0px 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
}
.rp_list ul li div img{
	width:70px;
	border:none;
	float:left;
	margin:4px 10px 0px 4px;
	border:1px solid #111;
	-moz-box-shadow:1px 1px 3px #000;
	-webkit-box-shadow:1px 1px 3px #000;
	box-shadow:1px 1px 3px #000;
}
span.rp_title{
	font-size:11px;
	color:#ddd;
	height:46px;
	margin:4px 0px 0px 20px;
	display:block;
	text-shadow:1px 1px 1px #000;
	padding-top:3px;
	background:#222;
	-moz-box-shadow:0px 0px 5px #000 inset;
	-webkit-box-shadow:0px 0px 5px #000 inset;
	box-shadow:0px 0px 5px #000 inset;
}
span.rp_links{
	width:195px;
	height:8px;
	padding-top:2px;
	display:block;
	margin-left:42px;
}
span.rp_links a{
	background: #222 url(../images/bgbutton.png) repeat-x;
	padding: 2px 18px;
	font-size:10px;
	color: #fff;
	text-decoration: none;
	line-height: 1;
	-moz-box-shadow: 0 1px 3px #000;
	-webkit-box-shadow: 0 1px 3px #000;
	box-shadow:0 1px 3px #000;
	text-shadow: 0 -1px 1px #222;
	cursor: pointer;
	outline:none;
}
span.rp_links a:hover{
	background-color:#000;
	color:#fff;
}

4. Подключаем javascript и jQuery (Внизу страницы, перед тегом body)

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script>
			$(function() {
				/**
				* the list of posts
				*/
				var $list 		= $('#rp_list ul');
				/**
				* number of related posts
				*/
				var elems_cnt 		= $list.children().length;
				
				/**
				* show the first set of posts.
				* 200 is the initial left margin for the list elements
				*/
				load(200);
				
				function load(initial){
					$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
					var loaded	= 0;
					//show 5 random posts from all the ones in the list. 
					//Make sure not to repeat
					while(loaded < 5){
						var r 		= Math.floor(Math.random()*elems_cnt);
						var $elem	= $list.find('li:nth-child('+ (r+1) +')');
						if($elem.is(':visible'))
							continue;
						else
							$elem.show();
						++loaded;
					}
					//animate them
					var d = 200;
					$list.find('li:visible div').each(function(){
						$(this).stop().animate({
							'marginLeft':'-50px'
						},d += 100);
					});
				}
					
				/**
				* hovering over the list elements makes them slide out
				*/	
				$list.find('li:visible').live('mouseenter',function () {
					$(this).find('div').stop().animate({
						'marginLeft':'-220px'
					},200);
				}).live('mouseleave',function () {
					$(this).find('div').stop().animate({
						'marginLeft':'-50px'
					},200);
				});
				
				/**
				* when clicking the shuffle button,
				* show 5 random posts
				*/
				$('#rp_shuffle').unbind('click')
								.bind('click',shuffle)
								.stop()
								.animate({'margin-left':'-18px'},700);
								
				function shuffle(){
					$list.find('li:visible div').stop().animate({
						'marginLeft':'60px'
					},200,function(){
						load(-60);
					});
				}
            });
		</script>

Готово.