Postagens populares em forma de slide com efeito accordeon

 DEMO

Mais um modelo de slide para usar nas postagens mais vistas em seu blog. adaptada por Abu Farhan.

O que é necessário é que você tenha em seu blog o widget com as postagens populares e que cole o código em um widget HTML/Javascript. Estando implementado, deixe como mostra o exemplo.

Clique em Adicionar um Gadegt

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias.

<style type="text/css" media="screen">
/*Popular post---------------------------------------------------------------------*/
.poppost{
margin: 10px 0px 20px -23px;
}
.popular-posts {
  margin: 0px 0px 30px 0px;
  padding: 0 0 0px 0px;
  position: relative;
  width: 910px;/*comprimento do slide*/
  height: 283px;/*largura do slide*/
  overflow: hidden;

}
.popular-posts  {
    /* recommended styles for kwicks ul container */
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}
.popular-posts  li{
text-shadow: 0.1em 0.1em 0.2em #000;
    /* these are required, but the values are up to you (must be pixel) */
    width: 160px;/*comprimento de cada item do slide fechado*/
    height: 263px;
    /*do not change these */
    display: block;
    overflow: hidden;
    padding: 0px;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.fadeout {
  display: block;
  position: absolute;
  right: 0px;
  width: 160px;
  height: 265px;
  z-index: 4;
  background: url(overlay.png) repeat-y scroll top right;
}
.popular-posts  li {
    /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
    margin-right: -4px; /*Set to same as spacing option. */
    float: left;
}
.popular-posts .item-title {
  background: #182424   !important;
  color: #fff;
  opacity: 0.77;
  filter:alpha(opacity=77);
  position: absolute;
  padding: 10px;
  top: 60px;
}

.popular-posts .item-title a:visited{
  color: #fff;
  font-size:16px;
  text-transform:uppercase;

}

.popular-posts  .item-snippet{
  background: #182424;
  color: #fff;
  opacity: 0.77;
  filter:alpha(opacity=77);
  position: absolute;
  padding: 10px;
  top: 215px;
  height:127px;

}
.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:600px; /*Tamanho da imagem quando abre o item do slide*/
  height:363px;
}

.popular-posts  li a {
  margin: 0  !important;
  padding:0  !important;
  background-color:#182424 !important;

}
.popular-posts  .item-title a {
 opacity: 0.77;
  filter:alpha(opacity=77);
} </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-template.googlecode.com/svn/trunk/jquerykwick.js"></script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
                    $('.popular-posts ul').kwicks({
                    max : 600,
                    min : 300,
                    spacing : -4,
                    duration: 200
                  });
});
/*]]>*/
</script>