Como colocar cabeçalho na sidebar
Autor: Marcy Moraes | Publicado: 2015-12-12T10:00:00-03:00




E ai docinhos de cereja! Como vão vocês?&nbsp;

Hoje eu trouxe um tutorial que é bem antigo, mas que deixa o layout do blog muito bonito e eu uso aqui no Sweet que é&nbsp;Como colocar um cabeçalho na sidebar.

Quando eu estava criando esse layout eu logo pensei no cabeçalho, pois eu queria algo diferente, o cabeçalho fica sempre no topo do blog e por que não de posição? E ai me lembrei desse tutorial e resolvi trazer hoje para vocês.
A primeira coisa que vamos fazer é tirar o fundo do primeiro gadget, vamos deixá-lo transparente e existe algumas formas de fazer isso, mas vou mostrar esse.



Vá em Modelo&gt;&gt;Editar HTML&gt;&gt;Clique dentro da caixa de códigos e aperte Ctrl+F&nbsp;e procure por:

.sidebar .widget:first-child {

Você vai encontrar algo mais ou menos assim:

.sidebar .widget:first-child {
&nbsp; margin-top: 0;
}

Então substitua isso por:

.sidebar .widget:first-child {
background: transparent;
border-top: 0px solid #cccccc;
border-bottom: 0px solid #cccccc;
border-right: 0px solid #cccccc;
border-left: 0px solid #cccccc;
outline-offset: 0px;
outline: 0px solid #cccccc;
box-shadow: inset 0px 0px 0px #cccccc, 0px 0px 0px #cccccc;
border-radius: 0px 0px 0px 0px;
}
.sidebar .widget:first-child:hover {
background: transparent;
border-top: 0px solid #cccccc;
border-bottom: 0px solid #cccccc;
border-right: 0px solid #cccccc;
border-left: 0px solid #cccccc;
outline-offset: 0px;
outline: 0px solid #cccccc;
box-shadow: inset 0px 0px 0px #cccccc, 0px 0px 0px #cccccc;
border-radius: 0px 0px 0px 0px;
}

Visualize se deu certo, se caso der, então Salve.



Agora vamos para parte onde colocamos o cabeçalho no blog.


Vá em&nbsp;Layout&gt;&gt;Adicionar um Gadget&gt;&gt;&nbsp;HTML
Java/Script&nbsp;e cole esse código:

&lt;div style="margin-top: 0px; margin-left: -10px;
margin-right: -15px; margin-bottom: -5px;"&gt;
&lt;a href="LINK-DO-SEU-BLOG"&gt;&lt;img src="URL-DO-CABEÇALHO"
/&gt;&lt;/a&gt;
&lt;/div&gt;



No lugar de&nbsp;LINK-DO-SEU-BLOG&nbsp;coloque a URL
do seu blog, para que se caso a pessoa clicar sobre o cabeçalho ela continue no
seu blog e seja redirecionada para a página inicial.

E já no lugar de&nbsp;URL-DO-CABEÇALHO&nbsp;coloque a
URL da imagem que você quer como cabeçalho.

Os números que se encontram no inicio do código são para que
a imagem não fique cortada. Se caso isso acontecer é só mudar o números.



margin-top:&nbsp;é
     a margem do topo, se caso quiser que ela fique mais para cima é só colocar
     um número (-) negativo, mas se quiser que a imagem fique mais para baixo é
     só colocar o número positivo.
margin-left:&nbsp;é
     em relação ao lado esquerdo. É o mesmo esquema se quiser mais para
     esquerda &nbsp;número (-) negativo, mas se quiser para o lado oposto
     número positivo.
margin-right:&nbsp;já
     é o lado direito. Para a imagem ir para o lado direito o número negativo e
     se quiser para a esquerda número positivo.
margin-bottom:&nbsp;se
     caso quiser que a imagem fique mais para baixo é só deixar negativo e mais
     para cima positivo.


Recomendo que você veja o tamanho certo para o cabeçalho
para não ter muitos problemas.

Depois das modificações salve, mas deixe o gadget sem
título. E claro o gadget deve ficar em primeiro.



Esse tutorial serve para qualquer imagem que você queira
colocar no blog, não só o cabeçalho.

Bem pessoal espero que tenham gostado e até o próximo post.



Créditos ao Chuva de HTML


Se caso quiser pedir algum tutorial, utilitários, etc. Peça
ai nos comentários ou na página de Contato.