Rotacionando elementos de um blog com CSS no Blogger

Compartilhar:
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
► Postagens Relacionadas:

4 Comentários

Denis Gomez disse...

Nossa, finalmente achei oque eu queria... mas ao contrário :S

Tem como deixar ele rotacionado e voltar ao normal quando posiciona o mouse ?

8 de dezembro de 2011 às 16:15
João Neto disse...

Tem sim Denis! Basta você colocar o código que rotaciona as imagens (e outos elementos) no post-body img { com as configurações de valor de rotacionamento. Depois basta colocar o código de rotacionamento o (0deg) no post-body img: hover {
Segue exemplo abaixo:
.post-body img { padding: 6px ;background: transparent ;border: 1px solid #C8C6C6 ;-webkit-border-radius: 8px ;-moz-border-radius: 8px ;border-radius: 8px ;-webkit-transform: rotate(3deg);-moz-transform: rotate(1deg); -o-transform: rotate(2deg);}
.post-body img:hover {border: 1px solid #000;transition: all 0.3s ease ;-webkit-transition: all 0.8s ease ;-o-transition: all 0.8s ease ;-moz-transition: all 0.8s ease;-webkit-transition: all 0.8s linear;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg); -o-transform: rotate(0deg)}

8 de dezembro de 2011 às 19:46
Denis Gomez disse...

Ajudou sim João Neto!

Valeu pela ajuda .

8 de dezembro de 2011 às 23:53
João Neto disse...

Não há de que Denis! Volte sempre e abraços!

8 de dezembro de 2011 às 23:55

Postar um comentário