outubro 29, 2011

Tutorial - Páginas como navbar

Oi meus doces de chocolate com espinafre e orégano (medo '-' kk) tudo bem com vocês? Queria dizer que eu não coloquei os poderosos no ultimo post porque deu um problema aqui, mas neste post tem :} O tuto de hoje vai mostrar como deixar suas páginas como as minhas, no lugar do navbar! Eu que inventei, assim como a maioria dos meus tutoriais eu descubro tudo "sem querer" fuço aqui, fuço ali, quando vê já foi, kkkk. Vamos começar? Primeiro: para fazer o tuto você não pode ter navbar, caso você tenha entre aqui e veja como remove-lo. Segundo: vá nas suas páginas devem estar como guia superior isto é, lado lado assim como a minha provavelmente embaixo do cabeçalho. Terceiro: tem como colocar um gadget em cima do seu cabeçalho? Se sim ótimo, se não entre aqui e veja como fazer. Depois de fazer isso coloque as páginas em acima do seu cabeçalho assim:

Poderosos: amo vocês *0* (tutorial segue abaixo)
http://www.theattitudeincluded.blogspot.com/  http://blog-sweetpoison.blogspot.com/
http://crazyteens-blog.blogspot.com/  http://closetteenblog.blogspot.com/
http://blogportalteen.blogspot.com/  http://florespraivete.blogspot.com/
http://sejalivrevoe.blogspot.com/  http://blogstrawberrybomb.blogspot.com/
Agora vamos para parte de html, vá em Editar HTML > Ctrl + F >
e procure por >  /*Header Deve aparecer assim (mais o menos assim):
/* Header
----------------------------------------------- */
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 10px;
  padding-right: 10px;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
}


Selecione tudo que estiver abaixo de */ e substitua por:
.header-inner {
margin-top: -47px;
}

.Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 10px;
  padding-right: 10px;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  margin-top: -30px;
}

Devendo ficar assim:
/* Header
----------------------------------------------- */
.header-inner {
margin-top: -47px;
}

.Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 10px;
  padding-right: 10px;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  margin-top: -30px;
}

Visualize,se estiver tudo certo e ficar assim como o meu, salve! pode alterar os valores em roxo.
Qualquer duvida comente. Um beijo enorme amo vocês :}

36 comentários:

  1. Legal o tuto. Eu não gosto mt desse estilo, confesso, mas tem quem gosta, né? Ah, Karol, vc colocou meu blog de testes nos poderosos....

    ResponderExcluir
  2. Excluí, tô fazendo um outro. O Backstage me cansou, enjoei, sabe?

    ResponderExcluir
  3. Ótimo tutorial, é muito melhor usar as páginas como navbar ^^

    http://blog-sweetpoison.blogspot.com/

    ResponderExcluir
  4. Adorei o tutorial!!!
    E também adorei o gif ali ao lado --->
    Muito sedutor rsrsrs x3
    beijinhus<3

    ResponderExcluir
  5. Muito bacana seu tuto e seu blog!!!
    Estou te seguindo querida, se puder dê uma passadinha no meu blog e siga tbm!!
    :D
    www.metalmake-up.blogspot.com

    ResponderExcluir
  6. ótima dica :D
    Já conferiu a nova extensão do Attitude Included? O Cute Attitude Included? Te espero lá!
    Beijoo <3
    www.theattitudeincluded.blogspot.com
    www.cuteattitudeincluded.blogspot.com
    www.tutoriaisattitudeincluded.blogspot.com

    ResponderExcluir
  7. Que bacana esse tuto, quando eu estiver com menos preguiça, vou tentar fazer lá no blog. Fica bem legal o resultado ;D

    extensaoteen.blogspot.com

    ResponderExcluir
  8. Karol, agora que eu percebi aqueles gifs ali no cantinho, meu Deus, ri demaaaais, Material Extra arrasa e seduz qualquer um que passa :P

    ResponderExcluir
  9. Amei o tuto! Karol, como se coloca aqueles buttons de próxima, anterior e home q vc fez? Me ajuda pff!
    http://cantoseencantosdahellen.blogspot.com/

    ResponderExcluir
  10. seus tutoriais são surpreendentes, nem imaginava que era tão fácil assim *-*


    http://meublogblogdadanii.blogspot.com/

    ResponderExcluir
  11. Hellenzinha: aqui flor tem um tutorial http://s2meh.blogspot.com/2010/09/substitua-os-links-postagens-mais.html

    ResponderExcluir
  12. Otimo tuto!!
    :DD

    Bjs
    http://blogportalteen.blogspot.com

    ResponderExcluir
  13. nossa, eu gostei muito desse tutorial.. quando eu precisar, eu pegarei aqi ;) haha
    uuuuuh, eu sou uma poderosa u_u kk #ignoraok?

    beeijos karolsita u_u ;*
    - crazyteens-blog.blogspot.com

    ResponderExcluir
  14. Que divo o tutorial gostei bastante .
    http://perfeitinha-blog.blogspot.com/

    ResponderExcluir
  15. Nossa o apelido de hoje tá uma mistura forte kkk. Quando abri o blog vi a novidade das páginas lá em cima e já estava pensando de perguntar como fazia, e quando abaixei a página já vi o tutorial aqui, você é um anjo em pessoa haha.
    Tem post novo. Comenta?
    http://girlteen-s2.blogspot.com/

    ResponderExcluir
  16. Daqui a pouco vou la ver como participa da promo, ta flor?

    Lambeijos da Nina!!!

    ResponderExcluir
  17. Não tô conseguindo :'( Help-me
    http://meninasapeca-ms.blogspot.com/

    ResponderExcluir
  18. quero fazer parceria e ja coloquei seu link-me no meu blog:
    mimosdemoda.blogspot.com
    PS bota uma cbox

    ResponderExcluir
  19. Mias uma vez usando em um lay de teste, e fico cada vez mais feliz pk isso é super fácil, só vc mesmo viu?
    beijão

    ResponderExcluir
  20. não consegui, ficou estranho D: q

    beijos, focanna.blogspot.com

    ResponderExcluir
  21. As páginas do meu blog, não ficam em horizontal mesmo eu colocando-as debaixo do cabeçalho. O que eu faço? Se puder me ajudar... :(

    ResponderExcluir
  22. não consigo fazer esse tutorial
    me ajuda?
    http://123make.blogspot.com

    ResponderExcluir
  23. naao consigo, os menus ficam em listinhas e n um do lado do outro ajuda??

    cherry-miint.blogspot.com

    ResponderExcluir
  24. Oi, eu tinha conseguido fazer o menu com o outro tutorial, mas com esse n ta indo.
    Ajuda?
    By My Self

    ResponderExcluir
  25. você tem que fazer um tutorial pra colocar a navebar pra cima primeiro. porque a minha não se move e não sei como mover-lá ;

    ResponderExcluir
    Respostas
    1. Esta tudo na postagem flor, era só ler com atenção.

      Excluir
  26. Respostas
    1. è só procurar por /* Header
      com espaço'
      Com a diferença de um espaço, ele ja não acha' haha fiquei procurando e descobri pq nn tava indo' bjos (:

      Excluir
  27. Eu já tinha conseguido fazer, agora não está indo! Devo está fazendo algo de errado, e olha que li com atenção tudo. Ain '-'
    Mas fica muito fofo *-*

    http://garotasederivados.blogspot.com.br/

    ResponderExcluir
  28. Bom, ameeii, mas as minhas paginas ficam sempre na vertical e não na horizontal como uma navbar. ): Me ajuda' .. ?? pfr. =//

    ResponderExcluir