Slide posts populares Carousel Slider

 DEMO

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código.

<style>

#slider ol,#slider ul,#slider li
 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}

.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:150px;
  height:120px;
}

ol, ul {
    list-style: none;
    }

.wrapper {
    width: 720px;
    margin: 0 auto;
    position:relative;
}

.clear {
    clear: both;
    }

.display-none {
    display:none;
    }

#slider {
    position: relative;
    top: -2px;
    z-index: 1;
    }

#slider .prev {
    position: absolute;
    width: 21px;
    height: 21px;
    display: block;
    background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
    top: 150px;
    left: -51px;
    }

#slider .next {
    position: absolute;
    width: 21px;
    height: 21px;
    display: block;
    background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
    top: 150px;
    right: -51px;
    }

#slider #slider-wrapper {
    width: 720px;
    height: 300px;
    padding-top: 40px;
    overflow: hidden;
    z-index: 999;
    position: relative;
    }

#slider #slider-inner {
    width:9780px;
    height:300px;
    position:absolute;
    }

#slider .article {
    width: 150px;
    height: 300px;
    float: left;
    margin-right: 30px;
    }

#slider .article img {
    margin-bottom: 25px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    }

#slider .article h2 {
    margin-bottom: 15px;
    line-height: 18px;
    }

#slider .article h2 a {
    font-size: 18px;
    color: #404040;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff;
    line-height: 23px;
    }

#slider .article .meta-comments a {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #fff;
    }

#slider .article .item-snippet {
    margin-left: 15px;
    }

#slider .widget-item-control { display: none}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>


<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(G).H(3(){$(\'.5-6\').I(\'<a w="#o"  p="o"></a><a w="#j" p="j"></a>\');$(\'.5-6 x\').q(\'<d k="2-y" />\');$(\'.5-6\').q(\'<d k="2"><d k="q-J"></d></d>\');$(\'.5-6\').f(\'y\');$(\'.5-6 x\').l(\'k\',\'2-z\');$(\'.5-6 K\').f(\'A\');$(\'.5-6\').L("M").l(\'N\',3(i,e){m e.O("P-c","Q")})});n.B.C=3(D){b.g&&D.R(b);m b};n.B.S=3(r){s E=n(b);r=r||E.l(\'T\');m b};n(3($){h($.t.U){$(\'u\').f(\'v-V\');h($.t.F==7)$(\'u\').f(\'v-W\');h($.t.F==8)$(\'u\').f(\'v-X\')}$(\'#2\').C(3(){s 9=0,g=Y.Z($(\'#2 .A\').g/4);$(\'#2 .o, #2 .j\').10(3(){s i=$(b).l(\'p\').11(\'j\')!=-1?1:-1;9+=i;h(9<0)9=g-1;h(9>g-1)9=0;$(\'#2-z\').12({13:-14*9});m 15})})});',62,68,'||slider|function||popular|posts|||current||this||div||addClass|length|if||next|id|attr|return|jQuery|prev|class|wrap|default_value|var|browser|body|is|href|ul|wrapper|inner|article|fn|rdy|func|el|version|document|ready|prepend|shadow|li|find|img|src|replace|s72|s1600|apply|placeHolder|placeholder|msie|ie|ie7|ie8|Math|ceil|click|indexOf|animate|left|720|false'.split('|'),0,{}))
//]]>
</script>

Agora arraste o widget para baixo das postagens populares.

Crédito: AbuFarhan