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)
Unknown
segunda-feira, 1 de setembro de 2014