Como Personalizar seu Blogger - Blogspot: Título Clicável no Header
| Compare Preços no JáCotei: | ||||
 |  |  |  |  |
 | ||||
O antigo Blogger permitia que seus blogs exibissem uma imagem ou título clicável no Header (cabeçalho), função que foi eliminada no Novo Blogger. O cabeçalho clicável é uma função muito útil; a maioria dos visitantes espera que um click na imagem ou título do header os leve de volta à home page do blog.
Esse sistema facilita a navegação, e substitui com vantagem o link ao “Início”, que aparece no rodapé de cada post. Esse link não costuma ser facilmente visualizado, e vai contra os hábitos do visitante médio.
Você pode implementar essa função de duas formas no novo Blogger: Título Clicável, ou Imagem clicável.
Para isso, primeiro você deve…
Permitir a Adição de Elementos ao Header - Cabeçalho
- Entre na sua conta do Blogger.
- No Painel, escolha o blog que deseja editar e vá até Modelo ->Editar HTML.
- NÃO clique em ” Expandir modelos de widgets”. Se a caixinha estiver marcada, desmarque.
- Procure pelo código do Header; ele deve estar logo após a tag <body>. O código é este:
<div id=”header-wrapper”>
<b:section class=”header” id=”header” maxwidgets=”1” showaddelement=”no“>
<b:widget id=”Header1″ locked=”true” title=”Título do Blog (Cabeçalho)” type=”Header”>
</b:widget>
</b:section></div>
Também pode ser que o código seja ligeiramente diferente no seu template; se você usa o Harbor template, por exemplo, o código é este:
<b:section class=’header’ id=’header’ maxwidgets=’1‘>
<b:widget id=’Header1′ locked=’true‘ title=’Título do Blog (Cabeçalho)’ type=’Header’/>
</b:section>
Em qualquer dos dois casos, você deve modificar os valores que estão em vermelho:
maxwidgets=”1“ - Coloque “3“ no lugar do “1“
showaddelement= “no” - Substitua “no“ por “yes“
locked=’true‘ - Substitua ‘true‘ por ‘false‘
O código deve ficar assim:
<div id=”header-wrapper”>
<b:section class=”header” id=”header” maxwidgets=”3” showaddelement=”yes“>
<b:widget id=”Header1″ locked=”false” title=”Título do Blog (Cabeçalho)” type=”Header”>
</b:widget>
</b:section></div>
Ou assim:
<b:section class=’header’ id=’header’ maxwidgets=’3‘>
<b:widget id=’Header1′ locked=’false‘ title=’Título do Blog (Cabeçalho)’ type=’Header’/>
</b:section>
Salve as mudanças. Agora você já pode…
Adicionar um Título Clicável
- Vá até a tab “Elementos da Página”. Você verá que agora há a opção “Adicionar um Elemento de Página” no Header/Cabeçalho.
- Clique no link, e a janela dos elementos disponíveis se abrirá.
- Escolha a opção “HTML/JavaScript”
- Deixe o Título do elemento em branco.
- Na seção de conteúdo, cole o seguinte código:
<a href=”URL DO SEU BLOG“><font size=”7” face=”Georgia, Arial” color=”#000000“>TÍTULO DO BLOG</font> </a>
O que está em vermelho são os valores que você deve modificar, para adequá-los ao seu blog.
- URL DO SEU BLOG: o endereço do seu blog; por exemplo, http://net-dinheiro.blogspot.com
- Font Size: tamanho da fonte do Título
- Face: tipo de fonte
- Color: cor do Título.
- Título do Blog: o nome que você quer que apareça como Título.
Após modificar o código, salve as alterações. Se não gostar do resultado, volte e faça outras modificações, até que o Título esteja do seu agrado.
Removendo o Antigo Título
Agora, se você visualizar o blog, provavelmente verá o título que você acaba de criar, mais o antigo cabeçalho - o título não-clicável do blog. Livrar-se dele é muito fácil.
- Nos Elementos da Página, clique no “Editar” do widget que diz “Título do Blog (Cabeçalho)”.
- Na janela pop-up, clique em “Remover elemento da página” .
- Tenha cuidado para não remover o título que você mesmo criou.
- Pronto. Agora o único título que aparece é o seu Título Clicável Personalizado.
Próximamente: como adicionar uma imagem clicável ao cabeçalho do seu blog - assim como a imagem do header do Blogando por Dinheiro que você vê aí em cima, no topo do blog.
Fonte: Beta Blogger For Dummies
_______________________________
Compare Preços de: Dinheiro, Renda, Respostas, Dúvidas, Dicas, Ferramentas, DVD, Celulares, Filmes, Câmeras, Notebooks, Jogos , Wii, PS3 no JáCotei
________________________________
estou tendo problemas para inserir a imagem do cabeçalho diretamente da web. insiro o link da imagem no campo url, mas nada acontece. fica processando o tempo todo e não para. pode me ajudar?
Já respondi seu email, espero ter ajudado.
Poderia postar a resposta? Pois estou com o mesmo problema. Ou melhor, tento inserir a imagem com link mas aparece só o título.
Olá,adorei o seu Blog,dicas muito boas mesmo !!!parabéns.
Será que voce poderia me dar um passo - a - passo de como colocar um banner como o do seu Blog ,no meu Blog ?
Agradeço desde já
Angel
O passo a passo está aqui:
Como Personalizar seu Blogger - Blogspot: Imagem Personalizada no Header
eu não entende uma frase se quer do que vc escreve, eu acho que estou antes da categoria iniciantes ou devo ser a categoria burra…
É só uma questão de qual é o foco e o interesse da pessoa. Eu fiz dos blogs minha profissão, você é apaixonada por moda - cada um na sua, mas com alguma coisa em comum, né?
Estive olhando seu template, e não entendi muito; você ainda não mudou para o “novo Blogger”? Me parece que não, mas não pude chegar a uma “conclusão conclusiva”.
Se você usa o Blogger Clássico, eis aí a razão do problema: minhas dicas são (quase todas) para o Blogger novo - o que usa os layouts com widgets - o qual tem uma interface completamente diferente. Outra razão pode ser o seu template, que não é nem parecido com os padrões que conheço.
De qualquer forma, eu gostaria que você me mandasse um email através do formulário de contato, explicando o que você quer fazer e qual é o problema, seja lá o que for, assim eu posso te dar uma mão. O que você acha?
seus blog é otimo em…
mais tbm nao to conseguindo colocar a imagem, da pra me ajudar?
abraços
Olá,
muito boa essa dica, show de bola, funcionou perfeitamente, so nao consegui tirar o titulo no topo…
vo tentar excluir os escritos para ver no que vai dar…
ótimo blog…
parabéns…
continue nos ajudando….
Abraço
Leandro: Você tem que excluir o widget que contém o título original.
1- Como ja usei algumas dicas do teu blog, se quiser me mande o codigo do teu baner que coloco no meu blog, não é necessario parceria, é apenas um agradecimento.
2- Como posso colocar um botão clicável que envie para outra página com uma lista de todos os post sendo que cada nome deve ser um link para o post correspondente dentro do blog. Algo assim como “listão de Post”
Quanto à lista de posts… Se você se vira com inglês, dê uma olhada aqui: BlogToC Widget Released
Caso contrário, o jeito é fazer um post com todos os links, e usar um botão (uma imagem com o mesmo código que você usa para linkar outros blogs com banners) para linkar esse post.
Para que ele não apareça na Home, é só alterar a data antes de postar, para uma data mais antiga.
oi! alguem me pode ajudar?
como posso adicionar um link em uma imagem? quando clicamos na imagem ir logo para o link adicionado!
abraços
olá… segui passo a passo mas no meu blog o Header está diferente… não sei o que alterar então… se puder me ajudar ae vai como ele está
/* Header
———————————————–
*/
#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;
}
Obrigada desde já!
Adorei o Blog e as dicas!! Ajudooou muito a deixar tudo como eu queria!
BEIJOS
;*
Kiss: De nada, volte sempre!
Show de bola!
O curioso é que, atirando no que vi, acertei o que não vi… Eu não estava conseguindo centralizar a imagem, no meu novo blog. De repente, deu tudo certo!!
Mas, final de dia, cansada, não consegui ficar fazendo os testes para deixar o título do blog como no original. Então, por ora, já feliz por ter centralizado a imagem, continuo depois as experimentações.
Adorei o blog!
Grande abraço!
valeu pela dica… testei e deu certinho
Renan: De nada!
[...] Conforme está explicado neste post: Como Personalizar seu Blogger - Blogspot: Título Clicável no Header. [...]
eu nao consigo criar um menu no meu blog au quen me ajuda
Cara, você é bárbaro(a)… já tinha suado a camisa e não tinha me tocado que bastava inserir um elemento em html no cabeçalho… putz!
Valeu de montão!
Abraços,
Robson
Robson: De nada!