Menu de Marcadores em 2 ou 3 colunas

Dividir alguma coisa em 2 ou 3 colunas em html é bem útil para poupar espaços e deixar mais organizadinho. Fiz isso nessa postagem sobre o nome das cores em html e ali na sidebar no menu de marcadores. Existe maneiras de se fazer isso mais chiques, mas, basicamente, eu costumo fazer de um jeitinho mais simples...
No html da postagem:
<div style="float: left; width: 45%;"> O que aparece na primeira coluna</div>
<div style="float: left; width: 45%;"> O que aparece na segunda coluna</div>
Para que fique dividido certinho em colunas é só usar um número que totalize 90, no caso, duas colunas, usei 45% (45+45=90), se quiser 3 colunas, use 30%; dependendo da largura de onde estiver inserido, será dividido em 2 ou 3 colunas.
Já para menus em geral, é preciso caprichar mais né, tipo um efeitinho ao passar o mouse e tals; uso o código abaixo que pode ser inserido no html da postagem ou em um gadget html/javascript:
<style>
.tagmenu{ 
float: left;
width: 30%;
text-align: center;
background: #ffdfdf;
    padding: 5px;
    color: #bf8b8b !important;
    display: block;
    margin: 2px;
    font-family: delius;
    font-size: 12px;
    border-radius: 30px;
    text-decoration: none;
    border: 1px dashed;
}
.tagmenu a{
    color: #bf8b8b !important;
    text-decoration: none !important;
}
.tagmenu:hover{
    background: #f1d7d7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdAP1ufSFDulhUhsyN4NOE0L6n7fRC9pM9DyJ_Mzrdb3_hag8DiG712fo0m4pU0C57oFbJ3n1eb8zHAz4ezutAW9C51Gb1cj4veSnOAv1m_mtHtGY9VrtMZMPzOWtZYcYWkc6KU804bP8/s1600/emoticon2.gif) no-repeat right;
text-decoration: none !important;
}
</style>
<a class='tagmenu' href='#'>Link 1</a>
<a class='tagmenu' href='#'>Link 2</a>
<a class='tagmenu' href='#'>Link 3</a>
<a class='tagmenu' href='#'>Link 4</a>
<a class='tagmenu' href='#'>Link 5</a>
<a class='tagmenu' href='#'>Link 6</a>
<a class='tagmenu' href='#'>Link 7</a>
<a class='tagmenu' href='#'>Link 8</a>
<a class='tagmenu' href='#'>Link 9</a>
<a class='tagmenu' href='#'>Link 10</a>
<a class='tagmenu' href='#'>Link 11</a>
<a class='tagmenu' href='#'>Link 12</a>

Em que...
background: #ffdfdf e/ou background: #f1d7d7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdAP1ufSFDulhUhsyN4NOE0L6n7fRC9pM9DyJ_Mzrdb3_hag8DiG712fo0m4pU0C57oFbJ3n1eb8zHAz4ezutAW9C51Gb1cj4veSnOAv1m_mtHtGY9VrtMZMPzOWtZYcYWkc6KU804bP8/s1600/emoticon2.gif) no-repeat right; => é a cor e a imagem de fundo do menu. A primeira é a cor padrão e quando passar o ponteiro do mouse sobre o menu (hover), muda o plano de fundo e aparece uma imagem.
color: #bf8b8b !important; => cor dos links do menu; esse !important eu uso para que o menu tenha a cor dos links que eu quero no código, caso o contrário, fica da cor dos links definidos para o blog.
font-family: delius; => tipo da fonte, uso a Delius, do Google Fonts.
font-size: 12px; => tamanho da fonte.
border-radius: 30px; e border: 1px dashed; => deixar a borda arredondada e com pontilhado.

O Blogger possui o gadget de Marcadores padrão, o qual pode ser personalizado desse jeito também. Em Layout, adicione o gadget Marcadores, dê um título, escolha o modo lista e um número par de quantos serão mostrados:

Agora em Tema, no html do template, procure (Ctrl+F) pelo título que deu aos marcadores ou por marcadores e encontrará algo como...
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
Viu que a ID do gadget chama-se Label1? Se você usa apenas 1 gadget de marcadores, ele será assim, mas pode ser que use mais de um, então você deve saber qual o nome da ID do gadget e usar o nome dela no lugar de Label1, como expliquei nesse post. Antes de ]]></b:skin>, cole este código:
#Label1 ul li{ 
float: left;
width: 45%;
text-align: center;
background: #ffdfdf;
    padding: 5px;
    color: #bf8b8b;
    display: block;
    margin: 2px;
    font-family: delius;
    font-size: 12px;
    border-radius: 30px;
    text-decoration: none;
    border: 1px dashed;
}
#Label1 a{
    color: #bf8b8b;
    text-decoration: none;
}
#Label1 ul li:hover{
    background: #f1d7d7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdAP1ufSFDulhUhsyN4NOE0L6n7fRC9pM9DyJ_Mzrdb3_hag8DiG712fo0m4pU0C57oFbJ3n1eb8zHAz4ezutAW9C51Gb1cj4veSnOAv1m_mtHtGY9VrtMZMPzOWtZYcYWkc6KU804bP8/s1600/emoticon2.gif) no-repeat right;
}
Resultado:
Link 1 Link 2 Link 3 Link 4 Link 5 Link 6 Link 7 Link 8 Link 9 Link 10 Link 11 Link 12

1 Comments

  1. Dayane Rodrigues24 agosto

    Ai meu Deus como seu blog é uma fofura *ww* adorei esse menu, vou testar no meu blog pra ver se vai combinar com o template, achei mega fofo o contorno ser em pontilhado <3

    Apenas eu, Day

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up