27/09/2014

Como instalar um Widget no seu Blog -(Blogger)

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas
Escrito em 23/09/2009 e revisado em 31/05/2011 e 27/09/2014 por byALF

Aprenda a inserir um Widget no seu blog (Blogger)

Se você se deparou com um widget bem legal, e gostaria de colocá-lo no seu blog, saiba como fazer agora:

1) Copie o código do Widget a ser inserido

Tomei como exemplo um widget do site Climatempo  (Leia: Widget – Coloque o clima no seu blog).

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

2) Teste o Widget

Recomendamos que você faça sempre um teste antes de inserir o código do widget no seu blog. Sugerimos o aplicativo Squids Editor.

No Squids Editor , cole o código HTML no campo Código Fonte. Clique no botão [Enviar Código] para ver o Resultado. Teste o widget, se funcionar corretamente adicione-o no seu blog como mostraremos a seguir…

Obs.: Para mais informações sobre o Squids Editor leia o artigo: Simulador gratuito para HTML, CSS e JavaScript – visualização em tempo real

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

3) Entre no Painel do Blogger 

Acesse o URL www.blogger.com e faça o login.

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

4) Acesse o blog onde será inserido o widget.

No painel do Blogger, clique no blog que receberá o widget. No nosso exemplo vamos clicar em “Blog de Teste”.

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

No menu lateral do Blogger, selecione [Layout]

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

5) Adicione o Widget

Escolha a parte onde deseja colocar o seu Widget e clique em [Adicionar um Gadget].

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Na janela Adicionar um gadget em [Noções básicas]…

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

…role a tela e clique em [HTML/JavaScript]

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Cole o código do Widget que você deseja inserir em [Conteúdo]. Se desejar, acrescente também um [Título] para o seu novo widget. No nosso exemplo utilizei “Previsão do Tempo” como título.

Clique em [Salvar] e pronto,

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

o seu widget já está adicionado…

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

6) Visualize a posição do Gadget no blog

Antes de Salvar o seu blog, clique no botão [Visualizar] para uma prévia de como vai ficar o layout com o novo widget…

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Visualize o blog com o widget posicionado (página visualizar).

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Se você gostou do layout, feche a janela de visualização e clique em [Salvar Organização].

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Caso contrário, feche a janela de visualização e altere a posição do gadget…

6) Alterando a posição do Gadget no layout

Para alterar a posição, clique e segure o mouse sobre o gadget “Previsão do Tempo” e arraste para a nova posição desejada.

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Na imagem abaixo, veja o widget em uma nova posição.

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Obs.: Para editar o título ou conteúdo do widget clique no link [Editar] do gadget correspondente.

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Após feitos todos ajustes, visualize o blog novamente, e se tudo estiver de acordo com as suas expectativas, clique em [Salvar Organização]. 

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Pronto, agora o seu novo widget já está inserido no seu blog…

Clique em [Visualizar blog] para abrir o seu blog e visualizar o seu novo widget…

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Veja abaixo como ficou o nosso exemplo… (Para ver o blog clique em  Blog de Teste).

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Obs.: Para editar ou excluir o widget, clique no ícone que aparece ao lado do widget (anotado em vermelho). Para isto, você deverá estar logado no blogger.com

Como instalar um Widget no seu Blog -(Blogger) - Visual Dicas

Até mais… ( byAlf )

image

Veja também:

  Widget – Coloque o clima no seu blog

  Widget, o que é e para que serve?

 Como inserir Widgets no Wordpress sem a instalação de plugins

Simulador gratuito para HTML, CSS – visualização em tempo real

Revisado em 27/09/2014

Visite também o blog: http://visualmusicas.blogspot.com

30 comentários:

  1. marcelo gravaçoes03/10/2009, 10:14

    mim ajudou e muito

    ResponderExcluir
  2. , Hugo30/05/2011, 21:25

    Olá,sou meio iniciante no mundo dos Blogs . Fui tentar adicionar um Widget .Mais não consegui porque não aparece essa opção do "Layout" no meu painel .Por favor me ajuda é urgente .Obrrigado :D

    ResponderExcluir
  3. byALF30/05/2011, 23:56

    Olá Hugo,

    Realmente foram feitas alterações no blogger ao longo do tempo... Portanto, onde está escrito Layout, leia-se Design...

    Obrigado pela informação... Precisarei atualizar este artigo que foi escrito em 2009...

    Abraços,

    ResponderExcluir
  4. byALF01/06/2011, 09:44

    O Post foi atualizado com a versão mais recente do blogger.com (maio/2011)...

    ResponderExcluir
  5. Daiane Cristina01/02/2012, 18:31

    Ajudou muitíssimo! Obrigada :)

    ResponderExcluir
  6. Marcos22/02/2012, 15:47

    deu certissimo!!! e vc podeiria me dizer se há templestes que eu possa continuar usando o desiner do bloger??? se puder pq usar so html é difícil

    ResponderExcluir
  7. André09/05/2012, 14:30

    Mim não conjuga verbo, o certo é "me"

    ResponderExcluir
  8. Ísis Cohen27/06/2012, 17:10

    Valeu amigo! Me ajudou muito!!!

    Abraços!

    ResponderExcluir
  9. Pura Emoção!25/07/2012, 09:49

    Gostei muito de sua receptividade! Vou ler, com calma e estudar as suas dicas! Obrigada pelo carinho e atenção! :)

    ResponderExcluir
  10. João da Cruz Júnior05/08/2012, 17:42

    Parabéns pela sua iniciativa, me ajudou muito. Algo bem simples, mas para que não sabe é difícil e você me ajudou de verdade. Que Deus te abençoes mais e mais, em nome de Jesus Cristo. Amém.

    ResponderExcluir
  11. Juliana Vieira03/09/2013, 14:27

    OI BOA TARDE, O ANUNCIO DE UMA LOJA PARCEIRA DO MEU BLOG SUMIU O QUE POSSO FAZER PARA RESOLVER. ESTA TODO BRANCO VOU DEIXAR O LINK DO MEU BLOG SE PUDER ME AJUDAR AGRADEÇO. http://bolsadeboneca.blogspot.com.br/

    ResponderExcluir
  12. Unknown17/01/2014, 01:32

    Vlw cara.

    ResponderExcluir
  13. Unknown16/10/2014, 17:28

    Uma dica para quem quer relógios com qualidade sem gastar muito lojas no Brasil em SP pronta entrega frete grátis: as melhores replicas de relógios famosos masculino e feminino, com alto padrão de qualidade, replicas italianas premium aaa, relógios automáticos e quartz..mais de 1700 modelos de relógios replicas importados. veja mais em: Replicas de Relogios Famosos 2 - Replicas de Relogios .

    ResponderExcluir
  14. Jéh12/01/2015, 20:37

    Estou tentando colocar opção de seguidores do blog, Face e instagran... Ficou só a janela em branco e não da pra seguir. Alguém pode me ajudar??

    http://arievilovidalonga.blogspot.com.br/

    ResponderExcluir
  15. Lorraine18/08/2015, 09:07

    Brigadão! super ajudou ;)

    ResponderExcluir
  16. Gonçalo Costa02/09/2015, 08:13

    Foi uma boa ajuda, assim consegui acrescentar um widget ao meu blog, (arthousetech.blogspot.com)

    ResponderExcluir
  17. Unknown29/11/2015, 19:42

    show

    ResponderExcluir
  18. Relogios Famosos11/02/2016, 09:09

    ótima dica para meu site...PERFUMES
    INFORMATIVO! Loja de Perfumes Importados no Brasil em SP :
    Acesse: www.perfumesimportados.eco.br .
    Várias marcas de Perfumes Importados Femininos e Perfumes Importados Masculinos.

    ResponderExcluir
  19. pingcall04/01/2019, 08:10

    Unable to withdraw funds in Binance
    Looking for the remedies to resolve the withdrawing funds' error in Binance? Facing trouble in withdrawing? Under such circumstances, you can always ask for help from the elite professionals who have knowledge in solving any kind of error in short-interval of time by calling on Binance contact number 800-665-6722 any time. The experts value their customers, therefore, they put their energy to satisfy with their exemplary services. The experts offer out of the box solutions and remedies and that is so easy to execute. www.cryptophonesupport.com/exchange/binance/

    ResponderExcluir
  20. Rohan16/01/2019, 08:33

    hanks for sharing such an informative posts so keep it up man. Any client battling with Binance related issue can contact the Binance bolster number +1-888-712-3146. binance support number is Available 24×7. Binance trade Support Number is accessible 24×7 consistently. Client care administrators will be accessible to help with every one of the issues that are reoccurring in Binance and need quick help. more detail visit here: https://www.numbersonweb.com/crypto-exchanges/binance-support-number/

    ResponderExcluir
  21. Rohan16/01/2019, 08:49

    Your selection of topic is very good and also well written. Thanks for sharing with us most effective information. Coinbase Support Phone Number +1 888 712 3146, Calling Coinbase customer Support Number +1 888 712 3146 faster by BitCoin Support. Get to a live individual snappiest Just pay special mind to the line. more info visit here: https://www.numbersonweb.com/crypto-wallets/coinbase-support-number/

    ResponderExcluir
  22. Rohan16/01/2019, 09:01

    Great blog! I really love how it is easy on my eyes and the information are well written. Great post!Thanks for sharing. Blockchain Support Number +1-888-712-3146 Any cash independent of its sort (paper or advanced) requires a wallet for capacity to shield it safe from getting stolen. Despite the fact that the digital currency is another development, it additionally requires a capacity medium to encourage the purchasing, moving and monitoring the exchanges alongside protecting it. more info visit our website: https://www.numbersonweb.com/crypto-wallets/blockchain-support-number/

    ResponderExcluir
  23. Crypto Customer Services16/01/2019, 09:21

    Very helpful article to understand the bitcoin concept For Easley Connect To Bitcoin Support Team, If you are also undergoing such problems contact our CEX.IO support number +1888-712-3146.
    To more information: https://www.numbersonweb.com/crypto-exchanges/cex-io-support-number/

    ResponderExcluir
  24. Crypto Customer Services16/01/2019, 09:31

    Such a very useful blog! Many users have updated for that it took about an hour time for login to the Kraken account while depositing bitcoin for trade. Many of them have mattered that although using 24 Mnemonic words, they continuously get: "Login failed”. If you are also facing these conditions and need support contact our kraken phone number +1-888-7123-146.
    Visit our website: https://www.numbersonweb.com/crypto-exchanges/kraken-support-number/

    ResponderExcluir
  25. Crypto Customer Services23/01/2019, 10:00

    Thanks’ for sharing the informative blog! Users have also complained that for some time Kraken web page went under maintenance without any prior notice, which led to a loss to many users. If you are also stuck in these conditions immediately contact our Kraken Support Number +1-888-712-3146.
    To more information:
    https://www.numbersonweb.com/crypto-exchanges/kraken-support-number/

    ResponderExcluir
  26. Crypto Customer Services23/01/2019, 10:00

    Thanks’ for sharing the informative blog! Users have also complained that for some time Kraken web page went under maintenance without any prior notice, which led to a loss to many users. If you are also stuck in these conditions immediately contact our Kraken Support Number +1-888-712-3146.
    To more information:
    https://www.numbersonweb.com/crypto-exchanges/kraken-support-number/

    ResponderExcluir
  27. Crypto Customer Services25/02/2019, 08:55

    Nice blog, thank you for giving the best information by this post. We have a specialist group for Kraken client support. we give all announced time to time so on the off chance that you need to require any help with respect to Kraken, at that point get in touch with us kraken Support Phone Number+1-888-840-3277 we support constantly. The Kraken Daily Market Report is sent at around 2 pm PT.
    To more information:
    https://www.numbersonweb.com/crypto-exchanges/kraken-support-number/

    ResponderExcluir
  28. Jack Smith06/03/2019, 02:02

    If you are facing issue with Binance account? Just call Binance Support Number +1 (888) 902-2272
    Phone Number and fix all issues.+1 8 8 8 9 0 2 2 2 7 2 Binance Support Phone Number. While managing
    the cryptographic money you may confront a few issues in the trade or exchange, because
    of some sort of complexities of the working of this exchange module ,there may be some postponement in withdrawal or transfer.
    for more info visit here: https://www.cryptosupportnumbers.com/binance.html

    ResponderExcluir
  29. harry07/03/2019, 08:02


    thanks for posting this blog. its really very helpful for us.
    Woodworking Tools best tools WOOD WORKERS

    ResponderExcluir
  30. Metaln Machine30/06/2021, 15:50

    Metal and Machine is gladly serving a wide scope of Chain Link Fencing UAE. We offer you esteem added items that have been completely handled and manufactured. Gifted labor is there to make an altered wire type and lattice type according to the prerequisite of customers. Our items convey the norms which are ideal for our customers.
    https://www.metalnmachine.com/fencing/chain-link

    ResponderExcluir