Como Colocar Submenu no Blogger
Veja um Código para criar um menu com submenu no Blogger. Este é um código simples de HTML e CSS para colocar um sub-menu no seu blogspot de maneira fácil e rápida. Colocar um Submenu no Blogger pode ajudar a organizar melhor seu blog destacando o que você acha mais importante em seu site.
Como Personalizar Marcadores do Blog
Vamos personalizar o menu marcadores do Blogger: podemos modificar a aparência dos links do menu, escolher quais marcadores aparecem no blog e assim criar um menu com os marcadores do blog que ajude melhorar o template do blog e manter as pessoas mais tempo em nossa pagina.
Menu para Blog: Colocar Menu Accordion (Sanfona) Vertical no Blog
Veja como criar um menu Accordion no seu blog usando HTML e CSS. Você poderá criar diversos efeitos e combinações de cores para personalizar o menu sanfona (menu Accordion) no seu site ou blog. Outra vantagem deste tipo de menu é que poupa espaço no seu template permitindo colocar vários links que só aparecem ao clicar no menu, ou seja, praticamente a mesma coisa que colocar um submenu no blog.
Criar e Colocar um Menu com SubMenu com CSS no Blog
Aprenda a criar e colocar um menu com submenu no blog usando códigos HTML e CSS. Inserir um submenu no blog pode ajudar a organizar seu conteúdo deixando mais fácil as pessoas encontrarem o que procuram. Além disso, esse tipo de menu ajuda você as postagens que acha as mais importantes do seu site.
Fazer Menu Accordion no Blog - Criar Sub Categorias no Blogger
Criar um Menu Accordion ou menu sanfona no blog pode ser uma forma bem interessante de criar um sub menu no seu blog e com isso aproveitar o espaço para colocar diversos links ocupando pouco espaço no seu template. Ele também pode servir para fazer uma adaptação e criar um menu com subcategorias dos seus marcadores como se fosse um marcador dentro de outro marcador no blogger. Veja também como fazer um menu horizontal.
Menu Horizontal com Efeitos no Blogger usando CSS
Criar um menu horizontal para usar no blog é algo fácil de fazer usando os estilos CSS, mas existem muitas coisas que podemos usar para personalizar e colocar efeitos interessantes neste menu com links um do lado do outro como, por exemplo, usar imagens de fundo para criar efeito de botões ou até mesmo colocar um menu com movimentos usando gifs animados.
Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)
Fazer a barra de navegação no blogger é uma forma interessante de mostrar onde o visitante está no seu site. Estamos falando daquele tipo de menu mostrando inicio > nome do marcador > titulo da postagem. Isso pode ajudar a diminuir a sua taxa de rejeição fazendo os visitantes permanecerem mais tempo na sua pagina já que mostra links dos marcadores no menu de navegação que alguns sites chamam de Gadget Breadcrumb. Caso esteja procurando aqueles barras com ferramentas com botão curtir, retweet e outros que alguns blogs mostram no rodapé da pagina veja neste link:Criar barra com acessórios no blog.
Ocultar Marcador e Personalizar o Menu dos Marcadores do Blog
Vamos falar sobre como melhorar o menu dos marcadores do blog, por exemplo: como ocultar o marcador do menu quando está visitando a pagina daquele marcador, como fazer aparecer um texto sobre os itens do menu marcadores do blog (tag title), veja como usar Descrição em Imagens e Textos - Tag Alt e Title em outras partes do blog. Ou ainda como colocar imagens ao lado dos itens do menu marcadores.
Paginas Dinâmicas do Blogger com Menu de Gadgets Flutuantes
O Blogger está com mais uma novidade: as paginas dinâmicas do Blogger agora têm gadgets! Já era aguardado por todos os blogueiros que as Dynamic Views do blogspot permitissem a utilização de gadgets e finalmente isso já está funcionando e você nem precisa modificar nada no seu blog. Os gadgets de seguidores, arquivos do blog, assinar feed, marcadores e alguns outros aparecem automaticamente nos blogs que usam templates dinâmicos templates dinâmicos do blogger(visualização dinâmica).
Modificar Menu Suspenso do Gadget Arquivo do Blogspot
No Blogger muitos blogueiros que usam o gadget Arquivo do blog no formato de menu suspenso (menu jump) mas quase ninguém faz modificações neste menu porém isso é bem simples de fazer, apenas precisa de cuidado na hora de alterar o código para não apagar coisas por engano, veja Porque os códigos não funcionam no blog. Então vamos mostrar como aumentar a largura, utilizar outras fontes ou mudar o tamanho da letra no gadget do arquivo do blog utilizando com o menu suspenso.
Como Fazer um Menu Vertical Fixo no Blogger
Vamos mostrar como colocar um menu vertical fixo na lateral do seu blog, mas esse menu tem o estilo expansível, ou seja, quando passa o mouse sobre o menu o ícone expande e mostra o título do menu dando uma melhor aparência e atraindo atenção dos visitantes. Caso esteja procurando um menu com links lado a lado veja como fazer um menu horizontal.
Fazer Menu com Imagens ao lado dos Links
Quando fazemos uma lista de links no blog podemos colocar uma imagem ao lado de cada link para ficar mais bonito, isto pode ser feito colocando setinhas ao lado dos links ou alguma outra imagem que podem ser gifs animados como utilizamos muitas vezes em nossos blogs. Veja também como fazer um menu horizontal.
Esse tutorial mostrará como colocar imagens do lado dos links utilizando um menu feito com um gadget de html/javascript, mas se quiser pode ver aqui como aplicar esse mesmo estilo de formatação em qualquer gadget do seu blog, por exemplo, nos marcadores ou qualquer outro.
Esse tutorial mostrará como colocar imagens do lado dos links utilizando um menu feito com um gadget de html/javascript, mas se quiser pode ver aqui como aplicar esse mesmo estilo de formatação em qualquer gadget do seu blog, por exemplo, nos marcadores ou qualquer outro.
Como fazer e colocar botões no blog
Para fazer botões no seu site ou blog o jeito mais fácil é usar um estilo CSS para colocar essa imagem do botão como fundo de um texto(seus links). Calma parece um pouco complicado, mas são poucas linhas de códigos e depois colocar ou modificar os botões será uma tarefa muito simples e rápida.
Antes de começar precisamos achar ou criar 2 imagens para usar como botões, elas precisam ser do mesmo tamanho porque usaremos uma quando o blog aparece e a outra quando colocamos o mouse sobre o link. Veja aqui alguns programas grátis para editar imagens, eles são bons para fazer os botões e outras imagens que precise no seu blog. Depois disso você precisa hospedar as imagens em algum lugar sugerimos o ImageShack.
Agora vamos começar colocar os novos botões no seu blog, primeiro vamos colocar o estilo CSS, entre na pagina editar html, procure por body{...tem varias coisas aqui....}, antes da palavra body coloque o código abaixo:
.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(http://img254.imageshack.us/img254/6578/outa.jpg);
}
Assim fica bem fácil localizar esse código dos botões quando quiser fazer alterações nele, sua pagina editar html ficará assim:
/* Primary layout */
.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(http://img254.imageshack.us/img254/6578/outa.jpg);
}
body {background-color: $mainBgColor;
Então clique para salvar, agora vamos colocar os links onde usaremos esses botões, entre na pagina layout, clique em adicionar gadget, html/javascript e cole esse código:
<div class="botao">
<a href="endereço" target="_blank">nome do site</a>
<a href="endereço" target="_blank">nome do site</a>
<a href="endereço" target="_blank">nome do site</a>
<a href="endereço" target="_blank">nome do site</a>
</div>
Apenas faça as alterações colocando o nome e endereço dos sites que quiser, pode colocar quantos sites desejar não existe limite. Agora é só salvar e visualizar seu blog esses links já aparecerão com os botões que você fez.
Já parece tudo pronto, mas faltou explicar como alterar esses botões, o código que publicamos foi apenas um exemplo, os valores que estão no código são referentes ao tamanho do botão que usamos, então quando usar suas imagens faça os ajustes necessários.
text-indent: 5px; margem esquerda do texto
width: 210px; largura do botão
height: 30px; altura do botão
line-height: 30px; altura da linha(deve ser igual à altura do botão)
Sobre a largura do botão ainda temos que verificar se o texto de nossos links não serão grandes demais para o botão pois se o texto ocupar duas linhas a imagem do botão se repetirá e certamente o efeito visual disso é péssimo para o layout, neste caso você deve reduzir o texto do link ou refazer o botão mais largo.
Outro detalhe é o porquê usamos uma cor de fundo se já fizemos o botão com uma imagem, a resposta para isso é simples: é melhor prevenir do que remediar quer dizer em caso da imagem não carregar por qualquer motivo aparecerá uma cor de fundo mesmo assim que sugerimos usar uma cor parecida com a cor do botão. A utilidade disso é, por exemplo, se o fundo do seu blog for preto e usar um botão branco, com texto preto, se o botão não aparece por algum motivo o texto do link pode ficar invisível devido à cor de fundo do blog, então colocando uma cor de fundo no botão temos a certeza que pelo menos essa cor sempre aparecerá junto com o link
Antes de começar precisamos achar ou criar 2 imagens para usar como botões, elas precisam ser do mesmo tamanho porque usaremos uma quando o blog aparece e a outra quando colocamos o mouse sobre o link. Veja aqui alguns programas grátis para editar imagens, eles são bons para fazer os botões e outras imagens que precise no seu blog. Depois disso você precisa hospedar as imagens em algum lugar sugerimos o ImageShack.
Agora vamos começar colocar os novos botões no seu blog, primeiro vamos colocar o estilo CSS, entre na pagina editar html, procure por body{...tem varias coisas aqui....}, antes da palavra body coloque o código abaixo:
.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(http://img254.imageshack.us/img254/6578/outa.jpg);
}
Assim fica bem fácil localizar esse código dos botões quando quiser fazer alterações nele, sua pagina editar html ficará assim:
/* Primary layout */
.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(http://img254.imageshack.us/img254/6578/outa.jpg);
}
body {background-color: $mainBgColor;
Então clique para salvar, agora vamos colocar os links onde usaremos esses botões, entre na pagina layout, clique em adicionar gadget, html/javascript e cole esse código:
<div class="botao">
<a href="endereço" target="_blank">nome do site</a>
<a href="endereço" target="_blank">nome do site</a>
<a href="endereço" target="_blank">nome do site</a>
<a href="endereço" target="_blank">nome do site</a>
</div>
Apenas faça as alterações colocando o nome e endereço dos sites que quiser, pode colocar quantos sites desejar não existe limite. Agora é só salvar e visualizar seu blog esses links já aparecerão com os botões que você fez.
Já parece tudo pronto, mas faltou explicar como alterar esses botões, o código que publicamos foi apenas um exemplo, os valores que estão no código são referentes ao tamanho do botão que usamos, então quando usar suas imagens faça os ajustes necessários.
text-indent: 5px; margem esquerda do texto
width: 210px; largura do botão
height: 30px; altura do botão
line-height: 30px; altura da linha(deve ser igual à altura do botão)
Sobre a largura do botão ainda temos que verificar se o texto de nossos links não serão grandes demais para o botão pois se o texto ocupar duas linhas a imagem do botão se repetirá e certamente o efeito visual disso é péssimo para o layout, neste caso você deve reduzir o texto do link ou refazer o botão mais largo.
Outro detalhe é o porquê usamos uma cor de fundo se já fizemos o botão com uma imagem, a resposta para isso é simples: é melhor prevenir do que remediar quer dizer em caso da imagem não carregar por qualquer motivo aparecerá uma cor de fundo mesmo assim que sugerimos usar uma cor parecida com a cor do botão. A utilidade disso é, por exemplo, se o fundo do seu blog for preto e usar um botão branco, com texto preto, se o botão não aparece por algum motivo o texto do link pode ficar invisível devido à cor de fundo do blog, então colocando uma cor de fundo no botão temos a certeza que pelo menos essa cor sempre aparecerá junto com o link
Sem comentários:
Enviar um comentário