>

domingo, 18 de setembro de 2011

Como colocar slides de postagens recentes no blog

O modo de colocar esse widget é muito simples, entre 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://anjodosblogss.blogspot.com/";
</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


Fica assim::





7 comentários:

Anônimo disse...

Como essas cores são "feias" porque não combinam com meu blog, eu tentei mudar, mas aí a largura tudo ficou "estragado" e aparecia uma totalmente diferente... Deu pau...
Mas se eu só copiar e colar vai, só quando vou fazer as mudança que dá pau >.<

Jr disse...

tem como tirar esses creditos abaixo do slide

Jhamyres Santos disse...

Não consegui fazer. Que raiva to tentando a um tempão...

george amaral disse...

PARABÉNS PELO BLOG E OBRIGADA!!! DEU SUPER CERTO NO MEU E FICOU SHOW!!!!!!

Casimiro Gime disse...

as minhas publicacoes nao estao aparcer na caixa do slide pque

Francielle Pajola disse...

Acabei de colocar meus slides... AMEI! hehe... Gostaria de saber se tem como mudar a cor de fundo, que está branco... queria colocar uma outra corzinha...

Angela Santos disse...

Boa Noite!
Consegui fazer as modificações.
Ficou uma beleza!
Parabéns e muito Obrigada.
:)

Postar um comentário

Se tem alguma duvida comente,se te ajudou comente,se faltou algo comente não custa nada.

Related Posts Plugin for WordPress, Blogger...