Usando menu flutuante

Ontém postei aqui no TumbleTricks duas dicas de contadores de visitas para você usarem nos blogs de vocês, e você viram que alguns deles eram “contadores flutuantes” e outros eram fixos, mas agora ensinarei a vocês como tornar qualquer item do seu blog um item flutuante. Isso pode ser muito útil caso você queira fazer com que um menu seja flutuante, caixa de busca, link para seu Twitter, Facebook, e pode até fazer com que seu player seja flutuante.

Então vamos lá, primeiro você precisa escolher onde seu menu flutuará. Isso será feito usando CSS:

Primeiro salve uma cópia do código fonte do seu theme no seu computador.

Depois procure pelo trecho </style> no código do seu theme, e antes dela cole o seguinte trecho:

#flutuante {
color: COR DA FONTE;
background-color: COR DO FUNDO;
border-style: ESTILO DA BORDA;
border-color: COR DA BORDA;
border-width: ESPESSURA DA BORDA;
position: fixed;
top: DISTANCIA DO TOPO; ou bottom: DISTANCIA DO FUNDO;
left: DISTANCIA DA ESQUERDA; ou right: DISTANCIA DA DIREITA;
}

Para personalizar seu menu flutuante, basta você substituir cada um dos itens em negrito. Nos itens que você tem que escolher uma cor, a cor deve ser em código decimal, você pode usar este gerador para escolher sua cor: http://www.2createawebsite.com/build/hex-colors.html.

Quando você tem que escolher espessura ou distância, o valor deve ser em pixels (exemplo: border-width: 3px;).

Em ESTILO DA BORDA, você deverá substituir por um dos itens presentes neste link: http://www.w3schools.com/css/pr_border-style.asp.

Nas duas últimas linhas do código CSS do seu menu (as duas antes de “}”) você deve escolher apenas um dos valor, ou seja, na primeira delas você deve escolher “top” ou “bottom”, seguido da distância que seu menu estará do topo ou do fundo da janela. Na segunda, você escolhe “left” ou “right”, seguido da distância em que seu menu estará na margem esquerda ou direita da janela.

Caso queira que o fundo do seu menu seja transparente, ou que ele não tenha bordas, basta remover as linhas que configuram cada um dos itens (ou seja, para que seja transparente, remova a linha “background-color”, para que ele não tenha borda, remova as linhas “border-style”, “border-color” e “border-width”).

Nota importante: Não altere nada da linha “position: fixed;”.

Agora procure por </body> e cole antes dele o seguinte código:

<div id="flutuante">
CONTEÚDO DO SEU MENU
</div>

Depois basta substituir “CONTEÚDO DO SEU MENU” com o que você quer que seja exibido dentro do seu menu flutuante. Pode ser seu player, sua caixa de busca, contador de visitas, ou qualquer coisa que você queira. O menu pode ser alterado de várias outras maneiras usando CSS, desde que a linha “position: fixed;” não seja alterada.