Gadgets No Cabeçalho

 

Hello !

Oii Pessoal , estava vendo que muitas pessoas está que querem colocar gadgets no cabeçalho está com dificuldades. Eu já vim em dois blogs este tipo o CB o código da liah, é bem complicadinho, mais no KW o código da Kaori é mais facil mais muitas pessoas não entenderam como colocar aquele código bem, como eu disse , estou aqui para facilitar p/ vocês .. Vamo Começa??

1. O gadget que você vai colocar no topo precisa ser o primeiro da barra lateral. É mais fácil assim. Faça ele normalmente, como se o lugar dele fosse lá. 

2. vamos usar exemplo o slide de fotos como parte das pessoas usam,mais para funcionar o slider voce precisa colocar um cód depois do html clique aqui para ver o código. Depois que você pois lá depois de head você vai fazer o seguinte  código vai estar mais ou menos assm:

<div style="position: absolute; margin-top: -100px; left: -200px;">

Margin-top: Diminuir o número, faz com que o menu suba e aumentar faz com que ele desça. Veja que está como negativo, então aumentando e mantendo o sinal, é como diminuir. (por exemplo -200 é menor que -100)

left: É a mesma coisa. Se você diminuir, ele vai para a direita, se aumentar para a esquerda.

Não existe medida certa, você precisa fazer e ir testando até encontrar a que quer.

3. depois que você colocou esse código  após a -200px;"> você vai colocar o código do 
slide vai ficar mais ou menos assim:

<div style="position: absolute; margin-top: -100px; left: -200px;"><div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a>
<a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a>
</div>
</div>

4- para vocês perceberem temos no final do cód 2 </div> mais precisamos adicionar mais uma </div>.Então Vai Ficar Assim:

<div style="position: absolute; margin-top: -100px; left: -200px;"><div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a>
<a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a>
</div>
</div></div>

-----------------------------------------------------------------------------------

Prontinho e é isso pessoal , espero ter ajudado, e este código é pra qualquer coisa possivel,
Quero Agradecer Ao KW pelo cód beijinhos

e se tiver duvidas comente !!