Colocar um menu horizontal, aquele que os links ficam um do lado do outro, é mais simples do que parece, nós apenas precisamos de algumas linhas de CSS, copie o código abaixo e coloque no seu blog através da pagina layout, adicionar gadget, html/javascript:
Click Aqui para pegar o Codigo
No meio desse código todo uma das partes mais importante é a configuração de largura dos botões veja no estilo #page-bar li a tem width: 150px; isso é a largura de cada item, então faça os ajustes necessários, ou seja, se o menu horizontal ficar menor que a largura do blog aumente esse valor. Caso um ou mais itens do menu ficar na linha debaixo é preciso diminuir a largura de cada item(150) ou tirar algum dos itens do menu.
A parte final do código é só colocar o endereço dos sites e trocar o texto item1, item 2.. pelos nomes dos sites, mais uma vez cuidado com a quantidade de links, pois se colocar muitos links o menu ficará muito largo então mudará de linha, como já dissemos se acontecer isso é preciso tirar links ou diminuir o valor 150px.
As partes #page-bar li a{...} e #page-bar li a:hover{...} são o que controlam aparência dos links, então se quiser é possível modificar esse estilo para deixar do jeito que combine melhor com seu blog. Já fizemos uma postagem sobre menu horizontal, mas alguns acharam que ficou difícil de instalar, espero que assim, colocando o código num lugar só fique mais fácil.
Guia Rápido
Mostrando postagens com marcador Codigos. Mostrar todas as postagens
Mostrando postagens com marcador Codigos. Mostrar todas as postagens
Victor Hoffman
Colocar um submenu no blog é um pouco mais complicado que um menu normal. Para não deixar duvidas um submenu é quando você passa o mouse pelo menu e sobre algum item aparecem mais opções, por exemplo, um menu de um blog de downloads tem musica, jogos, filmes, games e outros itens, quando você coloca o mouse sobre o item filmes aparece um novo menu ao lado com os itens suspense, terror, comédia, adulto...
Agora que já explicamos como funciona o submenu vamos começar a dizer como colocar um no seu blog. Entre na pagina layout, adicionar gadget, html/javascript e coloque o código abaixo, por ser um código grande pode haver algum problema com o código em copiar e colar direito do blog, então temos aqui o mesmo Click Aqui para pegar o Codigo
Na parte final tem os itens, veja nesta pagina o menu com submenu em funcionamento e ficará mais fácil entender como colocar os títulos que quiser no menu do seu blog e nos submenus. Vamos falar sobre o item 1, isso é o texto que vai aparecer no seu blog, o link dele é daquele jeito mesmo só um sinal de jogo da velha, os subitens é só trocar onde está Item 1.1 pelo titulo que desejar e colocar a url no lugar indicado na mesma linha, e assim por diante em todos os outros links.
Você deve colocar esse código onde aparecerá o menu horizontal com submenu, lembre-se que se o espaço (largura) do seu blog não for suficiente para o menu completo um ou mais itens vão para linha debaixo, portanto é preciso ter cuidado com o numero de itens e a largura do botão para alterar a largura de cada botão mude o valor 150px, veja no código ele aparece 4 vezes width: 150px; você deve mudar esse numero em todos, ou seja, se colocar 130px tem que alterar nos 4 lugares que aparece o 150.
Para mudar as cores, letras, fundo e tudo mais dos botões é nesta parte do código:
Click Aqui para pegar Codigo 2
E o estilo quando o mouse está sobre ele é aqui:
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{background-color: #FFCC99;background-image: url(http://img16.imageshack.us/img16/122/overc.gif);
color: #000000;letter-spacing: normal;word-spacing: normal;border-top: 1px solid #FFFF00;
border-right: 1px solid #CC0000;
border-bottom: 1px solid #CC0000;
border-left: 1px solid #FFFF00;
}
Agora que já explicamos como funciona o submenu vamos começar a dizer como colocar um no seu blog. Entre na pagina layout, adicionar gadget, html/javascript e coloque o código abaixo, por ser um código grande pode haver algum problema com o código em copiar e colar direito do blog, então temos aqui o mesmo Click Aqui para pegar o Codigo
Na parte final tem os itens, veja nesta pagina o menu com submenu em funcionamento e ficará mais fácil entender como colocar os títulos que quiser no menu do seu blog e nos submenus. Vamos falar sobre o item 1, isso é o texto que vai aparecer no seu blog, o link dele é daquele jeito mesmo só um sinal de jogo da velha, os subitens é só trocar onde está Item 1.1 pelo titulo que desejar e colocar a url no lugar indicado na mesma linha, e assim por diante em todos os outros links.
Você deve colocar esse código onde aparecerá o menu horizontal com submenu, lembre-se que se o espaço (largura) do seu blog não for suficiente para o menu completo um ou mais itens vão para linha debaixo, portanto é preciso ter cuidado com o numero de itens e a largura do botão para alterar a largura de cada botão mude o valor 150px, veja no código ele aparece 4 vezes width: 150px; você deve mudar esse numero em todos, ou seja, se colocar 130px tem que alterar nos 4 lugares que aparece o 150.
Para mudar as cores, letras, fundo e tudo mais dos botões é nesta parte do código:
Click Aqui para pegar Codigo 2
E o estilo quando o mouse está sobre ele é aqui:
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{background-color: #FFCC99;background-image: url(http://img16.imageshack.us/img16/122/overc.gif);
color: #000000;letter-spacing: normal;word-spacing: normal;border-top: 1px solid #FFFF00;
border-right: 1px solid #CC0000;
border-bottom: 1px solid #CC0000;
border-left: 1px solid #FFFF00;
}
Victor Hoffman
Para colocar uma caixa de busca no blog e permitir que nossos visitantes façam pesquisas dentro do blog é uma coisa bem útil e facilita que as pessoas encontrem o que procuram. Usamos o seguinte código:
Se quiser pode modificar o tamanho do campo de texto mudando o numero 25, outra coisa é o texto Neste site você pode escrever o que desejar, por exemplo o nome do seu blog.
Isso faz o Google pesquisar as palavras digitadas somente dentro do endereço que colocamos no local indicado, assim fica fácil achar qualquer coisa no blog. Você só precisa colocar o endereço do seu blog nos locais indicados no código e depois colocar o código pela pagina layout, adicionar gadget, html/javascript e já está pronto.
Se quiser você pode criar um código parecido com esse no site do Adsense e além de mostrar um sistema de busca no seu blog ainda pode ganhar algum dinheiro quando as pessoas utilizarem as pesquisas Google através do seu blog.
Se quiser pode modificar o tamanho do campo de texto mudando o numero 25, outra coisa é o texto Neste site você pode escrever o que desejar, por exemplo o nome do seu blog.
Isso faz o Google pesquisar as palavras digitadas somente dentro do endereço que colocamos no local indicado, assim fica fácil achar qualquer coisa no blog. Você só precisa colocar o endereço do seu blog nos locais indicados no código e depois colocar o código pela pagina layout, adicionar gadget, html/javascript e já está pronto.
Se quiser você pode criar um código parecido com esse no site do Adsense e além de mostrar um sistema de busca no seu blog ainda pode ganhar algum dinheiro quando as pessoas utilizarem as pesquisas Google através do seu blog.
Victor Hoffman
Mostrar sempre a mesma lista de banner ou links pode ficar cansativo pela repetição então uma boa alternativa para essas listas é fazer que apareçam de forma aleatória cada vez que alguém visita o blog.O código para fazer uma lista de banners em ordem aleatória é o seguinte:
Apenas coloque os endereços das paginas que deseja linkar(coloque o endereço completo com o http://) e os nomes(titulo) nos lugares indicados. Para acrescentar mais itens apenas continue a numeração nas 3 listas existentes, assim:
.......
lnk[4]="endereço 4";
lnk[5]="endereço 5";
lnk[6]="endereço 6";
.......
.......
desc[4]="titulo 4";
desc[5]="titulo 5";
desc[6]="titulo 6";
.......
.......
dsp[4]="";
dsp[5]="";
dsp[6]="";
E altere o valor desta linha var nr_of_links = 3;, o valor será sempre o mesmo numero do ultimo item da lista.
Se quiser o mesmo código com links de texto para fazer que apareça cada vez em uma ordem diferente use deste jeito:
O procedimento para alterar a quantidade de banner é o mesmo usado com os links de texto na explicação acima. Tome cuidado na hora de colocar os endereços das imagens ou texto para não apagar nenhum sinal de aspas ou ponto e vírgula, pois isso faz o código não funcionar. Outro detalhe no caso das imagens tenha certeza que está usando o endereço certo, pois muitas vezes pensamos que o código está errado e na verdade é o endereço da imagem.
Assinar:
Postagens (Atom)
Postagens recentes
-
Existem alguns efeitos bem simples de fazer no texto, principalmente nos links como, por exemplo, colocar sublinhado, tachado ou sobrelinha ...
-
O recurso marcadores deixa muitas duvidas principalmente por que se você acabou de adicionar na pagina de layout, e quando visualizou seu ...
-
Para colocar um fundo no blog semi transparente, quando mesmo através do fundo das postagens é possível ver em parte o fundo do blog, é simp...
-
Para colocar uma caixa de busca no blog e permitir que nossos visitantes façam pesquisas dentro do blog é uma coisa bem útil e facilita que ...
-
Colocar um menu horizontal, aquele que os links ficam um do lado do outro, é mais simples do que parece, nós apenas precisamos de algumas l...