5355 assinantes

Assine por RSS ou Email

Customizando o Widget do Blogblogs de Ultimos Leitores

Muita gente me pergunta como eu mudei o layout do widget de últimos leitores do Blogblogs. E muita gente também deixa de colocar o widget do Blogblogs por ele não ficar muito compatível com certos layout/temas.

E eu sempre quis postar um mini-tutorial de como customizar o widget, mas por preguiça ou por falta de certeza ou por preguiça nunca fiz… 8)

Pois então aproveitei o embalo do Rodrigo do Blog Ajuda e resolvi fazer também! =)

Então, antes de ler esse post, leia o do Blog Ajuda. Para entender melhor toda a estrutura do widget e saber como ele conseguiu achar todas as classes e IDs. (era disso que eu tinha preguiça, mas ele mostrou que era muito³ fácil.).

Só leia daqui pra baixo depois de ler o post do Blog Ajuda, senão dará errado e fuck você!

Blogblogs

Usaremos como modelo o widget aqui do Anderssauro.com porque só tenho esse! =)

Esse modelo usa 2 imagens que dever ser hospedadas no seu servidor, caso esteja em um host pago. Ou em algum site de hospedagem de imagens como o Photobucket por exemplo…

Não recomendo o ImageShack pois quando o servidor deles ficar fora do ar (o que é bem frequente) no lugar de suas imagens você verá sapos amarelos! o.o

As imagens são essas:

<—IMAGEM 1

<—IMAGEM 2

Colocarei aqui o código CSS bem especificado. Copie e cole dentro de um bloco de notas para visualizar melhor e fazer as mudanças necessárias:

[UPDATE]

Tinha colocado o código dentro de um campo de texto mas ele “dava pau”. Então vou colocar em um bloco de notas. É só baixar e conferir.

Código CSS Download

[/UPDATE]

As imagens estão bem destacadas com letras maiúsculas, apenas substitua pela URL da imagem para que elas funcionem corretamente.
Provavelmente será necessário algumas mínimas mudanças nas medidas das margens e espaçamento.
O CSS é totalmente customizável, mudança de cor de links, backgrounds ou bordas são facilmente trocadas.
Bom, qualquer dúvida pergunte nos comentários.

Escrevi o post meio na pressa porque estou no Rio de Janeiro, com a minha Anassauro. (L)
Bom feriado a todos!

[UPDATE-2]

Quem está usando a dica do post:

Se você também usou o post avise nos comentários para entrar na lista!

[/UPDATE-2]

[tags] blogblogs, widget, css, customização [/tags]

Receba mais por email...


Artigos Relacionados:

  1. Excelente dica Anderssauro!
    Essa dica é muito útil, porque para alguns temas essa widget fica muito estranho, mas editando o CSS fica 10! e isso é uma coisa muito simples que qualquer um pode fazer…
    Abraços

  2. Te amo ;~

  3. Legal seu post. Tenho uma dúvida…Não funciona no Blogger né?

    vaelu.

  4. Cara aluciante a dica , eu tava pensando em coloca, agora VOU colocar (h)

    Vale mesmo

  5. então, mesmo vc falando q funciona eu nao consegui colocar no blogger. eu hospedei as imagens, substitui o link dentro do código e colei dentro de modelo> elementos de página. O blogger aceita códigos css?

    obrigada pela resposta, viu.:D

  6. Bacana! Sempre achei essa barra de imagens (que vi primeiro no Tecnocracia) muito mais bonita que a original. Agora que você passou o caminho das pedras, farei a mudança em breve no diadefolga. :)

  7. Podia ter um cheat prá me deixar em primeiro lugar no rank né?!

    HAuHauHauHAUhA

    Beijocas

  8. Grande Anderssauro, valeu pela dica. Este é o primeiro blog que vejo essa explicação.

    Abraços.

  9. Cara, eu to tentando faze isso a horas e não consigo. Já upei as imagens, já passei o codigo pro meu css, editei o endereço das imagens, fui no blogblogs e copiei o segundo codigo lá, mas meu estilo fica o mesmo, somente todo feio, com um fundo branco, sem estilo algum. Eu não sei o que tá faltando, não to conseguindo achar… Me ajude… meu msn é leonardo@techbr.net .

    FLW

  10. Dica muito boa, mas para iniciantes muiito complicado, uma dúvida básica, onde colocamos o código em txt ? em que parte colocamos a nossa identificação do Blogblogs ?

  11. To com algumas duvidas!! depois que eu colocar as URLS das imagens no bloco de notas o que eu faço? onde coloco esse codigo?

  12. Legal Bom tutorial, mas eu também gosto do modelo normal, vou ver o que eu faço nele!!