Web Dois Ponto Zero: Blogroll em Ajax

Blogroll em Ajax - Animado -

A lista de blogs que seguimos, vulgarmente denominada de "blogroll" é uma constante na maioria dos blogs/sites. Geralmente essa lista é estática.
Não é o que acontece com o exemplar que podem ver no rodapé deste meu blog, que apresenta efeitos dinâmicos muito atractivos.
Trata-se de mais um "freebie" do Hoctro's Place, e vou aqui tentar explicar como o podem incorporar nos vosso blog.

1. Obtenha a sua "API key" do google aqui:
http://code.google.com/apis/ajaxfeeds/signup.html

2. Adicione um "Elemento de Página" / "Miniaplicação" do tipo "HTML/Javascript" no seu blog, a partir do seu "Esquema".

Pode adicioná-lo logo na localização que pretenda que ele fique, mas isso não é crucial uma vez que, como sabe, o poderá depois mudar de sítio no seu layout, por simples "Clique e arrastamento"

Coloque o código seguinte imediatamente antes da tag

</head>

depois de a localizar no código html do seu blog, não se esquecendo de colocar a sua "API key" do Google no local apropriado deste código


<script src='http://www.google.com/jsapi/?key=YOUR-KEY' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

<style type='text/css'>
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
}
.gfg-title {
color : #612e00;
background-color: #FFF3DB;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: "Georgia", sans-serif;

}
</style>

3. Adicione o código seguinte à "Miniaplicação" que criou no passo 2


<b:widget id='BlogList2' locked='false' title='' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>
<div id='bl2008'>Loading ...</div><br/><br/>
<h6>Widget by <u><a href='http://hoctro.blogspot.com/2008/10/showing-your-blog-list-as-ajax-feed.html'>Hoctro</a></u></h6>
<div class='widget-content'>
<script type='text/javascript'>
<!-- *****************http://hoctro.blogspot.com*****Oct,2008********** -->
<!-- *************Blog List as Feed Widget by Hoctro- Take One******* -->
var feedArray = new Array();
var feedName;
var feedUrl;

<b:loop values='data:items' var='item'>
feedName = "<data:item.blogTitle/>";
feedArray.push(feedName);

feedUrl = "<data:item.blogUrl/>";
var string_b = "blogspot.com";
var iof_b = feedUrl.indexOf( string_b );
if( iof_b != -1 )
feedUrl = "<data:item.blogUrl/>feeds/posts/default";

feedArray.push(feedUrl);
</b:loop>

// Handcode external blog feeds such as Wordpress' here, in two lines of code
// First is the name inside the quote, i.e., feedArray.push("ThemeLib");
// then the url, i.e., feedArray.push("http://feedproxy.google.com/Themelib");
//feedArray.push("ThemeLib");
//feedArray.push("http://feedproxy.google.com/Themelib");

function blogList2008() {
new GFdynamicFeedControl(feedArray, 'bl2008',
{stacked : true, numResults : 3,
title : 'My Blog List', displayTime : 7500});
}

google.load("feeds", "1");
google.setOnLoadCallback(blogList2008);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Vá a Layout/page elements e clique em Editar no widget que criou e clique depois em "Adicionar à lista"

Agora é só ir adicionando, através do respectivo URL, os blogs que pretende que façam parte da sua lista de blogs
Irá obter algo parecido com
E pode ver este widget no meu blog, em funcionamento no rodapé deste blog.
Happy Christmas.