Gadgets do Blogger com Links Lado a Lado (Estilo Menu Horizontal)

Existem diversos gadgets uteis no blogger, mas podemos personalizar gadgets como postagens populares ou lista de blogs apenas colocando uma linha de código HTML para deixar esses gadgets com links na horizontal como se fosse um menu deixando os links um do lado do outro ao invés de uma lista comum onde os links ficam um embaixo do outro (veja também: Menu Horizontal).

Essa é uma alteração simples de fazer, mas como vamos editar o HTML do blog sugerimos que faça um backup do seu template assim não correrá o risco de estragar seu layout caso tenha algum problema com os códigos.

personalizar gadget lista de blogs

Para personalizar o Gadget Lista de Blogs os links ficarem lado a lado entre na pagina editar HTML, procure (use o ctrl F) por: ]]></b:skin> e coloque esse código antes dele:
#BlogList1 li {width: 270px;    padding:3px;float: right;}
O valor 270 é a largura do gadget então altere como desejar

Se quiser pode fazer o mesmo com as postagens populares do seu blog usando o código:
#PopularPosts1 li {width: 270px;padding:3px;float: left;}

personalizar gadget postagens populares

Que funciona exatamente da mesma forma que o anterior. Note que a única coisa que mudou foi o nome do gadget BlogList1(lista de blogs) e PopularPosts1(postagens populares), então se quiser pode testar isso com qualquer outro gadget que funcione como uma lista no seu blog, veja mais informações sobre Personalizar gadgets do Blog neste tutorial mostramos com mais detalhes sobre achar o nome de cada gadget para que tudo funcione corretamente no seu blog.

Mais dicas sobre gadgets do Blogger:
Quais os Melhores Gadgets e Acessórios para Blogs
Personalizar Gadget Postagens Populares do Blog - Barras Coloridas
Fazer Menu Accordion no Blog - Criar Sub Categorias no Blogger

Fizemos esse tutorial para responder uma duvida de um de nossos leitores deixou num comentário aqui no Dicas para Blogs, então aproveitamos para agradecer a sugestão de postagem e convidar todos nossos leitores a dar sua opinião sobre o assunto ou deixar suas duvidas ou sugestões para novos tutoriais sobre blogs. Abraços e boa semana a todos!

14 comentários :

  1. Ola tudo bem tb tenho um blog mais nao sei criar template pelo photoshop entao abaixei um pelo um pelo site de template e queria saber se eu colocar o template no meu blog e plagio , sendo que o template no final tem desenvolvido por : ...
    Vlws e obrigado

    ResponderExcluir
  2. Mais uma excelente dica para melhorar o blog ja coloquei no meu e ficou muito bom valeu mais uma vez.

    ResponderExcluir
  3. Oliver tem varios sites de templates prontos e fazer download destes templates e usar não é plagio. Afinal o proprio dono do site colocou o link para baixar e usar o template.

    o link no final do template (desenvolvido por.... ) é apenas uma forma dele conseguir divulgação dos templates e deixar o link para quem quiser conhecer o site do criador do template.

    ResponderExcluir
  4. Muito obrigado fabiano roberto e eu acho seu blog muito bom , esse blog me ajudo e ainda ajuda e vlws por responder meu comentario

    ResponderExcluir
  5. FABIANO NO MEU NÃO FUNCIONOU E AINDA POR CIMA EXCLUIU UMA TA DE GADGET3 DO TEMPLATE.

    ResponderExcluir
  6. cara eu exclui um troço aqui por isso não funciona no meu template e o pior que eu tinha salvo o template mas mesmo assim não funciona, me ajuda aí fabiano era um tal de gadget3 eu acho.

    ResponderExcluir
  7. Roberto Madeira infelizmente se não tinha um backup do template não tem como recuperar.

    mas você salvou onde o template? não acha o arquivo?

    ResponderExcluir
  8. oi gostaria muito de ter meu template personalizado mais não sei fazer isso poderia me ajudar ?

    ResponderExcluir
  9. Fashionetes
    tem que começar por algo mais especifico... quando você diz personalizar template é algo muito amplo e não tem como explicar, então pesquise por algo mais especifico como por exemplo: trocar imagem de fundo, mudar cor dos links, formatar texto...

    assim conseguir alterar o template aos poucos deixando do jeito que você quer

    ResponderExcluir
  10. Ola Fabiano! Parabéns pelo site e nos Ajudara Tanto!!
    Velho no meu "HTLM" só aparece esse Código..
    .... Dessa mesma Forma e Não
    ]]> como da Postagem???
    Abçoss

    ResponderExcluir
  11. Pedro o código html pode ser também depois de body {.....}

    mas seu html deve ter esse trecho do código, veja os links abaixo:
    Achar Códigos na Pagina Editar HTML do Blogger - Ctrl F

    ResponderExcluir
  12. Olá fabiano, tudo bem?
    Sabe se tem como por o titulo da postagem em baixo da imagem? Obrigado!

    ResponderExcluir
  13. Matheus veja neste outro post
    Personalizar Gadget Postagens Populares do Blog - Barras Coloridas

    mas precisa editar o html das postagens populares colocando o código

    < img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/ >
    antes de < data:post.title/ >

    mas precisa entender um pouco de html e fazer alguns testes pois o código neste trecho tem varias funções e repete o mesmo código de maneiras bem parecidas diversas vezes

    ResponderExcluir