Templates e Acessórios: Header

Postagens Recentes

Mostrando postagens com marcador Header. Mostrar todas as postagens

10 de abr. de 2013

Dividir a header do Blogger e colocar mais uma coluna abaixo do cabeçalho

Com este hack você dividi a área do cabeçalho do blog em duas colunas acrescentando mais uma coluna abaixo que servirá para colocar banners, botões sociais, menus, slide, enfim, o que quiser.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Clique em "Formatar modelo" e depois clique em Ctrl e F.

Procure então pelo seguinte trecho:

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie então este código abaixo e cole no local indicado.

/*Header --------------------------------*/
.header-inner{
float: left; width: 50%;
margin: 6px;
}

.header-fauxborder-right{
float: right;
width: 46%; height: auto;
margin: 6px 6px;
}

.col-ext-elk{
margin: 10px 3px 5px 3px;
}

Depois clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior.

»»Leia mais...

20 de jan. de 2013

Desafixar o cabeçalho do template dinâmico

. Elke di Barros | 21:05 Nenhum comentário:

DEMO

Eu até acho legal e tals, o template ter o cabeçalho (header) fixa no blog mas também acho que toma espaço quando o leitor começa a ler o blog e sabem o que penso: o leitor é um cliente de seu empreendimento na internet, por isso, ele vem em primeiro lugar entre um layout lindo e o seu conforto (não estou dizendo que o layout tem que ser deixado de lado).
Para resolver este probleminhja nos templates dinâmicos, eis a solução:

Vá até o "Modelo de seu blog", clique em "Personalizar"

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Dinâmico, do novo Blogger, implementado em julho de 2011

Ao abrir essa janela, vá em Avançar -------> Adicionar CSS

Cole no local indicado o código abaixo:

/*Desafixar cabeçalho--------------------------------------------*/
#header .header-drawer.sticky, #header .header-bar, #header .header-drawer{
top: 0px !important;
margin-top: 0px !important;
position: relative !important;
}
body.sidebar #main.hfeed #sidebar{
position: absolute !important;
}

#header{
position: relative !important;
}
#header #views{
position: absolute;
}
#header #pages{
left: 110px
}

»»Leia mais...

16 de jun. de 2012

Combo: modificar a header e o menu de páginas do novo Blogger

. Elke di Barros | 00:30 7 comentários:

DEMO

"Vambora" modificar a header de seu blog ? Colocar um menu social, buscador, feed de comentários e posts e costumizar o menu de páginas do Blogger ?

Para dar estilo à header do Blogger, é necessário antes, dividir a header do Blogger, colocando ali um novo widget. Para isso, siga primeiro essa dica. Depois volte aqui e siga o resto da tutorial...

Ao abrir, cole então o próximo código fazendo as modificações necessárias para linkar suas páginas sociais.

»»Leia mais...

9 de ago. de 2011

Aparência de caixa alta no título do novo Blogger com CSS3

. Elke di Barros | 01:55 Um comentário:

O que muda é a cor do título de seu blog, mas o efeito é o mesmo

Para dar ao título de seu blog a aparência de caixa alta, siga a dica abaixo.

Vá até o Modelo de seu blog, clique em Editar modelo

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Procure por:

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

Substitua por este abaixo

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: 1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd;
}

»»Leia mais...

Colocando a lista de páginas acima da header no novo Blogger

. Elke di Barros | 01:18 2 comentários:

Vamos lá, vamos modificando tudo que os webs do Blogger fizeram e deixando como queremos e gostamos. Não tem aquela máxima que diz que o cliente tem sempre razão ? Pois bem...

Vá até o Modelo de seu blog, clique em Editar modelo

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Procure por:

<div class='tabs-outer'>
    <div class='tabs-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left tabs-fauxborder-left'>
    <div class='fauxborder-right tabs-fauxborder-right'/>
    <div class='region-inner tabs-inner'>
      <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'/>
</b:section>
      <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
    </div>
    </div>
    <div class='tabs-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>

Copie todo o código e o apague.

Procure por

<header>

Agora cole o código que você copiou e acima dele

»»Leia mais...

7 de ago. de 2011

Dividindo a header do novo modelo do Blogger por Ariane

. Elke di Barros | 22:53 Nenhum comentário:

~~Além desta maneira de dividir a header do novo Blogger, ví no blog da Ariane outra maneira de dividir a header do novo modelo do Blogger. Fica nelhor ;-)~~

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Vá até o modelo de seu blog e clique em "Editar modelo"

Agora procure por:

<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='Template Mini Cute (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>

Substitua por este código abaixo:(se não quiser margem, apague o código em vermelho)

<div class='fauxborder-left header-fauxborder-left'>
<div class='region-inner header-inner' style='width:49%; float:left'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Template Mini Cute (Cabeçalho)' type='Header'/>
</b:section></div>

<div class='fauxborder-right header-fauxborder-right' style='width:49%;float:right;height: auto;margin: 30px 16px; 0 2px'>
<b:section class='banner' id='banner' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML122' locked='false' title='' type='HTML'/>
</b:section>

</div>
</div>

<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>
<div style='clear:both;'/>

Veja aqui

»»Leia mais...

21 de jul. de 2011

Dividir o cabeçalho do novo Blogger

. Elke di Barros | 22:34 10 comentários:

Os códigos sofreram transformações de nomes, mas as funções acabam por ser as mesmas. Muitas vezes precisamos aproveitar ao máximo o layout do blog para que fique em harmonia e perfeita simetria. Para isso, porque não usar o cabeçalho mais do que para o título do blog ?

Então, vamos aprender a diividir o cabeçalho do novo Blogger não tem muita diferença. Siga as instruções.

Vá até o Modelo de seu blog, clique em Editar modelo

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Procure por:

<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='Templates e Acessórios (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>

Troque por:

Se este acima não deu certo, tente este:

»»Leia mais...

17 de jul. de 2011

Personalizar a área do cabeçalho (header) do novo Blogger

. Elke di Barros | 19:56 6 comentários:

Tudo depende de sua criatividade em arrumar o seu código

DEMO

Já tratei de como personalizar a área da sidebar (colunas) e a área das postagens. Vamos agora personalizar a área do cabeçalho (header)

Saiba que estas dicas são para o novo Blogger e que, o template usado é o Simple.

Vá até o Modelo de seu blog, clique em Editar modelo

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Procure por:

.Header h1 {

font: $(header.font);

color: $(header.text.color);

text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

}

Troque então por este código abaixo.

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
margin: 5px;
background: #FFC0FF url(AQUI O ENDEREÇO DE SUA IMAGEM) no-repeat;
padding:120px 22px;
text-align: right;/*troque right por left para o titulo ficar a esquerda*/

moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;

}

Algumas considerações:

O código em amarelo representa a imagem. Cole aí o endereço de sua imagem.
O código em vermelho representa a cor de fundo do cabeçalho
O código em azul representa onde ficará o título do blog
Para que sua imagem cubra toda a área do cabeçalho, apague o código que está em verde.
Para aumentar ou diminuir o comprimento da header, mude o número que está em roxo
Se não quiser o sombreamento, apague os códigos que estão na cor rosa

»»Leia mais...

5 de mar. de 2010

Header ocupando toda a área do cabeçalho do blog

. Elke di Barros | 23:54 8 comentários:

Para que seu cabeçalho seja todo ocupado por uma imagem ou mesmo uma cor de fundo como nesse modelo AQUI, vá até o HTML de seu blog e procure pelo seguinte trecho:

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='AQUI DEVERÁ TER O NOME DE SEU BLOG' type='Header'/>
</b:section>
</div>

Copie-o e apague .

Agora procure pelo seguinte código:

</head>

Agora cole-o abaixo dele.

Procure então pelo seguite trecho:

#header-wrapper {AQUI TERÁ UM MONTE DE CÓDIGO NO MEIO}

O que você devará fazer com bastante atenção é apagar tudo que estiver dentro das chaves{} e substituir pelo código abaixo.
*Preste atenção pois a chave terá que abrir e fechar o código.

width:100%;background: #808080;margin:-24px 0 0 0; border-bottom: 15px solid #cccccc;

Portanto o código completo ficará assim:

#header-wrapper {width:100%;background: #808080;margin:-24px 0 0 0; border-bottom: 15px solid #cccccc;}

Código na cor azul representa a cor de fundo.
Código na cor amarela representa a cor do linha de baixo.

Elke, a d o r e i, mas vem cá, gostaria de colocar uma imagem...

Ah sim, então o código que você deverá colocar emtre os colchetes será o código abaixo.

width:100%;background: url(AQUI O ENDEREÇO DE SUA IMAGEM) repeat;margin:-24px 0 0 0; border-bottom: 15px solid #cccccc;

Portanto o código completo ficará assim:

#header-wrapper {width:100%;background: url(AQUI O ENDEREÇO DE SUA IMAGEM) repeat; margin:-24px 0 0 0; border-bottom: 15px solid #cccccc;}

»»Leia mais...

20 de out. de 2009

Como dividir o cabeçalho do Blogger

. Elke di Barros | 12:06 6 comentários:

~~Para dividir o cabeçalho do Blogger, vá até o HTML de seu blog e procure pelo seguinte trecho:~~

~~Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.~~

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Substitua por este código abaixo.

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:980px;
height: 300px;
margin:0 auto 10px;
}
#header {

height: 300px;
margin: 35px 0 0 0;
text-align: left;
float:left;
width:56%;
color:#E2DBD4;
}
#header-right{
margin: 10px 0 0 0;
padding: 30px 0 0 10px;
text-align: left;
float:right;
width:40%;
color:$pagetitlecolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header h1 {
font-size: 35px;
margin:55px 0 5px 0;
padding:45px 0 0 20px;
line-height:1.2em;
letter-spacing:.2em;
font: #907095;
color: #907095;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
letter-spacing:.2em;
line-height: 1.4em;
font-size: 25px;
font-family:'Tangerine', arial, serif;
text-shadow: 0px 2px 2px #000;
color: #E2DBD4;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Código em azul representa o tamanho total de seu cabeçalho

código em laranja, largura

Agora procure pelo seguinte código:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='5' showaddelement='no'>
<b:widget id='Header1' locked='true' title='AQUI DEVERÁ ESTAR O NOME DE SEU BLOG(Cabeçalho)' type='Header'/>
</b:section>
</div>

E substitua por este:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'/>
</b:section>
<b:section class='header-right' id='header-right' maxwidgets='1' showaddelement='yes'>
<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'/>
</b:section>
</div>

Pronto, veja como ficou:

Provavelmente seu teplate deverá ficar torto, conserte isso trocando as medidas do seu blog em "outer-wrapper" que deverá ter a mesma medida de seu "header" (código em azul). Depois troque os demais códigos.

Verde-------largura dos post
Rosa--------largura da sidebar

#outer-wrapper {
width: 960px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 620px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 330px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Aprenda aqui a dividir a header do Blogger

»»Leia mais...

14 de set. de 2009

Imagem no cabeçalho/header do Blogger

. Elke di Barros | 08:42 3 comentários:

Para colocar imagem no cabeçalho do Blogger, vá até o HTML de seu blog e procure pelo trecho: (levando em consideração o template Mínima, pode ser que esteja diferente em seu blog então procure a partge em negrito e substitua tudo que estiver até } )

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Substitua por este outro colocando o endereço de sua imagem hospedada na net e coloque o valor referente ao tamanho de sua imagem.

#header-wrapper {
background: url(AQUI O ENDEREÇO DE SUA IMAGEM) no-repeat;
height: 200px; /*comprimento*/
width:660px; /*largura*/
margin:0 auto 10px;
border:1px solid $bordercolor;/*borda*/
}

height:----------comprimento
width:-----------largura

Se não quer borda, apague todo o trecho em negrito

»»Leia mais...

12 de set. de 2009

Imagem ou cor no cabeçalho ocupando toda a área

. Elke di Barros | 02:01 7 comentários:

~~Para que o cabeçalho do seu blog ocupe toda a extenção da header é bem facinho.~~

~~Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.~~

~~Vá até o HTML de seu blog e procure pelo código:~~

~~#header-wrapper {~~

~~Agora veja onde estiver escrito:~~

~~width:~~

~~Troque o número que estiver a frente dele pelo número: 1030~~
~~O código então ficará assim:~~

~~width: 1030px;~~

~~Salve.~~

~~Agora procure pelo trecho:~~
~~<div id='header-wrapper'>~~
~~<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>~~
~~<b:widget id='Header1' locked='true' title='template34094 (Cabeçalho)' type='Header'/>~~
~~</b:section>~~
~~</div>~~

~~Copie todo o trecho e apague-o pois você irá coloca-lo em outro lugar. Procure então pelo primeiro código <div id= e cole então o código que você copiou acima dele.~~

~~Salve e pode fazer suas modificações.</s>~~

Veja a dica AQUI

»»Leia mais...

30 de abr. de 2008

Barra de recados na header do Blogger ( acima da imagem principal)

. Elke di Barros | 12:26 Um comentário:

Para colocar uma barra de mensagem acima da imagem principal do seu blog como esta que tenho AQUI é bem facinho, basta copiar o código, vá até o HTML do seu blog procurar pelo código: </head>

e cole abaixo dele o código.

Faça as alterações como cor de fundo, border e claro, a sua mensagem. Outras cores AQUI, outros tipos de border AQUI

azul--cor da letra
vermelho--cor do fundo
laranja--tipo de border
verde--cor do border
Para recado com efeito.

<div style='color:#ffffff; background-color:#bea1cc; border-bottom: 2px dotted #ffffff; border-top: 2px dotted #ffffff; margin: 0 0 5px 0; padding: 4px 0; font-size: 14px;'><b><center> <marquee>AQUI SEU RECADO</marquee></center> </b></div>

Para recado parado

<div style='color:#ffffff; background-color:#bea1cc; border-bottom: 2px dotted #ffffff; border-top: 2px dotted #ffffff; margin: 0 0 5px 0; padding: 4px 0; font-size: 14px;'><b><center>AQUI SEU RECADO</center> </b></div>

Barra com imagem

»»Leia mais...

Blog Archive

março (1)
julho (6)
junho (1)
dezembro (1)
julho (3)
junho (1)
maio (4)
janeiro (7)
dezembro (4)
novembro (2)
outubro (5)
setembro (4)
agosto (6)
julho (1)
junho (11)
maio (25)
abril (24)
março (26)
fevereiro (9)
janeiro (23)
dezembro (11)
novembro (4)
outubro (30)
setembro (8)
agosto (2)
julho (2)
junho (3)
maio (8)
abril (41)
março (2)
fevereiro (1)
janeiro (1)
dezembro (9)
novembro (6)
outubro (3)
setembro (11)
agosto (40)
julho (39)
junho (5)
maio (7)
abril (4)
março (17)
fevereiro (3)
janeiro (4)
dezembro (22)
novembro (18)
outubro (2)
setembro (10)
agosto (27)
julho (6)
junho (16)
maio (31)
abril (19)
março (8)
fevereiro (4)
janeiro (7)
dezembro (6)
novembro (14)
outubro (21)
setembro (29)
agosto (19)
julho (11)
junho (21)
maio (24)
abril (8)
março (1)
janeiro (5)
dezembro (9)
novembro (8)
outubro (16)
setembro (6)
agosto (27)
julho (34)
junho (21)
maio (42)
abril (85)
março (9)
fevereiro (12)
janeiro (12)
dezembro (22)
novembro (47)
outubro (71)
setembro (14)
agosto (14)
julho (5)

Templates e Acessórios

10 de abr. de 2013

Dividir a header do Blogger e colocar mais uma coluna abaixo do cabeçalho

20 de jan. de 2013

Desafixar o cabeçalho do template dinâmico

16 de jun. de 2012

Combo: modificar a header e o menu de páginas do novo Blogger

9 de ago. de 2011

Aparência de caixa alta no título do novo Blogger com CSS3

Colocando a lista de páginas acima da header no novo Blogger

7 de ago. de 2011

Dividindo a header do novo modelo do Blogger por Ariane

21 de jul. de 2011

Dividir o cabeçalho do novo Blogger

17 de jul. de 2011

Personalizar a área do cabeçalho (header) do novo Blogger

5 de mar. de 2010

Header ocupando toda a área do cabeçalho do blog

20 de out. de 2009

Como dividir o cabeçalho do Blogger

14 de set. de 2009

Imagem no cabeçalho/header do Blogger

12 de set. de 2009

Imagem ou cor no cabeçalho ocupando toda a área

30 de abr. de 2008

Barra de recados na header do Blogger ( acima da imagem principal)

Quem Sou

Postagens populares

Posts aleatórios