08 junho 2012

Dois tutoriais em um - Confira!

Tumblr_lfnprcmfej1qb67gho1_400_large_large

Oi gente!!! 
Sabe o que mais estraga o visual e um blog? Aquele fundo horroroso de folha do modelo Viagem (Travel). Horrendo né? Pensando nisso,  resolvi postar aqui o tutorial, que é super simples, para retirar esse fundo.  
O outro tutorial e como deixar o fundo do cabeçalho transparente.

Clique em leia mais para ver os tutoriais.


Vamos ao primeiro tutorial.
Vá no HTML do seu blog e aperte Ctrl+F e procure por:
content-outer .content-cap-top {

Quando encontrar apague somente os trechos destacados:

.content-outer .content-cap-top { height:$(content.imageBorder.top.space);background: transparent$(content.imageBorder.top) repeat-x scroll top center;}.content-outer {margin: 0 auto;padding-top: $(content.margin);}.content-inner {background:$(content.background);background-position: left -$(content.imageBorder.top.space);background-color:$(content.background.color);padding: $(content.padding);}

 Outra coisa que faz toda a diferença num blog é um cabeçalho bem feito. Muitas vezes não temos o recurso e os programas necessários para se fazer uma imagem com fundo transparente, ou seja, no formato .PNG. Então eu trouxe um tutorial que ensina a fazer isso mexendo direto no html do blog. Confira:

Vá no HTML do seu blog, aperte Ctrl+F procure por algo parecido com o código abaixo:

<header><div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog da Nah (Cabeçalho)' type='Header'/>
</b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </header>
Para facilitar a busca procure por </header> 


Agora, apague todo o código acima. Depois procure por:


<div class='content'>

Cole ANTES dele o seguinte código:
<center><header><div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog da Nah (Cabeçalho)' type='Header'/>
</b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </header>
</center>
Depois de tudo feito visualize e veja se está tudo OK.


Espero que estes tutoriais tenham ajudado. Beijos!!!


Créditos: Spazio DM, Menina Nerd

8 comentários:

  1. Menina que sorvete é esse??? nossa deu até agua na boca....

    Simplesmente Danny

    ResponderExcluir
  2. Ameii,estava tentando arrumar isso a horas!!!
    blog ótimo
    desejo sucesso,já estou ajudando
    seguindo
    passa no meu,espero que goste
    www.menina-suflair.blogspot.com

    ResponderExcluir
  3. Adorei os tutoriais e realmente a parte de papel do template viagem é muito feia,estraga o blog.
    http://i-teenbr.net.tc

    ResponderExcluir
  4. serio que pro fundo fica transparente é só salvar como .png?
    ai meu Deus! vc salvou a minha vida guria!
    a propósito adorei o blog ! layout lindo e ótimo conteudo!
    já estou seguindo!

    passa no http://hugmerightnow.blogspot.com.br qualquer hora.. >.<

    ResponderExcluir
  5. no meu não funcionou para ficar transparente :(

    ResponderExcluir
  6. ME AJUDA EU FIZ ISSO MAS O CABEÇALHO DO MEU BLO SUMIO :'( NÃO TEM MAIS A OPÇÃO PRA COLOCAR


    http://small--thinker.blogspot.com.br/

    ResponderExcluir
  7. Nah eu consegui volta a fazer o cabeçalho . Mas coloco ele transparente e ele fica com fundo preto :/

    ResponderExcluir

© Blog da Nah | Oficial - 2012. Todos os direitos reservados. Criado por: Natália Médice. Tecnologia do Blogger. imagem-logo