Rotacionando elementos de um blog com CSS no Blogger

Hoje vamos aprender algo bem legal e divertida! Vamos aprender a rotacionar alguns elementos dentro do seu blog, você pode “rodar” o rodapé, sidebar, jump link, ou qualquer outro objeto. A rotação só é possível se tive auxílio do CSS. A rotação é muito simples, qualquer um consegue “fazer” essa rotação. Vamos começar?

1. Acessando a guia Modelo, clique no botão Fazer backup/Restaurar e faça uma cópia do seu template clicando no link “Fazer download do modelo completo”.

2. Logo após, volte para a guia Modelo e clique o botão Editar HTML. Pressione Ctrl+F e procure pelo elemento desejado. No meu caso, utilizarei o elemento “blog-pager” e as imagens do blog no estilo “hover”. Veja como instalar a rotação no passo 1 e 2 logo abaixo.

Passo 1: Rotação no "blog-pager" do blog

Para podermos adicionar a rotação ao “blog-pager”, deveremos achar o código referente a ele. Veja o exemplo:

#blog-pager {padding: 15px;

font-size: 120%;

}

No código acima, ele não está rotacionado. O que deveremos fazer para rotacionar o “blog-pager” é adicionar o seguinte código logo abaixo da parte destacada de vermelho.

-webkit-transform: rotate(4deg);

-moz-transform: rotate(4deg);

-o-transform: rotate(4deg); 

Substitua as partes destacadas de azul pelo valor da rotação. O seu código deverá ficar como o abaixo:

Lembrando que você pode utilizar qualquer elemento do seu blog, até mesmo todo o blog pode “girar”.

Passo 2: Rotação em imagens no efeito "hover" e "transition"

Agora é hora de resta bastante atenção, pois este passo é muito difícil. Nos juntaremos dois efeitos para resultar em um só. Seguimos o tutorial.

Procure pelo código referente às imagens do blog. Caso você não saiba qual é esse código veja o exemplo abaixo:

.post-body img { padding: 6px ;background: transparent ;-webkit-transition: all 0.8s linear ;border: 1px solid #C8C6C6 ;-webkit-border-radius: 8px ;-moz-border-radius: 8px ;border-radius: 8px ;transition: all 0.3s ease ;-webkit-transition: all 0.8s ease ;-o-transition: all 0.8s ease ;-moz-transition: all 0.8s ease;}
.post-body img:hover {border: 1px solid #333;}

Atenção: O código que estou utilizando está personalizado como ensinei em uma outra postagem. O efeito "hover" e o "transition" não veio junto com o template, eu que o instalei.

Após ter encontrado o código e o efeito “hover” estiver junto com ele, adicione o código a seguir logo abaixo de post-body img:hover {.

-webkit-transform: rotate(4deg);-moz-transform: rotate(4deg);-o-transform: rotate(4deg); 

Lembre-se de alterar os valores da rotação de acordo com o seu gosto.

3. Após escolher entre o passo 1 e o 2 instale em seu template e clique em Visualizar para ver se o código funcionou. Depois clique em Salvar modelo.

Este tutorial é muito difícil, por isso deve-se prestar bastante atenção antes de instalar o mesmo em seu template. Se tudo der errado, utilize a cópia do template que baixou para fazer o backup do seu template. Visualize este blog detestes para ver como irá ficar seu blog após a instalação. Boa sorte – pois vai precisar - e abraços!

Alguns códigos por: Códigos Blogger