Como adicionar ao Blogger o Botão "eleja-me" do DoMelhor

O Ubuntued tem uma nova funcionalidade que permite o leitor votar nos artigos que gostar de forma a promover o blog. Esse voto vai para o site domelhor.net, um site que cresce conforme os votos que os utilizadores dão. Depois, os utilizadores podem ver os artigos mais votados nas categorias que mais lhes interessa. Para mais informações visite este link.

Esta funcionalidade, que adicionei, é este simples botão verde que está no final de cada artigo. 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".

Espero ter ajudado, e caso tenham gostado deste artigo não se esqueçam de votar :)


Peço desculpa pelo tema deste artigo, que nada tem a ver com o Sistema Operativo Ubuntu, mas achei que esta mensagem seria importante para todos os Bloggers ou Blogueiros, como os nossos amigos do Brasil dizem (:

Posts Relacionados: