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...
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...
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
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
ResponderExcluirApenas eu, Day