02 agosto, 2012

Tutorial : Como por gadgets no cabeçalho do blog

185933_10150981467988915_1704011092_n_large
Curta-nos no face ^^


Oiiie meus Sorvetes de Kiwi (Amo sorvete de Kiwi) ♥
Um Exemplo de como vaificar, é só entra neste blog > http://cherry-liah.blogspot.com.br/
Como podem ver a Liah usou slide do cabeçalho, este > http://cherry-liah.blogspot.com.br/2012/05/slide-de-imagens-com-numeracao.html

Créditos do tutorial >  http://cherry-liah.blogspot.com.br/ 

1° Passo - Excluir o Cabeçalho

Para isso, vá em design, editar HTML (Eu ainda uso a interface antiga do blogger) Aperte CTRL + F e pesquise pelo nome do seu blog. Você irá encontrar algo parecido com isso :

(Clique para ampliar)

Onde está Sweet Dreams, é onde vai aparecer o nome do seu blog.
Apague a parte destacada na imagem :
<b:widget id='Header1' locked='true' title='Sweet Dreams (Cabeçalho)' type='Header'/>
Visualize e depois salve o modelo.Vai aparecer o seguinte aviso :

(Clique para ampliar)

Clique no botão "Exlcuir Widgets". Prontinho, o cabeçalho está excluindo!

2° Passo - Criando um novo cabeçalho no lugar

Agora vamos criar um novo cabeçalho que nos permita adicionar o que quisermos nele. Volte ao HTML do seu blog, e pesquise por: ]]></b:skin> acima da tag pesquisada cole o código abaixo:

#topo {
width: 980px; /*Largura da imagem do cabeçalho*/
height: 300px /*Altura do cabeçalho*/
background: url ('link da sua imagem de cabeçalho') no-repeat;
margin-top: -20px; /*Margem do topo*/
}

Altere a largura e a altura de acordo com sua imagem de cabeçalho. Coloque o link da imagem onde se pede, e em margin-top você "puxa" o cabeçalho para cima. Isso é necessário porque provavelmente vai ficar um espaço entre o topo da página e o cabeçalho. Mas se este espaço não te incomodar, troque -20 por 0. Salve as alterações. Seu cabeçalho ainda não vai aparecer. Para isso, você deve ir para o layout do blog, e adicionar um gadget de HTML/Javascript no local onde ficava o antigo cabeçalho.

Cole no gadget o código abaixo:

<div id="topo">
</div>

Salve o gadget e você verá que seu cabeçalho já apareceu.

3° Passo - Adicionando gadgets no cabeçalho

Agora você já pode adicionar o gadget que quiser no cabeçalho. Como? Simples: Colocando o código do item entre as tags do gadget que acabamos de adicionar. Não entendeu? Veja o exemplo abaixo onde a Liah coloco o código da caixa de busca deste tutorial no cabeçalho:

<div id="topo"><form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" />
<input class="searchbut" type="submit" value="" /></form>
</div> 

Viram? O código da caixa de pesquisa está dentro da div do cabeçalho, então vai ficar por cima dele. Quando você fizer este tutorial, vai ver que os elementos que você colocar no cabeçalho vão ficar desalinhados. Para alinhá-los você deve criar uma class como essa abaixo (cole antes de ]]></b:skin>)

.item {
float: left;
margin-left: 0px
margin-right: 0px
margin-top: 0px
margin-bottom: 0px;

Esse é o jeito que eu faço, e acredito que seja o mais prático. Se você já possui algum conhecimento de CSS, vai conseguir fazer direitinho, mas caso não tenha entendido, leia um pouco sobre o básico do CSS aqui.

Créditos do tutorial >  http://cherry-liah.blogspot.com.br/ 

Beijinhos amores ♥

9 comentários:

  1. aah amei o tutorial,concerteza vou usalo no proximo lay,seguindo se quiser retribuir...
    cherryseublog.blogspot.com.br

    ResponderExcluir
  2. bastante gente ta usando esse tuto né?
    fica bem legal (:
    e nem é tão complicado assim ;D

    http://blogportalteen.blogspot.com

    ResponderExcluir
  3. Fica bem legal,quando eu mudar o layout vou usar!

    ^-^ ---------> Maçã cor de rosa

    ResponderExcluir
  4. Olá!
    Gostaria de criar um gadget e arrastar o widget do menu.
    Mais não pode excluir o cabeçalho e assim deixar o menu abaixo.
    Como faço? quais códigos, já tentei vários tutoriais sem sucesso.

    Exemplo da imagem abaixo:

    http://1.bp.blogspot.com/-VO7hXIzAyFw/UK1nh4DSuFI/AAAAAAAAAzM/KksCI3AFqGc/s1600/problema.png

    O endereço do blogger é:
    www.nosso-ceara.blogspot.com.br

    Meu face é:
    www.facebook.com/lglf77

    ResponderExcluir
  5. O meu cabeçalho não quer excluir me ajuda ?

    ResponderExcluir
  6. o meu cabeçalho nao aparece de jeito nenhum :I

    ResponderExcluir
  7. meu cabeçalho desapareceu.....socorro!!!

    ResponderExcluir
  8. Olá Kaah, Yua e Viviane, entre outros que não conseguiram, não testei o tuto, e achei ele no Cherry Bomb (link no post)
    avise a dona de lá, concerteza ela irá ajudar a vocês ;D
    Beijo flores ^^

    ResponderExcluir