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.
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