Esse código de slides é simples de usar, mas você precisa ter cuidado na hora de fazer as alterações para não apagar nada por engano no código. Entre na pagina modelo clique para adicionar um gadget e escolha a opção html/javascript então coloque esse código:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.frasescurtas.com.br/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>
Agora veja aqui as alterações que pode fazer para personalizar os slides no seu blog:
Imagem para o thumbnail (miniatura da imagem) quando a postagem não tem imagem:
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
Largura total do slide:
#spylist ul{
width:320px; altere o valor 320 neste trecho do estilo CSS.
Tempo para trocar cada slide: intervalspy=4000
Tamanho da imagem no slide:
thumbwidth = 70; - largura
thumbheight = 70; - altura
Se quando alterar o tamanho da imagem os slides aparecer cortados no seu blog então faça o ajuste no CSS do slide alterando o valor 350 neste trecho:
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
Mudar o tamanho da fonte do título da postagem no slide:
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:16px; - altere o valor 16
Quantidade de postagens mostradas nos slides e endereço do seu blog:
numposts = 10;
home_page = "http://www.frasescurtas.com.br/";
Depois que terminar só precisa salvar as alterações no gadget e pronto já tem slides dos posts recentes no seu blog.
Imagem para o thumbnail (miniatura da imagem) quando a postagem não tem imagem:
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
Largura total do slide:
#spylist ul{
width:320px; altere o valor 320 neste trecho do estilo CSS.
Tempo para trocar cada slide: intervalspy=4000
Tamanho da imagem no slide:
thumbwidth = 70; - largura
thumbheight = 70; - altura
Se quando alterar o tamanho da imagem os slides aparecer cortados no seu blog então faça o ajuste no CSS do slide alterando o valor 350 neste trecho:
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
Mudar o tamanho da fonte do título da postagem no slide:
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:16px; - altere o valor 16
Quantidade de postagens mostradas nos slides e endereço do seu blog:
numposts = 10;
home_page = "http://www.frasescurtas.com.br/";
Depois que terminar só precisa salvar as alterações no gadget e pronto já tem slides dos posts recentes no seu blog.
Lembramos que você não precisa alterar todos esses itens antes de usar os slides, alias nós sugerimos que altere somente o endereço do seu blog e faça um teste para ver os slides com suas postagens recentes funcionando no seu blog e depois personalize como quiser aos poucos, ou seja, faça uma alteração, salve e visualize o blog, pois desta forma que cometer algum erro será fácil identificar qual foi o trecho que errou.
0
Habilitando a Timeline. (Foto: Reprodução)
Alterando a Capa da Timeline (Foto: Produção)
Editando informações pessoais (Foto: Produção)
Escolhendo o nível de privacidade (Foto: Produção)
Encontrando páginas anteriormente curtidas (Foto: Produção)
Configurações de Conta (Foto: Produção)
Incluindo nome alternativo (Foto: Produção)
