Menu para Páginas personalizado e em 2 colunas

29 dezembro 2014

| |
Oi pessoal
Ultimamente eu ando sem assunto , e está cada vez mais difícil de cumprir a meta de 3 posts diariamente , estou muito sem inspiração e assunto. E para salvar isso só um tutorial *0* .
Quando eu estava criando um layout aqui para o blog , eu queria um menu para o gadget páginas , ( seria um menu para um menu ) , e não tinha nenhum blog ensinando a fazer ,
pelo menos eu não achei. Então aproveitei e vim fazer ^^

Enfim vamos começar o tutorial ? De início vá em Layout > Adicionar Gadgets , e adicione o Gadget  'páginas' ao seu blog, e depois clique em " + " no lado direito da tela logo encima , veja na imagem abaixo ( clique para ampliar )




Depois você vai para a página da página ( não bugem o cérebro ) , e você deve deixar ela na sidebar,e não embaixo do cabeçalho. Depois salve. Agora vá no editor HTML , pressione as teclas Ctrl + F e procurem por : ]]></b:skin> . E acima dele coloque o código abaixo :

/*Menu para páginas 2 colunas do blog apenaasumcara.blogspot.com
se for reblogar credite ! plágio é crime*/
#PageList1 ul li{
float: left;
width: 40%; /*Largura , não mexer*/
font-size: 10px;  /*Tamanho da fonte*/
font-family: Open Sans; /*Nome da Fonte*/
background: #000; /*Fundo de cada marcador*/
color: #FFF; /*Cor da fonte*/
text-align: center; /*Alinhamento do Texto*/
margin: 5px; /*Não mexer*/
list-style-type:none;
-moz-border-radius: 3px; /*Arredondamento da borda , quanto maior mais redonda*/
-webkit-border-radius: 3px; /*Arredondamento da borda, quanto maior mais redonda*/
border-radius: 3px; /*Arredondamento da borda , quanto maior mais redonda*/
}
#PageList1 ul li:hover {
background: #EEE; /*Fundo hover*/
color: #ccc; /*Cor da fonte*/
}

Todas as explicações estão no próprio código. Bom gente , este foi o tutorial ! Espero que tenha sido útil , qualquer dúvida é só comentar. Até o Próximo post !

Nenhum comentário :

Postar um comentário