Login

Esqueci minha senha

Blogger
WordPress
Divulgue seu Blog
Software
Hardware
Geral






Últimos assuntos
» Site de seguidores
Ter Out 14, 2014 6:03 am por David70

» Promoção: Você no Guia Twitter!
Sex Set 12, 2014 3:34 am por ashley1

» Como colocar marcador como menu no blogger
Dom Set 07, 2014 8:13 pm por Giovanne

» Como colocar caixa de comentarios do facebook no blogger com modelo Dinâmico
Dom Set 07, 2014 7:58 pm por Giovanne

» Posts Divididos Categoria na Pagina Incial (Seções)
Qui Maio 15, 2014 10:14 am por Claudiney W.

» TgaDowns Confiram! e Acessem!
Qua Out 30, 2013 8:24 am por zohanx747

» Download do Chrome OS Beta (Versão não oficial)
Ter Out 08, 2013 7:58 am por blackrose

» Novas tecnologias
Seg Set 16, 2013 6:04 am por timpane

» Good webcam for desktop?
Sex Ago 30, 2013 3:13 am por stive951

» Promoção: Quer Ganhar Um Domínio Próprio(.com ou .net) para seu Blog?
Ter Jun 25, 2013 1:12 am por gilroy

Últimas Atualizações

WidGet Posts Mais Acessados (Top Posts)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

WidGet Posts Mais Acessados (Top Posts)

Mensagem por Felipe CDs em Ter Mar 16, 2010 12:17 pm

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.


Última edição por Felipe CDs em Seg Mar 29, 2010 10:03 am, editado 2 vez(es)

Felipe CDs

Mensagens : 16
Pontos : 2530
Data de inscrição : 10/02/2010
Idade : 28

Ver perfil do usuário http://www.felipecd.com http://twitter.com/Felipe_CDs http://www.blogger.com/profile/09636033705757089270 http://www.orkut.com.br/Main#Profile?uid=1470927253263607316

Voltar ao Topo Ir em baixo

Mais Acessados

Mensagem por miler em Dom Mar 21, 2010 3:59 pm

Muito bom este tutorial!

Valeu e Obrigado!


miler
Convidado


Voltar ao Topo Ir em baixo

Re: WidGet Posts Mais Acessados (Top Posts)

Mensagem por Marcos em Ter Mar 23, 2010 1:16 pm

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

_________________
http://cinemaehq.blogspot.com/ - preciso de redatores
http://wormswebgroup.blogspot.com/ - pergunte me la tambem ..

Visitem ... ou n Wink

Marcos

Mensagens : 61
Pontos : 2743
Data de inscrição : 05/10/2009
Idade : 25

Ver perfil do usuário http://wormswebgroup.blogspot.com/ http://twitter.com/vmarcosv

Voltar ao Topo Ir em baixo

Re: WidGet Posts Mais Acessados (Top Posts)

Mensagem por Felipe CDs em Ter Mar 23, 2010 8:18 pm

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! Wink

Felipe CDs

Mensagens : 16
Pontos : 2530
Data de inscrição : 10/02/2010
Idade : 28

Ver perfil do usuário http://www.felipecd.com http://twitter.com/Felipe_CDs http://www.blogger.com/profile/09636033705757089270 http://www.orkut.com.br/Main#Profile?uid=1470927253263607316

Voltar ao Topo Ir em baixo

Re: WidGet Posts Mais Acessados (Top Posts)

Mensagem por Marcos em Ter Mar 23, 2010 9:58 pm

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

_________________
http://cinemaehq.blogspot.com/ - preciso de redatores
http://wormswebgroup.blogspot.com/ - pergunte me la tambem ..

Visitem ... ou n Wink

Marcos

Mensagens : 61
Pontos : 2743
Data de inscrição : 05/10/2009
Idade : 25

Ver perfil do usuário http://wormswebgroup.blogspot.com/ http://twitter.com/vmarcosv

Voltar ao Topo Ir em baixo

Re: WidGet Posts Mais Acessados (Top Posts)

Mensagem por Felipe CDs em Qui Mar 25, 2010 6:59 pm

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

Vlw... Abraços!!!

________________________
www.felipecd.com | www.felipecds.net

Felipe CDs

Mensagens : 16
Pontos : 2530
Data de inscrição : 10/02/2010
Idade : 28

Ver perfil do usuário http://www.felipecd.com http://twitter.com/Felipe_CDs http://www.blogger.com/profile/09636033705757089270 http://www.orkut.com.br/Main#Profile?uid=1470927253263607316

Voltar ao Topo Ir em baixo

Re: WidGet Posts Mais Acessados (Top Posts)

Mensagem por Marcos em Qui Mar 25, 2010 10:06 pm

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

_________________
http://cinemaehq.blogspot.com/ - preciso de redatores
http://wormswebgroup.blogspot.com/ - pergunte me la tambem ..

Visitem ... ou n Wink

Marcos

Mensagens : 61
Pontos : 2743
Data de inscrição : 05/10/2009
Idade : 25

Ver perfil do usuário http://wormswebgroup.blogspot.com/ http://twitter.com/vmarcosv

Voltar ao Topo Ir em baixo

Funciona imediatamente?

Mensagem por Rafael em Ter Maio 18, 2010 11:14 pm

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
Convidado


Voltar ao Topo Ir em baixo

Re: WidGet Posts Mais Acessados (Top Posts)

Mensagem por Felipe CDs em Qua Maio 26, 2010 12:19 pm

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

Felipe CDs

Mensagens : 16
Pontos : 2530
Data de inscrição : 10/02/2010
Idade : 28

Ver perfil do usuário http://www.felipecd.com http://twitter.com/Felipe_CDs http://www.blogger.com/profile/09636033705757089270 http://www.orkut.com.br/Main#Profile?uid=1470927253263607316

Voltar ao Topo Ir em baixo

Re: WidGet Posts Mais Acessados (Top Posts)

Mensagem por Conteúdo patrocinado Hoje à(s) 5:26 pm


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum