WidGet Posts Mais Acessados (Top Posts)

[Felipe CDs]

Neste tutorial, irei encinar a como deixar a widget do PostRank exibir somente lista de link das postagens mais acessadas, como mostra a imagem abaixo.

(ScreenShot do meu blog)

Espero que gostem do tutorial e támbem itendam. ;D

Bem, eu vinha procurando uma solução para uma windget dos posts mais acessados para o Blogger, mas a única opção e única alternativa que tinha era o PostRank. Então o que fiz foi tentar melhorar o visual e deixar apenas a lista de links, e depois de tantas tentativas sem sucesso já tinha desistido, pois apenas o que eu conseguia era retirar o background da widget do PostRank padrão, até ai ficou tudo perfeito, ficou a lista de links normal, mais ainda havia um campo para busca por postagem na widget, e ai começou o problema. Tentei tirar modificando a CSS, depois Javascript, procurei soluções pela web e a mais de 5 meses procurando e sem sucesso, acabei desistindo. Depois de um bom tempo, pelo menos 1 ano, olhando meu site, pensei em um pequeno detalhe que nunca havia pensado. Ontem pensei, "Eu sou muito burro mesmo!", a solução: colocar um comando para a "‹table›" não aparecer "Simple! XD".

Tutorial:

------------------------------------
Links Úteis PostRank:
Registre-se
Customizar WidGet
------------------------------------

Primeiro precisa cadastrar-se no site do PostRank Clicando Aqui. Na parte de customização da widget o site vai lhe fornecer um código para colocar no Blogger. Pegue apenas o ID que fica na seção "feed_hash".
Exemplo:

"feed_hash": "d426737211cd3361524d42e6c4f319d3",

Copie apenas o ID entre as aspas depois de "feed_hash".

Abra uma nova GadGet no Blogger e coloque o código abaixo e substitua a
frase "SEU ID AQUI" pelo seu ID gerado no site do PostRank.

Código:

<script src="http://www.yourjavascript.com/1219553607/mais_acessados.js" type="text/javascript"></script>
<script type="text/javascript">
var options = {
    "feed_hash": "SEU ID AQUI",
    "num":                  6,
    "theme":            "diy",
    "hasLink":            true
};
new PostRankWidget(options);
</script>

Este é o link para o Javascript da WidGet modificado: http://www.yourjavascript.com/1219553607/mais_acessados.js

Recomendo que hospede em outro servidor.

Explicação para entender melhor a configuração da widget:
---------------------------------------------------------------------------

"feed_hash": "SEU ID AQUI", --> ID de identificação da sua widget;
"num": 6 , --> Número de posts a serem exibidos;
"theme": "diy", -->Tema da widget;
"hasLink": true --> Link para a postagem (true: Ativa | false: Desativa).

---------------------------------------------------------------------------

Ocultando o campo de busca "table":

Para ocultar o campo de busca, basta procurar na CSS do Template o trecho
referente a gadget onde a widget do PostRank está, no meu caso era o seguinte:

Código:

.sidebar {
    color: #ffffff;
    line-height: 1.6em;
    text-align: left;
    margin: 0;
  }

Basta adicionar o seguinte trecho:

Código:

.sidebar table {
    display: none;
    }

Obs.: A CSS que usei é no caso a do meu template, referente a minha gadget caso a classe ou ID da sua gadget for diferente, substitua a classe sidebar pela classe referente a sua gadget.

Pronto, agora basta visualizar o template e ver se está tudo correto.

Se você quizer ver a widget funcionando para ver como ficou basta acessar meu site: www.felipecd.com

Bem galera, é isso. Espero que goste do tutorial.

Atenciosamente,
Felipe Florindo.

[miler]

Muito bom este tutorial!

Valeu e Obrigado!

[Marcos]

1° É ERRADO fazer isto, eu fazia mas vique nãoera justo com o site post Rank.
2° masja que vc ja esta fazendo vou dar uma dica,n precisa hospedar o script em seu servidor o proprio postrank lhe da uma URL de script e a personalização é a mesma...

[Felipe CDs]

Marcos, só fiz isso porque fica deselegante o blog com o widget do PostRank completo, pois ele exibe numerações com cores definídas e para que não seja exibido as numerações e backgrounds do postRank e fique só a lista de links é preciso usar o javascript modificado que se encontra na URL que informei. se quizer podem usar o link hospedado no meu host, pois não vou excluir ele. Mas por via das dúvidas, recomendo que hospede ele em seu próprio servidor.

Mas quem quizer exibir os créditos do PostRank basta adicionar o código abaixo no final da widget:

Código:

<div style="text-align: center;"><span style="color: #484848; font: normal 11px Arial;">By <a href="http://www.postrank.com/" target="_blank" style="color: #ff9900; font: bold 11px Arial; text-decoration: none;">PostRank</a></span></div>

vlw!

[Marcos]

na verdade o propriopost rank da uma versão sem NAD e garantoque deixoIGUAL AO SEU.
mas eu estou criticandoo fato de vc usar o post rank e n dar os devidos creditos.
E volto dizerque vc n precisa hospedar o script no seu servidor o proprio post rank lhe da uma URL...
e da para personalizar da mesma forma ...

[Felipe CDs]

Sei que o PostRank disponibiliza um script próprio e o tema limpo, mas não é perfeito. Daria até para bloquear a exibição de alguns caracteres com CSS, mas ele exibe outros elementos que não são ocutaveis com CSS, como o titulo ou a média de popularidade do post. Pois o script fornecido pelo PostRank cria como uma pagina html completa. Se você abrir o script, notará que há um link CSS que é esse (http://api.postrank.com/static/widget-v2.css), e no CSS existe definições para as TAGs "ol", "ul" e "li", sendo que no próprio template já criamos uma definição para as TAGs. O resultado disso ultilizando o javascript do PostRank é que ele aplica duas definições ao mesmo tempo. O resultado utilizando o JS do PostRank você pode ver na imagem abaixo, e o resultado usando o JS modificado você pode ver na imagem no topo deste tópico.



O resultado mesmo com o tema limpo da widget fica desastroso. É adicionado um segundo titulo a widget, é as médias de popularidade e o titulo das postagens aparecem em linhas individuais alem de aparecer campo de busca e o link do PostRank no início da widget.

O que fiz no JavaScript, foi apenas apagar os chamados de CSS do PostRank e que eu possa dar minhas próprias definições a lista de links. O proposito deste tópico foi oferecer uma widget limpa para que qualquer usuário possa dar uma aparencia própria a suas widget para que fique mais elegante.

No caso dos créditos, eu estava pensando em colocar uma barra no final da página, dando os créditos aos criadores de widgets, hacks Blogger, imagens, entre outros. Até porque devo créditos a muita gente! XD
Preciso dar créditos ao próprio IceBreaker (Sergio Estrela), porque os comentários me basiei nos blog dele, o PostRank, Usuário Compusivo, Dicas Blogger, jQuery, etc.

Marcos, gostei de você pelas suas idéias, críticas e sugestões. Espero colher idéias e cultivar uma amizade com você e todos que acessam o IceBreaker. Gosto muito de desafios, design e estou aberto para novas idéias.

Vlw... Abraços!!!
________________________
www.felipecd.com | www.felipecds.net

[Marcos]

cara... vou ter quedizerque vc esta errado pela 3° vez...da para ocultar TUDO sim ...
falo pq eu SEI E JA FIZ ...
basta vc olhar um pouco mais...
vc n disse que gosta de desafio?
eu digoue da para deixr como esta o seu...
sem hospedar o proprio arquivo =) .
então esta feito o desafio lkkk

[Rafael]

O meu tá aparecendo os top posts do post rank. Como faço para ser os top do meu blog? Será que nau fuciona em blogs com templates com thumbnails?

Ou será q precisa esperar ter os acessos para que saia alguma coisa especifico do meu blog?

[Felipe CDs]

O meu tá aparecendo os top posts do post rank. Como faço para ser os top do meu blog? Será que nau fuciona em blogs com templates com thumbnails?

Ou será q precisa esperar ter os acessos para que saia alguma coisa especifico do meu blog?

Você deve fazer primeiro o cadastro no PageRank, depois vvocê precisa customizar o widget, como mostra no tutorial. Na área de customização pede para que você insira sua URL do seu blog, onde vai ser gerada uma ID.

Leia o tutorial atentamente que você fará a widget funcionar.

Atenciosamente,
Felipe Florindo.
www.felipecds.net | www.felipecd.com