DoMelhor: O Blogue

O leitor Cláudio Novais estendeu a sua participação na comunidade DoMelhor disponibilizando um método de integrar os botões de voto no DoMelhor em blogues alojados no Blosgpot.
O método está descrito no seu blogue: Nova funcionalidade no Ubuntued. Sem prejuízo da consulta do artigo, aqui se reproduz o essencial.

Apesar de ser simples, a sua criação não é assim tão simples. Desta forma mostrarei, neste artigo, para outros Bloggers, como adicionar este botão. E não existe nenhum botão adaptado aos blogs do Blogger.com, blogs que no seu site acabam com blogspot.com. Assim, decidi investigar o funcionamento destes blogs, e comparar com um botão já feito para WordPress. Então, através do blog do domelhor.net, descobri o blog diariodeumwebdesigner.com que tem o código para adicionar aos Blogs WordPress. De seguida mostro o dito código:

<script>
var domelhor_url=escape(”URL_DO_POST_ADICIONADO_NO_DOMELHOR”);
var domelhor_bgcolor=”COR_DE_FUNDO”;
</script>
<script src=”http://domelhor.net/domelhor.js”></script>

Com este conteúdo, consegui fazer um equivalente para os sites do blogger.com:

<script type=\’text/javascript\’>
domelhor_url=”<data:post.url/>”;
domelhor_bgcolor=”COR_DE_FUNDO”;
</script>
<script src=\’http://domelhor.net/domelhor.js\’ type=\’text/javascript\’/>

em que COR_DE_FUNDO é a cor de fundo do seu blog, pode dizer a palavra da cor em inglês (black, red, green) ou dizer o valor da cor (333333,FFF000,FF3300).

Instalar no Blogger esta funcionalidade:
Para instalar esta funcionalidade, faça login no blogger, escolha a opção Esquema, e de seguida escolha Editar HTML.De seguida, faça uma cópia de segurança para o caso de ocorrer algo de errado. Para tal, clique em Transferir modelo completo, e guarde o ficheiro.
Agora, clique no visto que diz Expandir modelos do widget e procure a seguinte linha:

<p><data:post.body/></p>

Através desta linha vai determinar em que posição deve adicionar o botão. Assim, se quer adicionar o botão de forma a ficar no canto superior direito do seu artigo adicione antes da linha o código, ficando assim:

<div style=\’float:right; margin-left:10px;\’>
<script type=\’text/javascript\’>
domelhor_url=”<data:post.url/>”;
domelhor_bgcolor=”333333″;
</script>
<script src=\’http://domelhor.net/domelhor.js\’ type=\’text/javascript\’/>
</div>
<p><data:post.body/></p>

o resultado é este:
Caso prefira do lado esquerdo, basta substituir o “right” por “left”, ficando:

<div style=\’float:left; margin-left:10px;\’>
<script type=\’text/javascript\’>
domelhor_url=”<data:post.url/>”;
domelhor_bgcolor=”333333″;
</script>
<script src=\’http://domelhor.net/domelhor.js\’ type=\’text/javascript\’/>
</div>
<p><data:post.body/></p>

e o resultado é:
Pode optar, como eu, de pôr em baixo, assim, simplesmente adiciona o código depois da dita linha, ficando desta forma:

<p><data:post.body/></p>
<div style=\’float:right; margin-left:10px;\’>
<script type=\’text/javascript\’>
domelhor_url=”<data:post.url/>”;
domelhor_bgcolor=”333333″;
</script>
<script src=\’http://domelhor.net/domelhor.js\’ type=\’text/javascript\’/>
</div>

Novamente, se quiser do lado esquerdo basta substituir o “right” por “left”.

This entry was posted on Sexta-feira, Abril 18th, 2008 at 11:49 and is filed under Widgets e Plugins dM. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.