Slide Postagens Recentes

Posted by Anônimo On sexta-feira, 29 de abril de 2011 0 comentários

O slide com as ultimas postagens é muito util, pois mostra as postagens do seu blog para o visitante, eu uso esse slide em outros blogs e gosto muito pois aumenta a permanência do visitante no blog é muito bom para a divulgação do seu trabalho ele vai descendo mostrando várias postagens suas, é muito legal o efeito.


Para isso é só ir em adicionar gadget,html/javascript e copiar o código abaixo, modificar a parte em vermelha e salvar.

Na onde esta os numeros em negrito é o tamanho do slide. Onde estahttp://connectionweb.blogspot.com/ dessa forma você troca e coloca url do seu blog.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:300px;/*largura do widget*/
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:320px;/*largura do widget*/
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;/*aqui o fundo do widget*/
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:15px;
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";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 3005;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = "<a href='http://www.mundoirado.com'> m1</a> ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://connectionweb.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://dl.getdropbox.com/u/1367826/recentpostthumbspy-min.js" type="text/javascript"></script>
</div>

 Com o tempo nossos blogs ficam cheios postagens e muitas caem no esquecimento para isso não ocorrer precisamos de um mapa do site que aqui será um mapa do Blog mais existem muitos scripts desses mapas mais nenhum conta com o belo efeito que esse tem para matar sua curiosidade clique em demonstração.

Demonstração
1- Agora vamos instalar é muito fácil vamos criar uma pagina estática 

2- Cole o script na aba Editar HTML e edite a parte em vermelho pelo endereço do seu Blog sem a barra / no final.

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://endereço do seu blog aqui/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>




4- Publicar página 
Pronto agora seu Blog já tem um belo mapa do site.