quarta-feira, 25 de maio de 2011

Posts Recentes com Efeito Rotativo

Você já viu aqui neste post, como incluir um widget que lista suas postagens recentes na sidebar.
O widget foi desenvolvido pelo Blogger Tricks, porém, eu consegui editar o widget original adicionando a ele um outro efeito, o que resultou em um widget com as últimas postagens do blog com efeito rotativo em forma de um pequeno slide onde mostra a lista de seus ultimos posts publicados no blog.

Se você quiser conferir o efeito veja aqui.

Se você quiser inclui-lo também em seu blog, vá até 'design' → 'Elementos de página' → Clique em 'Adicionar um elemento de página'→ Escolha tipo 'HTML/Javascript'.

Copie e cole o código abaixo:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#spywrapper {/*container geral*/
margin-top:5px;
padding:0px 0px;
height: 100%;
overflow: hidden;
position: relative;

}
#spywrapper ul{
width:auto;
overflow:hidden;
text-align:left;
padding: 0px auto 0;
margin:0px auto 0px;
}
#spywrapper li {
width:auto;
padding: 5px;
margin:0px 0px 6px 0px;
overflow: hidden;
background: #000; /*edite a cor de fundo*/
border:1px solid #B22222; /*edite cor da borda*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

#spywrapper li a {
text-decoration:none;
color:#fff; /*cor da fonte dos titulos*/
font-size:13px; /*Tamanho da fonte*/
text-align:justify;
height:30px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 5px 0px;
}
#spywrapper li img {
float:left;
margin-right:20px;
margin-top:5px;
margin-bottom:5px;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i37.tinypic.com/2mzk1tl.jpg";
imgr[1] = "http://i37.tinypic.com/2mzk1tl.jpg";
imgr[2] = "http://i37.tinypic.com/2mzk1tl.jpg";
imgr[3] = "http://i37.tinypic.com/2mzk1tl.jpg";
imgr[4] = "http://i37.tinypic.com/2mzk1tl.jpg";

showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
asize = 1;
acolor = "#8B8989";
aBold = true;
text = "comentarios";
summaryPost = 40;
summaryFontsize = 13;
summaryColor = "#fff";
numposts = 10;
home_page = "ENDEREÇO-DO-SEU-BLOG";
limitspy=4
intervalspy=4000
</script>
<div id="spywrapper">
<script src="http://dl.dropbox.com/u/3173073/HacksBlogger/recentpost-rotativo.js"></script>
</div>


Você pode personalizar o widget de acordo com as cores do seu template para dar mais destaque e uma boa aparência.
Marquei as partes editaveis no código para facilitar, agora é só usar a imaginação.

Lembrando que, a funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando "conflitos" entre si, por isso alguns arquivos javascript dão erro pra alguns, mas funcionam perfeitamente para outros.
Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários.

0 comentários:

Postar um comentário