Como colocar Slide com as postagens recentes do Blog

Veja como criar uma apresentação de slides com as suas postagens mais recentes no blog.
Com esse Slide trás mais interesse aos visitantes, mostrando o que há de bom em cada postem do seu Blog.

Para colocar esse Windget é muito fácil e simples, primeiro vá no seu BLog, layout, Adicionar um Gadget, HTML/ JavaScripts e cole o código e salve e pronto....




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 800;
var pause = 6500;
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:150px;
width:360px;
overflow:hidden;
border: 1px solid #ccc;
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;
}
#slide img{
float:left;
margin-right:2px;
padding:10px;
border:solid 1px #ccc;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "URL IMAGEN 1";
showRandomImg = true;
tablewidth = 360;
cellspacing = 1;
borderColor = "";
bgTD = "#ffffff";
imgwidth = 120;
imgheight = 120;
fntsize = 16;
acolor = "#ff0000";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 12;
summaryColor = "#0000ff";
icon2 = " ";
numposts = 10;
label = "";
home_page = "Link do seu Blog";
</script>
<script src="http://acessoriosparablogs.com.br/scripts/slide.js" type="text/javascript"></script>

Altere o Código


No código: home_page = "Link do seu Blog";  vocês vão colocar o Endereço (Link) do seu Blog, vão substituir> Link do seu Blog Pelo o do seu Blog, 
exemplo: http://variasdicasparablogs.blogspot.com/


Como Alterar a Largura

Se desejar alterar a largura do Gadget, mude esses dois valores que aparecem no código:


width:360px; 
tablewidth = 360;

Se a postagem não tiver imagem, coloque nessa parte: imgr[0] = "URL IMAGEN 1"; o link de uma imagem, pois assim a imagem será exibida quando a postagem não tiver imagem.


Se quiser alterar o Plano de fundo do Gadget troque o código de cor pela cor que você deseja, altere esse parte do código: bgTD = "#ffffff";  você troca #ffffff  

Escolha a sua cor