Compare preços

BuscaPé, líder em comparação de preços na América Latina

mega

Heroes novo espisodio

Novo episodio de Heroes episodio 112 lançado
Clique aqui para ir a página de downloads


Até a proxima semana

episodio 86/87 de naruto shippuudem

Novo Episodio de Naruto Shippuudem Lançado
episodio especial
Episodio 86/87 - A Determinação de Fogo Passa
vale a pena assistir episodio muito show
Clique aqui para ir para pagina de downloads

Marcadores como menu horizontal

Se você não tem muitos marcadores na sua página e gostaria de dar mais destaque à eles, pode transformá-los num menu horizontal abaixo (ou acima, como quiser) do título do blog. Para isso, vamos pegar o modelo de menu horizontal que uso nos templates que faço (e que já disponibilizei aqui). Siga todos os passos. Feito isso, basta ir em Modelo->Adicionar Elemento de Página e escolher a opção Marcadores. Arraste os Marcadores para o novo espaço que surgiu sob o cabeçalho do blog e salve. Para ficar com uma estética melhor, recomendo retirar os números que aparecem indicando a quantidade de postagens relacionadas com o marcador. Para isso, siga este tutorial.



Retirando a numeração ao lado dos marcadores

Você gosta da numeração que aparece ao lado dos marcadores - entre parênteses assim: música(6), poemas (5),etc - apontando quantos posts estão relacionados ao assunto? Bem, eu não gosto, acho esteticamente feio e além de tudo, desnecessário. Se você pensa como eu e deseja retirar a numeração, procure no código do seu template o trecho relacionado à Marcadores (ou o nome que tenha dado à lista). Vá no HTML do seu blog, clique em Expandir Modelo de Widgets e procure por:


<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

Apague o que está em negrito, visualize e salve.



Criando um menu horizontal no blog

Aconselho sempre, antes de qualquer mudança no seu template, que você salve uma cópia do mesmo antes de tudo. E mais, nunca salve antes de visualizar o resultado, por que se não estiver bom, basta clicar em Limpar Edições.

1º Parte:

Coloque antes de ]]></b:skin>

#navigation{
height:30px;
width: 800px;
line-height:2.9em;
margin:0px auto 0px;
background: url(link da sua imagem) repeat-x;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}


#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}


Todos os valores que aí estão (width, margin, color, etc) podem e devem ser modificados conforme o layout do seu template.

Antes de passar a segunda parte do código, vou explicar algumas coisas que podem ser modificadas:

#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:0 auto 0;
background: url(ENDEREÇO DA IMAGEM) repeat-x;
}

Height é a altura que terá o menu
Width é a largura
line-height é a altura da linha (não confundir com o tamanho da fonte)
Margin: do modo que aqui se apresenta, centraliza o menu na página (0 auto 0)
Background é o plano de fundo, que pode ser uma cor ou uma imagem. Repeat-x garante que uma imagem se repeti horizontalmente.

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}


border: aqui você define se terá borda em toda a volta de cada item do menu (para isso deixe só Border: 1px solid...), se só à direita (right), esquerda (left), topo (top), ou base (bottom). Basta determinar antes dos valores:
border-bottom: 1px solid etc etc...
border-top: 1 px solid etc etc....

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}

Color: determinará a cor que dos links antes que se passe o cursor sobre eles.

#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}

Aqui se determina cor dos links e background quando se passa o cursor por cima do link.


2º Parte:

Para deixar o menu sob o cabeçalho, coloque abaixo de (HTML):


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Templates Novo Blogger (Header)' type='Header'/>
</b:section>
</div>

Este código:

<div id='navigation'><b:section class='navigation' id='navigation' showaddelement='yes'></b:section></div>


Salve as modificações. Vá ao painel do Blogger (Modelo/Layout) e veja um novo espaço, sob o cabeçalho, onde é possível adicionar elementos de página. Crie uma lista de links e arraste para este novo espaço. Salve e visualize.


Inserir codigos no rodape da postagem

Para inserir um código - de imagem, ou link - no rodapé da postagem, faça o seguinte:

Vá no HTML do seu template e clique em Expandir Modelo de Widget. Agora procure por este trecho:

<p class='post-footer-line post-footer-line-3'/>
(Coloque aqui o código que deseja que apareça no rodapé da sua postagem)
</div>

Depois de colocar o código, antes de </div>, visualize para ver se aparece corretemante e só então salve. Só isso.

Haloscan no Blogger/Blogspot

Passei a manhã testando aqui no blog o sistema de comentários Haloscan (mas já retirei), que pode ser personalizado, exibe o IP de quem comenta (e permite o banimento de IP também), pode ser configurado para que você receba os comentários em seu e-mail e para que sejam moderados.

Para se cadastrar, acesse: Haloscan

Depois de ter efetuado seu cadastro, clique em Install, selecione Blogger/Blogspot (New Version) - se você está usando a nova versão do blogger, óbviamente. Na mesma página, deixe marcado o sistema de trackback ou desmarque, se não lhe interessar (sugiro que deixe marcado, pois é uma excelente maneira de divulgação do seu blog). Clique em Next.




Você pode conferir o vídeo que explica passo-a-passo como fazer a instalação do Haloscan no seu blog. Basicamente é isto:




Clique no link que está no primeiro parágrafo; uma nova janela se abrirá para você fazer o login no seu blog. Vá no blog escolhido para usar o sistema, clique em Modelo->Editar HTML e faça um backup do seu template (Baixar Modelo Completo). Feito isto, volte para a página do e faça o ">upload do template que você acabou de baixar. Depois clique em ">Download >New >Template (o seu Haloscan será salvo no seu computador). Volte ao seu blog, em Editar HTML e clique em Arquivo. Procure no seu computador o template que baixou no Haloscan (ele terá o nome 'Upload this to Blogger'). Clique em Fazer Upload e pronto. Nenhuma widget será perdida neste processo, nem aparecerá mensagem alguma.

Depois de instalar o Haloscan, vá em Setting para fazer suas configurações e em Template para escolher um modelo e uma imagem para o formulário de comentários.(Sobre a imagem: crie uma imagem de até 400x400 e hospede em algum site, depois copie o link da imagem e coloque no local indicado por URL of your Image:)


É isso.