WidGet Posts Mais Acessados (Top Posts)

(ScreenShot do meu blog)

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


Tutorial:

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



"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;
    }

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.

Muito bom este tutorial!

Valeu e Obrigado!

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...

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 ...

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

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

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?

Rafael escreveu: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