Menu fixo responsivo com caixa de pesquisa

A navegação em um blog é uma coisa muito importante, ter um menu que se adapte aos mais variados tipos de tela é, sem dúvida, algo crucial. Um menu fixo, que é responsivo e que apresenta uma caixa de pesquisa é um diferencial que vai agradar a todos os seus leitores, pois torna a navegação em seu site/blog mais simples e ágil.

Aprenda a como fazer o menu continuando a ler a postagem!

Personalizar o Tooltip

O tooltip da maioria dos sistemas operacionais não tem uma das melhores aparências, por isso, personalizá-lo é algo importante caso você queira deixar o seu blog com um toque mais profissional. Caso você não saiba o que é um tooltip, passe o mouse aqui!

1 Vá em Tema > Editar HTML > Clique na caixa de códigos e aperte Ctrl + F ou F3 > Procure por <head> > Cole abaixo o seguinte código:
2 Ainda na caixa de códigos, procure por ]]></b:skin> > Cole acima o seguinte código:
#s-m-t-tooltip { background: #CCC; /*--- Cor do fundo ---*/ border: 1px solid #333; /*--- Cor da borda ---*/ color: #FFF; /*--- Cor da letra ---*/ padding: 5px; /*--- Margem interna ---*/ -webkit-animation: CH 600ms; margin: 20px 20px 20px 8px; z-index: 99999999999999999; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; }
3 Faça as alterações necessárias.

3 Salve.

Menu Obli


Aprenda a como fazer o menu continuando a ler a postagem!

Máscara em imagens pelo CSS

Para aprender a fazer o efeito, continue a ler a postagem!

Seta para subir ao topo do blog com efeito suave

A navegação dentro do blog é algo fundamental para conseguir manter seus leitores no blog. Muitas vezes, algumas páginas ou até mesmo postagens acabam ficando muito grandes, e muitas vezes voltar ao topo do blog se torna algo cansativo, mesmo sendo uma ação simples. Um botão para voltar ao início do blog é algo que pode facilitar a vida de todos os leitores do seu blog, aprenda a como colocá-lo neste tutorial!

1 Vá em Tema > Editar HTML > Clique na caixa de códigos e aperte Ctrl + F ou F3 > Procure por </body> > Cole o código a seguir acima:

2 Onde está escrito LINK_DA_SETA você substitui pelo link da imagem de subir ao topo que você preferir.

3 Salve.