Oi pessoal!
Hoje viemos com mais um tutorial para BLOGGER.
O tutorial de
hoje ensina como colocar imagem no cabeçalho em visualizações dinâmicas.
É bem
fácil! Vamos aprender?
Passo 1: Obter link direto da imagem.
Para isso vá para o painel do seu blog e siga o seguinte
caminho:
Nova postagem > Inserir imagem
Agora troque a opção “escrever” para “HTML” ,
e copie o link.png correspondente a tag <a href>.
Depois de copiar o link, mude “s1600” por “s380” (valor
recomendado),
você pode alterar por qualquer outro valor, ajustando a imagem no
tamanho que você quiser.
Passo 2: Editar e copiar o código abaixo.
Copie o link direto da imagem e cole no código abaixo,
substituindo “LINK-QUE-VOCE-COPIOU”.
Depois copie-o!
#header
.header-drawer.sticky, #header .header-drawer {
top: 134px;
}
#header .header-bar{
height: 165px;
}
#header:hover
.header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open
#header .header-drawer {
top: 165px;
}
#header-container {
height: 205px;
}
.viewitem-panel
.viewitem-inner {
top: 100px;
padding-bottom: 120px !important;
height: auto !important;
}
#header-container
#header.header .header-bar span.title{
background: url(LINK-QUE-VOCE-COPIOU)
no-repeat center;
margin-left: auto !important;
margin-right: auto !important;
height: 165px;
}
Passo 3: Cole o código no
blog.
Vá para o painel do se blog e
siga o seguinte caminho:
Modelo > Personalizar >
Avançado > Adicionar CSS
E cole o código. Dê “enter”
após a última linha do código e clique em “Aplicar ao blog.”
Passo 4: Retirar Título e
descrição do blog.
Copie o código abaixo e cole
em “Adicionar CSS” também.
Dê “enter” após a última linha
e Aplique ao blog.
#header.header .title a h
1
, #header.header .title h
3
{
display
:
none
;
}
VEJA O RESULTADO:
Clique na imagem para ampliá-la.
Clique na imagem para ampliá-la.
EXTRA
Mudar cor
do fundo do cabeçalho.
Copie o código abaixo e cole no “Adicionar CSS”.
#header .header-bar{
background: white ;
}
OBS: Mude “White” pelo
nome de qualquer outra cor EM INGLÊS,
como “Pink”, “Black”, “Blue”... ou por um
código de cor hexagonal,
como por exemplo “#FF0000” (Vermelho).
É isso pessoal! Espero que tenha gostado.
OBS: Se quiser copiar este tutorial para colar em seu site,
dê os devidos créditos. (Imagem e texto)
Best Tutoriais
segunda-feira, 1 de setembro de 2014