Mostrar Slide de Postagem Recente no Blog

Próxima Dica

Vá em Layout adicionar um Gadget HTML/JavaScript e cole o código abaixo.

<script src="http://sites.google.com/site/postsrecentesslide/postsrecenteslide/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 800;
var pause = 7500;
function removeFirst(){
first = $('ul#slide li:first').html();
$('ul#slide li:first')
.animate({opacity: 0.5}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);

}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#slide').append(last)
$('ul#slide li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>
<style type="text/css">
#slide{
height:190px;
width:95%;
overflow:hidden;
border: 1px solid #C94093;
margin: auto;
padding:5px;
}
#slide li{
margin: 10px 0 0 0;
list-style:none;
}
#slide .news-title{
display:block;
text-align: center;
line-height: 10px;
color: #C94093;
}
#slide img{
float:left;
margin-right:2px;
padding:10px;
border:solid 1px #C94093;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "URL IMAGEN 1";
imgr[1] = "URL IMAGEN 2";
imgr[2] = "URL IMAGEN 3";
imgr[3] = "URL IMAGEN 4";
imgr[4] = "URL IMAGEN 5";
showRandomImg = true;
tablewidth = 950;
cellspacing = 1;
borderColor = "";
bgTD = "Transparent";
imgwidth = 150;
imgheight = 150;
fntsize = 20;
acolor = "#808080";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 300;
summaryFontsize = 15;
summaryColor = "#000000";
icon2 = " ";
numposts = 10;
label = "";
home_page = "http://NOME DO SEU BLOG.blogspot.com/";
</script>
<script src="http://sites.google.com/site/postsrecentesslide/postsrecenteslide/recentepostslide.js " type="text/javascript"></script>

Se desejar alterar a largura do gadget, mude esses dois valores que aparecem no código:
tablewidth = 950; “Lagura”
width:95%

Apenas será necessário colocar o endereço do seu blog no local indicado no final do código (deixe a barra no final do endereço). Além disso, se quiser pode configurar os tamanhos de fontes e quantidades de caracteres que tem o resumo veja a seguir como personalizar o código da apresentação de slides dos posts recentes do blog, sugerimos primeiro instalar sem fazer nenhuma alteração apenas para testar, porque são muitas as opções que podemos alterar e fazendo isso aos poucos e visualizando o resultado no blog ficará mais fácil achar e corrigir algum erro durante as modificações.

Se quiser alterar a cor de fundo mude essa linha: bgTD = "Transparent"; Veja aqui o código das cores em html para alterar esse gadget. Outro trecho que está no inicio controla a velocidade, veja:
var first = 0;
var speed = 800;
var pause = 7500;

Como isso funciona:
var first: tempo para iniciar(deixe o valor 0)
var speed: velocidade da transição(mudança de slide)
var pause: tempo de pausa em cada slide

Coloque neste trecho o endereço de uma imagem, assim ela será exibida quando a postagem não tiver imagens.
imgr[0] = "URL IMAGEN 1";

Veja este trecho fica no final de código e controla praticamente tudo:
imgwidth = 120;
imgheight = 120;
fntsize = 20;
acolor = "#000";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 300;
summaryFontsize = 15;
summaryColor = "#000000";
icon2 = " ";
numposts = 10;

Agora veja o que as principais linhas de código fazem e depois altere como desejar
Imgwidth: largura da miniatura
Imgheight: altura da miniatura
Fntsize: tamanho da letra do titulo
Acolor: cor do titulo
summaryPost: numero de letras do resumo(começo da postagem)
summaryFontsize: tamanho da letra do resumo
summaryColor: cor da letra do resumo
numposts: numero de postagens mostradas

Existem outras coisas que podem ser modificadas como, por exemplo, a cor da borda que é #ccc; e nas mesmas linhas podemos até mudar o estilo das bordas, mas enfim depois que instalar o código poderá ver quais modificações farão esse novo widget combinar melhor com o seu blog.

Próxima Dica