30 de nov de 2011

Postagens populares em forma de slide com setas


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>

12 comentários:

  1. Israel, funciona sim, perfeitamente. Verifique se você possui as postagens mais populares e se o feed de seu blog está habilitado. Abraços.

    ResponderExcluir
    Respostas
    1. Você conseguiu instalar? Não entendi o que tenho que colocar na parte das "postagens populares"

      Excluir
  2. òtimo widget.vc poderia explicar como redimencionar a caixa de slides? Assim caberia em qq template. Obrigada.

    ResponderExcluir
  3. Elke, voce esqueceu de dizer que a gente tem que adicionar, TAMBÉM, o widget de POSTS POPULARES.

    Minha pergunta é se a gente pode exibir os posts de uma CATEGORIA ESPECÍFICA. Por exemplo, a cagegoria "DESTAQUES".

    Abraço!

    My blog: www.vibeconnexion.net

    ResponderExcluir
  4. Não DJ Incógnito, não esqueci de escrever que é necessário colocar o widget não, basta ler que verá que escrevi sim. Não é possível exibir por categoria não. Abraços.

    ResponderExcluir
  5. Consegui, selecionei as medidas de acordo com meu template, no entanto os slides não ficam centralizados, aparece metade de um slide e metade do outro, como resolvo isto?

    ResponderExcluir
  6. Olá, poderia me ajudar, o título da postagm está aparecendo 2 vezes do slide, tem como arrumar isso?

    ResponderExcluir
  7. Perfeito. No meu funcionou.Fiz os ajustes na altura e na largura das postagens. parabéns pela facilidade do
    tutorial. Apenas não entendi por que as fotos só aparecem se já estiverem no blog. Se eu fizer uma upload de
    fotos que não esteja no blog, ela não aparece nos slides. poderia me explicar também como faço para colocar
    somente as últimas postagens e não apenas as populares.

    ResponderExcluir
  8. Funcionou legal no meu blog, porém, o gadget da minha lista de blogs apresentou erro... ficou um espaço enorme entre o nome de um blog e outro... é como se a altura do slide estivesse refletindo na distancia entre uma linha e outra do texto!

    www.pedalsolepoeira.blogspot.com.br

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube