Mostrar slides com as postagens recentes do blog
Veja como criar uma apresentação de slides com as suas postagens mais recentes no blog, assim você poderá gerar mais visitas dentro do seu próprio blog, melhorando até sua classificação no Google e outros sites de busca. Antes de colocar esse código verifique as configuração do seu Feed se não estiver na opção completa as Miniaturas das Imagens não aparecem.
Se quiser antes de colocar esse código no seu blog veja aqui uma demostração dos Slides de Postagens recentes. Então se gostou pode colocar esse widget no seu blog entrando na pagina layout, adicionar gadget, html/javascript e cole o código abaixo e já está 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 = "http://www.dicasparablogs.com.br/";
</script>
<script src="http://acessoriosparablogs.com.br/scripts/slide.js" type="text/javascript"></script>
Se desejar alterar a largura do gadget, mude esses dois valores que aparecem no código:
tablewidth = 360;
width:360px;
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 = "#ffffff"; 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 = 6500;
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 = 16;
acolor = "#000";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 12;
summaryColor = "#ccc";
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.
Aproveite e veja também:
Configurações e Ferramentas do Blog para Fazer Novas Postagens
E outras formas de colocar slides no blogger:
Colocar Gadget com Slides das Postagens Recentes do Blog
Fazer Apresentação de Slides no Blogger com as Postagens Recentes
Se quiser antes de colocar esse código no seu blog veja aqui uma demostração dos Slides de Postagens recentes. Então se gostou pode colocar esse widget no seu blog entrando na pagina layout, adicionar gadget, html/javascript e cole o código abaixo e já está 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 = "http://www.dicasparablogs.com.br/";
</script>
<script src="http://acessoriosparablogs.com.br/scripts/slide.js" type="text/javascript"></script>
Se desejar alterar a largura do gadget, mude esses dois valores que aparecem no código:
tablewidth = 360;
width:360px;
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 = "#ffffff"; 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 = 6500;
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 = 16;
acolor = "#000";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 12;
summaryColor = "#ccc";
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.
Aproveite e veja também:
Configurações e Ferramentas do Blog para Fazer Novas Postagens
E outras formas de colocar slides no blogger:
Colocar Gadget com Slides das Postagens Recentes do Blog
Fazer Apresentação de Slides no Blogger com as Postagens Recentes
Marcadores: Acessórios, Configurações Avançadas, Ferramentas, Gadgets, Personalizar