Como criar um slide de postagens recentes com imagem

Como criar um slide de postagens recentes com imagem

Há sempre uma grande necessidade de "linkarmos" o nosso próprio conteúdo, e um método muito bom para isso é através dos widgets, neste irá aparecer um slide com uma imagem e descrição (Opcionais) das últimas postagens de seu blog.
O melhor de tudo deste widget é a simplicidade da instalação.

Entre em seu blog, entre em DESIGN na pagina layout, adicionar gadget, html/javascript e cole o código abaixo:
<script src="https://sites.google.com/site/kassionubia/codigos/jquery.min.js?attredirects=0&d=1" 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 = "http://www.seublog.blogspot.com/";
</script>
<script src="https://sites.google.com/site/kassionubia/codigos/slide.js?attredirects=0&d=1" type="text/javascript"></script>
Lembre-se de modificar o endereço de seu blog, é a única alteração obrigatória do código e não esqueça de manter a barra invertida no final ("/"), sem ela o widget não funcionará.
E além do endereço do blogger, porém não obrigatório é que voce deve colocar uma imagem qualquer para aparecer no slide caso sua postagem não possua nenhuma imagem: imgr[0] = "URL IMAGEN 1"; Substitua o endereço da imagem.

Para modificar o widget ao seu modo basta seguir os passos abaixo:

1º Largura e cor:

tablewidth = 360;  
width:360px;    /* Modifique estes dois valores para alterar a largura do gadget, os dois devem possuir os mesmos valores */
bgTD = "#ffffff";   /* Modifique a cor de fundo do widget alterando o codigo html da cor, clicando aqui: Código das cores html */

2º Controle de velocidade das transições:

var first = 0;   /* var first: tempo para iniciar (deixe o valor 0) */
var speed = 800;    /* var speed: velocidade da transição (mudança de slide) */
var pause = 6500;   /* var pause: tempo de pausa em cada slide  */

3º Tamanho de imagens, fonte, cores, etc:
 

imgwidth = 120;     /* Largura da imagem do slide */
imgheight = 120;     /* Altura da imagem do slide */
fntsize = 16;     /* Tamanho da fonte do título do slide */
acolor = "#000";     /* Cor do título do slide */
aBold = true;     /* Negrito para o titulo do slide: true = negrito | false = não estar em negrito */
icon = " ";     /*
text = "no";     /*
showPostDate = false;     /* Referente a mostrar a data da postagem ou não. true=mostra | false=não mostra */
summaryPost = 40;     /* Número de letras do resumo */
summaryFontsize = 12;     /* Tamanho da fonte do resumo do slide */
summaryColor = "#ccc";     /* Cor da fonte do resumo do slide */
icon2 = " ";     /*
numposts = 10;     /* Número de postagens que devem ser mostradas */

Escolha as melhores modificações que devem combinar com seu layout, vá testando e escolha o melhor.