Já foi publicado há muito tempo um tutorial que mostrava como mostrar os artigos recentes (Blogger), como o tutorial valia somente para a plataforma de blogs Blogger, hoje você vai ver um tutorial que pega na maioria dos sites ou blogs que suportam HTML e Java Script.
Lembrando que esse gadget foi achado no site Blogger Tricks e modificado por Matheus Amorim — designer do Amotrix.
PS — Amotrix | 19/03/2012 (18:45)
Instalando...
Como não é necessário CSS ou estilo de modo. É necessário somente instalar em uma área para gadgets suportantes a HTML / JavaScript, o seguinte 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">
#spywrapper {/*container geral*/
margin-top:5px;
padding:0px 0px;
height: 100%;
overflow: hidden;
position: relative;
}
#spywrapper ul{
width:auto;
overflow:hidden;
text-align:left;
padding: 0px auto 0;
margin:0px auto 0px;
}
#spywrapper li {
width:auto;
padding: 5px;
margin:0px 0px 6px 0px;
overflow: hidden;
background: #fff; /*edite a cor de fundo*/
border:1px solid #F8F8FF; /*edite cor da borda*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#spywrapper li a {
text-decoration:none;
color:#000; /*cor da fonte dos titulos*/
font-size:13px; /*Tamanho da fonte*/
text-align:justify;
height:30px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 5px 0px;
}
#spywrapper li img {
float:left;
margin-right:20px;
margin-top:5px;
margin-bottom:5px;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://amotrix.webs.com/Banners/Banner%2098x62.png";
imgr[1] = "http://amotrix.webs.com/Banners/Banner%2098x62.png";
imgr[2] = "http://amotrix.webs.com/Banners/Banner%2098x62.png";
imgr[3] = "http://amotrix.webs.com/Banners/Banner%2098x62.png";
imgr[4] = "http://amotrix.webs.com/Banners/Banner%2098x62.png";
showRandomImg = true;
boxwidth = 300;
cellspacing = 8;
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
asize = 1;
acolor = "#8B8989";
aBold = true;
text = "comentarios";
summaryPost = 40;
summaryFontsize = 13;
summaryColor = "#fff";
numposts = 5;
home_page = "http://endereço_do_seu_site.";
limitspy=4
intervalspy=4000
</script>
<div id="spywrapper">
<script src="http://amotrix.webs.com/Codigos/JavaScript/Efeito%20de%20Artigos%20Recentes%20rotativo%20verticalmente.js"></script>
</div>