Postagens populares em forma de slide com setas

 DEMO

Há um tempo devendo essa postagem, onde é possível colocar os posts mais vistos de seu blog em forma slide com setas, trago agora para vocês. Quem  adaptou para o Blogger foi Abu Farhan, portanto, todos os aplausos e agradecimentos a ele.

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">
<!--
#PopularPosts1{
height:300px;
margin-bottom: 50px;
}

.item-content {
width:900px;/*Comprimento do slide*/
height:300px;/*Largura do slide*/
position:relative;
}

.slider {
width:900px;/*Comprimento do slide*/
height:300px;/*Largura do slide*/;
margin: 10px auto;
overflow:hidden;
margin-top:5px;
padding:0px 0px;
}

.item-snippet {
background: #647A8C;
width:900px;/*comprimento da faxixa da inscrição*/
font-size:12px;/*Tamanho da fonte da inscrição*/
color:#fff;/*Cor da letra*/
padding:5px 5px 10px 5px;
position:absolute;
bottom:0;
text-align:left;
font-style:italic;
}

.item-title{
font-size:20px;/*Tamanho da fonte do título*/
color:#fff;/*Cor do título*/
font-weight:bold;
font-style:normal;
margin-bottom:5px;
}

.item-title a:link,.item-title a:visited{
color:#fff;
text-decoration:none;
border:none !important;
padding:0 !important;
}

.item-thumbnail img{
padding:0 !important;
}

.item-thumbnail a{
padding:0 !important;
}
.crosscol .widget-content {position:relative;}
.slider ul, .slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}

#slider2{margin-top:1em;}
.slider li, #slider2 li{
width:900px;
height:300px;
overflow:hidden;
}

.item-thumbnail img{
width:900px;/*Comprimento da imagem*/
height:300px; /*Largura da imagem*/
}

#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:140px;
z-index:900;
}

#nextBtn, #slider1next{
left:870px !important;/*Posição seta direita*/
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:200px; /*posição seta quanto a altura*/
width:30px;
z-index:800;
}

#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:70px;
height:127px;
background:url(http://2.bp.blogspot.com/-ZRxTHQO2Y0E/T0vR6timyII/AAAAAAAAAEU/pnRLRMKrrWg/s1600/8395_64x64.png) no-repeat 0 0;/*imagem seta ESQUERDA*/
}

#nextBtn a, #slider1next a{
background:url(http://4.bp.blogspot.com/-D3_Ed_8H_S8/T0vR60sL6xI/AAAAAAAAAEc/2kxS94L277Q/s1600/8415_64x64.png) no-repeat 0 0;/*imagem seta DIREITA*/
}

ol#controls{
margin:1em 0;
padding:0;
height:38px;
}

ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}

ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}

ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
.test{margin:30px;}
-->
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-for-blogger.googlecode.com/svn/trunk/easysliderpopular.js' type='text/javascript'></script>