Horizontal Accordion for Popular Post in Blogger

Popular Post for Blogger is the Best widget from Blogger (in my opinion). Some Features of Popular Post for blogger are :
SEO friendly (not javascript)
Easy to custumized
Can make for Feature Post
Dynamic result based on real statistic

Because of those features I made many widget to show popular post in many way. Now I made new widget using Jquery Kwikcs it can call Horizontal Acoordion. This jquery Plugin is easy to use and Implement it to popular post for blogger.

You can see pict from below

This script very easy to install, you only have to put the script to the new Gadget

Login to Blogger Dashboard and navigate to Design – Page Elements
Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)
After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
Put all script bellow to the “Content” of HTML/Javascript Gadget
Done- your popular post now with animation

<style>
.popular-posts {
  margin: 0px 0 30px 0;
  padding: 0 0 0px 0;
  position: relative;
  width: 900px;
  height: 363px;
  overflow: hidden;

}
.popular-posts  {
 /* recommended styles for kwicks ul container */
 list-style: none;
 position: relative;
 margin: 0;
 padding: 0;
}
.popular-posts  li{
 /* these are required, but the values are up to you (must be pixel) */
 width: 185px;
 height: 363px;
 /*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: 300px;
  height: 365px;
  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;
  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>