Se você já rolou uma página da Web para baixo e um item nela não se moveu, você testemunhou a tag de posição CSS em ação. Os blogueiros do Tumblr que adicionam essa tag a seus modelos podem criar o mesmo efeito em seus blogs. Um bom lugar para experimentar é na barra lateral. Depois de adicionar uma tag de posição ao código HTML do seu blog, a barra lateral permanece fixa quando as pessoas rolar para cima e para baixo nas páginas do seu blog.

Visite o painel do Tumblr e clique no ícone de configurações e no nome do blog que deseja atualizar. Se você tiver apenas um blog, clique no nome dele.

Clique em "Personalizar" seguido de "HTML adicionado". O Tumblr abre seu tema e exibe seu código HTML.

Clique em qualquer lugar dentro do código e pressione "Ctrl-A" seguido de "Ctrl-C" para copiar o código para a área de transferência do Windows. Abra um novo documento do Bloco de notas e cole o código no documento. Essas etapas garantem que você tenha uma cópia de backup de seu modelo original.

Retorne ao código HTML do Tumblr e pressione "Ctrl-F" para abrir uma caixa de pesquisa. Digite "barra lateral" na caixa de pesquisa e pressione “Enter”. O Tumblr encontra a primeira ocorrência de "barra lateral" e exibe a seção do código que contém essa palavra. O código encontrado deve ser semelhante ao seguinte:

wrapper #sidebar {color: {color: Background}; }

A primeira linha do código contém as palavras #wrapper #sidebar. Um colchete esquerdo segue essas palavras.

Cole o seguinte código imediatamente abaixo da primeira linha de código:

posição: fixa; direita: 100px;

O atributo position instrui os navegadores a corrigir a barra lateral para que ela não se mova quando você rola. O atributo certo informa aos navegadores quantos pixels você gostaria que a borda direita da barra lateral se posicionasse a partir da margem direita da página da web. Neste exemplo, o atributo certo tem um valor de 100px.

Clique em "Atualizar visualização" para visualizar suas alterações. Arraste a barra de rolagem da janela para cima e para baixo e você verá que a barra lateral não se move. Clique em "Salvar" para salvar suas alterações.

Pontas

Você pode querer experimentar diferentes valores para o atributo correto se quiser ajustar a posição horizontal da barra lateral. Por exemplo, se você alterar o valor de 100px para 50px, a barra lateral se moverá mais 50 pixels para a direita.

Avisos

Tenha cuidado ao trabalhar no editor de HTML, pois alterar acidentalmente o código existente pode ter efeitos dramáticos no layout da sua página. Se você alterar o código e não conseguir descobrir como desfazer suas alterações, você sempre pode excluir tudo no editor de HTML e colar o código de backup que copiou no editor para restaurá-lo à sua condição original.