Nesta postagem, vou ensinar como fazer um menu vertical (no sidebar) para o Blogger/Blogspot. Vamos utilizar o site CSSMenuMaker. Você terá de ter paciência e muita atenção.
Para começar, você precisará já ter os links que comporão os botões do seu menu. Crie postagens ou páginas para criar o menu. Sem que elas existam, não será possível, é claro.
Veja um exemplo no sidebar do meu
Blogger de Testes .
Este tutorial não é aconselhado para iniciantes. Até chegar aqui, é necessário a criação de postagens para os links, também é preciso saber como "esconder" estas postagens para que apareçam somente quando os botões do menu são clicados, etc.
Fase 1
Acesse o site
CSSMenuMaker.
a) Escolha do Estilo do Menu
Nesta página do site, escolha o estilo do menu. Para o teste, escolhi o que está assinalado em vermelho. As cores não poderão ser modificadas. Em outra postagem, ensinarei como fazer seu próprio botão de páginas.
Clique no modelo que desejar.
Em seguida em "Customize".
b) Configuração do Menu
Como mostra a próxima imagem, este será o momento em que você vai inserir as URLs no menu.
Em primeiro lugar, clique no "X" vermelho ao lado de cada ítem do menu que já existe. Sumirão todos.
Agora para criar o seu menu, clique em "Add Item".
Clique sobre cada botão do menu, altere o nome e cole a URL. Em seguida clique em "Update Item". Repita este passo até completar o seu menu vertical com todos os links que precisa.
Com todos os botões criados, clique em "HTML". Esta guia está logo ao centro, acima do seu menu. Copie o código e cole-o no Bloco de Notas do Windows para ulá-lo mais tarde.
Agora, clique em "CSS", copie todo o código e cole-o também no Bloco de Notas do Windows.
Clique em "Images", e você verá um pequeno ícone com uma imagem .gif. Clique no link e salve a imagem no seu computador. Caso o menu que você escolheu tenha mais de uma imagem, salve uma a uma com nomes diferentes ou enumere-as.
A fase no CSSMenuMaker acabou. Agora é o momento de hospedar a imagem no TinyPic.
Fase 2
Hospedagem da imagem do menu no
TinyPic Na página do site que abriu, clique em "
Escolher arquivo". E em seguida em "
Upload now !".
Como demonstrado na próxima imagem, copie o 4° link e cole-o no Bloco de Notas do Windows.
Fase 3
No Bloco de Notas do Windows.
Você já colou no Bloco de Notas dois códigos. Um HTML e outro CSS. Vamos agora editar o código CSS. Isto é; substituir o link de exemplo no código pelo link definitivo da imagem que você hospedou no TinyPic. Abaixo colei o código original CSS e você irá substituir o link, conforme indicado em vermelho.
#cssmenu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-width: 1px;
}
#cssmenu ul{
list-style:none;
margin:0px;
padding:0px;
}
#cssmenu li a {
height: 32px;
height: 24px;
text-decoration: none;
font-weight:normal;
}
#cssmenu li a:link, #cssmenu li a:visited {
color: #FFFFFF;
display: block;
background: url(
cole aqui o link da imagem hospedada );
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#cssmenu li a:hover {
color: #666666;
background: url(cole aqui o link da imagem hospedada) 0 -32px;
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#cssmenu li a:active {
color: #666666;
background: url(
cole aqui o link da imagem hospedada ) 0 -64px;
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
Fase 4
No Blogger/Blogspot
Faça login no seu Blogger e clique em "Modelo", em seguida em "HTML", em "Prosseguir". Dê um "Ctrl+f" no seu teclado e na janela que se abriu, cole ]]></b:skin> Ele vai aparecer no HTML do seu Blogger.
Logo acima dele, cole o seu código CSS já modificado com os links da imagem. Visualize e dando tudo certo, salve. Não vai ainda aparecer o menu. Somente no próximo passo.
Vá ao Bloco de Notas e copie o código HTML. No Blogger, clique em "Layout" e no local onde deseja que seu menu apareça clique em "Adicionar gadget". Cole o código HTML do seu menu e salve. Visualize seu Blogspot e veja se tudo deu certo. Clique nos botões do menu para testar.
Quer ser um Influencer no Instagram e ganhar muito dinheiro com os seus posts ? Saiba como acessando o link abaixo.
Influencer no Instagram
