Image Map

19/11/2012

Tutorial: Gadgets no cabeçalho

Créditos: - Gente, eu acho que vou fazer o novo lay do blog voltando ao tema antigo, com desenhos e coloridinho, mas aí no próximo vocês escolhem o tema e tal, ok? Comentem falando o que acham! Ah, e visitem o meu blog de encomendas aqui!
agree :~
 Olá, pedacinhos de bacon crocante!
 Tudo bem com vocês? Espero que sim. Hoje tem mais (ainda mais) tutorial pedido pelo ask. Dessa vez foi o de colocar slide no cabeçalho, igual o daqui do blog.
 Aí trouxe dois tutoriais diferentes ensinando a colocar gadgets (não só slide) no cabeçalho do seu blog, pra dar um efeito mais profissional e interativo. Aqui tem um print de como é aqui no blog, onde eu uso o primeiro tutorial:
 Enfim, os dois modos são bem simples e eu uso ambos nas minhas encomendas e templates. Mas e aí, vamos ao tutorial?

 Vá no seu blog em Modelo> Editar HTML> tecle Ctrl+F e procure por:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
 Aí é só você trocar o maxwidgets='1' por '2' ou mais e o no por yes. Depois procure por:
Header1' locked='true' 
 E troque true por false. Agora vamos á última parte. Procure por:
<div class='header-outer'>
 Apague e troque por:
<div class='header-outer'>
<div id='header-left' style='width:50%; float: left; margin:0; '>
<b:section class='header-left' id='header-left' preferred='yes' style='float:left;'/>
</div>
<div id='header-right' style='width:50%; float: right; margin:0; '>
<b:section class='header-right' id='header-right' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
 Aí é só você mudar de acordo com as suas preferências o tamanho das colunas (os 50% em negrito do código), podendo ser, por exemplo, 70% e 30%, ou 10% e 90% (caso vá colocar o slide igual o daqui do blog).
clique na imagem para aumentar
 E agora vamos ao 2º tutorial, o de como colocar objeto flutuante! Não vou negar que esse é bem mais fácil, mas eu gosto de ambos e os uso. Bem, é só você criar um gadget de HTML/Javascript e colar nele o seguinte código:
<div style="position: absolute; margin-top: -100px; left: -200px;">CÓDIGO DO OBJETO</div>
 E arrumar o que tem pra arrumar. A margin-top você pode diminuir (faz com que o seu gadget desca) ou aumentar (faz com que o seu gadget suba). E a left você pode, também, diminuir (faz com que fique mais pra direita) ou aumentar (faz com que fique mais pra esquerda). E, obviamente, trocar "CÓDIGO DO OBJETO" pelo código do objeto.
 Ah, e só uma coisa: o código do slide Orbit não funciona quando você está usando o tutorial de dois backgrounds no blog, então #ficaadica de usar outro slide.
Post completo por Piink Cookie. Todos os direitos reservados. Copyright 2012. Plágio é crime.
 E aí, o que acharam? Espero que tenham gostado. O 2º é simples, mas eu recomendo ele pra menus e tal que não tem como usar o .
 É isso. Beijinhos com glitter :*

75 comentários:

  1. Super legal esse tutorial, vou fazer no meu próximo layout. Já salvei o link kkkk.
    Um beijão ;3

    coffemilia.blogspot.com ♥

    ResponderExcluir
  2. Amei o tutorial, estava procurando ele a um tempo atrás, pra colocar no layout, mas nunca achei;
    Xoxo ~

    Garotek.blogspot.com.br

    ResponderExcluir
  3. olha paula, eu curto esse lay e curto o outro coloridinho tb . tá com você sçlaçls
    adorei o tutorial!
    bjks

    ResponderExcluir
  4. Esse tutorial é muito útil mesmo, eu já usei, só que em alguns lays que eu faço não dá certo :3

    ResponderExcluir
  5. Ai é muito útil, ultimamente eu tava procurando esse tuto! gostei, vou por nos favoritos aqui! haha
    Ótimo post em!
    http://tissue-sweet.blogspot.com.br/
    Beijo da Mari! :)

    ResponderExcluir
  6. Bem útil esse tutorial!' .. :)
    Amei demais o blog .. s2'
    Chocolate Love (Cliica No Perfiil) s2'

    ResponderExcluir
  7. Eu acho muito fofo! E o bom dele também, é que não carrega a barra lateral, fica lindo e charmoso!
    Amei o tuto!
    Kisses!

    sundaede-glitter.blogspot.com

    ResponderExcluir
  8. Adorei o tutorial o bom e que funcionou!
    Beijuuu!
    http://blog-garotas-imperfeitas.blogspot.com/

    ResponderExcluir
  9. Muito obrigada amor, ajudou muito ! beijoos.

    ResponderExcluir
  10. Adorei o tuto!O resultado fica bem legal mesmo.Acho que vou usar.

    corderosa.tk

    ResponderExcluir
  11. Olá. obrigada pelo tutorial eu estava precisando vou fazer uma imensa reforma em meu mundinho(blog) rs .. amei o blog tá ?
    bjs :* chuva-de-brigadeiro.blogspot.com

    ResponderExcluir
  12. Belo Tuto Flor
    Amei seu Blog, desejo sucessos
    Que ele cresça cada vez mais
    Seguindo também
    Beijos
    miilecharmedemeniina.blogspot.com

    ResponderExcluir
  13. Amei o tutorial,está ajudando muito no meu próximo lay!
    Http://ChilliLovers123.blogspot.com.br/

    ResponderExcluir
  14. Isso é mt legal, adorei!
    Bjos!
    http://amonailart.blogspot.com.br/

    ResponderExcluir
  15. lindo, lindo o blog de vcs, amei a dica *0* NHAC
    to seguindo e curtindo o blog!!
    Beeijinhooss, e otima semana

    http://delicadinhah.blogspot.com.br/

    ResponderExcluir
  16. Amei, esse tutorial nunca funciona quando eu coloco , vou testar esse, deve funcionar, kk ,adorei fica perfeito o resultado

    Cliquesnocapricho.blogspot.com

    ResponderExcluir
  17. Amei a tuto , seu blog é lindo >.<

    mundodasgarotasforever.blogspot.com.br/

    ResponderExcluir
  18. Hihi* Estou ansiosa para o próximo layout, sou apaixonada por layouts coloridos. ♥

    OMG' PERFEITO! Ano que vem irei usar slide e outros gadgets para por no cabeçalho, esse tuto é super útil! ^-^

    ResponderExcluir
    Respostas
    1. Aaah, okok *u*
      Bom que gostou, Buuh! Aaah, agora estou ansiosa pro lay do ano que vem, ahsuashua >3<

      Excluir
  19. Muito legal esse tuto, fica lindo o cabeçalho :)
    ~ xoxo, Bruna.
    Garota da Lua // Official

    ResponderExcluir
  20. acho show saber mexer no html mas eu nem me arrisco :D

    Muito obrigada por comentar no meu blog! Estou te seguindo desde já! Se ainda não segues meu blog e canal no Youtube, peço que sigas por favor!
    Ah e sempre que atualizar seu blog me avise!

    Beeeijooos e ótima semana!

    re-becah. blogspot.com.br (JUNTAR O LINK)

    www.youtube. com/user/blogdareh/featured (JUNTAR O LINK)

    ResponderExcluir
    Respostas
    1. Disponha, flor :3
      Beijos, pra você também! ^^

      Excluir
  21. Ah, eu também acho que está faltando uma corzinha a mais aqui em! u_u
    UHSAHUASUHSUHSHUAHUSAUH Adorei o tutorial como sempre, aposto que vai ser útil para muitas pessoas :]

    http://rascunhosdasuuka.com/

    ResponderExcluir
    Respostas
    1. Concordo! aasuashuashuashuas >3<
      Bom que gostou, Suka *---*

      Excluir
  22. Nossa Paulinha, tutoriais ÓTIMOS! Não mexo com Blogger mas você faz uns tutoriais bem diferentes e informativos <3

    Gata, passei aqui também para dizer que tem post novinho no blog *-*

    Beijos!

    sugar-dance.org ♥

    ResponderExcluir
    Respostas
    1. Ooown, brigada *u*
      Yay, post novo! *-------*

      Excluir
  23. Que bom que gostou! Thanks ;)
    Amei seu blog, seguindo!
    Kissus
    GB

    ResponderExcluir
  24. Super legal o tuto ^^

    Beijos
    Amora Ruffles

    ResponderExcluir
  25. Tutu perfeito!!! Esse lay é lindo e o colorido tbm!!
    Tem post novo no blog.
    Beijos

    http://umaxicaradeleite.blogspot.com

    ResponderExcluir
  26. Amei o tuto! Deixa o deign do blog super profissional, haha.
    Beijinhos!

    http://chovendo--sonhos.blogspot.com.br/

    ResponderExcluir
  27. eu tava procurando o segundo tuto a décadas *le exagerada* eu so achava o tuto em q tinha q excluir o gadget pra poder por o gadget no cabeçalho esse tuto e muito bom e ajuda bastante!!! Favoritei u.ú

    Bjs, bjs ;*
    jaguarsedictions.blogspot.com

    ResponderExcluir
  28. Acho bem simples e fácil esse tutorial, mas você de qualquer forma ajudou todo mundo, adorei demais

    Sweet Teen

    ResponderExcluir
  29. Oi *-*
    Fais,um tempão que venho tentando fazer,esse tutorial mais nunca consigo ,shushausa ,me ajude ! LOL ~~
    Duuly.blogspot.com

    ResponderExcluir
  30. Adorei o tutorial!
    Beijinhus flor!

    ResponderExcluir
  31. Eu também acho que tava faltando uma corzinha por aqui. hahaha'
    Eu já conhecia esse tutorial, inclusive ele já funciona no meu HTML.
    E ele além de útil, ajuda o layout ficar mais fofo. ♥

    - xoxo -

    ResponderExcluir
  32. bastante útil, obg!

    seguindo, se quiser e puder, volte?
    Aos Dezesseis Anos - aosdezesseisanos.blogspot.com.br
    Seja bem vinda do meu blog.

    ResponderExcluir
  33. gente mega util esse tutorial viu *--*

    ResponderExcluir
  34. Super útil,com certeza irei usar no meu novo layout!Obrigada pelos elogios no meu blog,o seu está lindo e com um conteúdo inovador!Parabéns.
    Rawr...Morangos Revoltados

    ResponderExcluir
  35. Querida,eu fiz o segundo modo,mas o fundo branco dos gagdets continua!O que eu faço?Responde no meu blog,to desesperada!

    cherrygo.blogspot.com

    ResponderExcluir
  36. mas da onde eu tiro o codigo p cola ali???????

    ResponderExcluir
  37. Fiz tudo normal, mas fica ou o gadget em branco, ou um espaço enorme entre o cabeçalho e a parte das postagens :c Me ajuda ? t.t

    ResponderExcluir
    Respostas
    1. Aaah, qual o modelo do seu blog? Esse aí funciona no Travel. E também pode ser algum outro código css, ou o código que você está tentando colocar, que só pode ser algum editado. Se puder me informar essas coisas eu posso tentar te ajudar :D

      Excluir
  38. Muito legal!! Adorei!!
    Especialmente o gliter nos beijinhos!! Vlw pela super dica!! (ou mehor tuto completo kk)

    ResponderExcluir
  39. Amei muito bom esse tuto proximo layout vou usar

    ResponderExcluir
  40. A-M-E-I Muitíssimo obrigada , seu blog é perfeito. <3

    ResponderExcluir