Tutorial : Como por gadgets no cabeçalho do blog

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: 0pxmargin-right: 0pxmargin-top: 0pxmargin-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 ♥