segunda-feira, 10 de setembro de 2012

Efeito Rover na navbar



Hey! A pedido da Isa vou mostrar como fazer esse efeito na navbar que tem aqui no CG. É bem fácil, tenho certeza que vocês vão fazer de olhos fechados!

Navbar é aquela barrinha que tem perto do banner, que você pode compartilhar no google+, mudar de blog, pesquisar no blog etc...

Partindo para o tuto, vá em modelo > editar html e procure por (com F3 ou ctrl + f) ]]></b:skin> e antes desse tag, coloque esse código:

#navbar-iframe {
opacity:0;
}

#navbar-iframe:hover {
opacity:1;
}



Visualize, e se der tudo certo, salve

Até a próxima........

Aprendi no Go Imagine

domingo, 9 de setembro de 2012

Barra de Rolagem colorida



Hey coisinhas lindas :)

Hoje vou explicar como colocar barra de rolagem colorida aqui no blog.

O que é barra de rolagem? - É aquela barrinha ali no canto que você usa para rolar a página ---->
Você sabia que dá para deixar ela da cor que você quiser e como você quiser? Gostou? Bora conferir o tuto!

1º - Vá em Modelo > Editar html > aperte F3 ou ctrl + f e procure por ]]></b:skin>. Acima desse tag, cole o código abaixo

::-webkit-scrollbar-thumb:vertical {
background: #FF69B4;
height:50px;
border: 2px solid #FFFFFF;
box-shadow: 2px 2px 4px #bebdbd;
-moz-box-shadow: 2px 2px 4px #bebdbd;
-webkit-box-shadow: 2px 2px 4px #bebdbd;
-khtml-box-shadow: 2px 2px 4px #beFbdbd;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#f26d92; height:10px;
border: 1px dashed #fff;
-webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px; background: url(URL DO BACKGROUND FIXO) repeat;
box-shadow: -3px -2px 10px #bebdbd;
-moz-box-shadow: -3px -2px 10px #bebdbd;
-webkit-box-shadow: -3px -2px 10px #bebdbd;
-khtml-box-shadow: -3px -2px 10px #bebdbd;}
}

No primeiro trecho destacado, é a cor da barra de rolagem. Esse código é o código da cor em html. Para ver uma tabela com os códigos e as cores, clique aqui

No segundo trecho destacado, você coloca o url (ou link) do seu background.

Visualize, e se estiver tudo certo, salve. Se não deu certo, vê se não fez algo errado.

Muito fácil, não? E dá um toque bem legal.....

Aprendi no.... Jackie Dream


Como Colocar Voltar ao Topo com Efeito



Oi pessoas! Tudo ótimo? Sabe que dia é hoje? Dia de colocar ao topo no blog! Sim, vou postar muitos e muitos tutos! muito muito muito tuto, muito muito muito tuto, muito muito muito tuto........... China in tuto! kk

Ok, vamos parar com graçinha e começar o tutorial.

Trouxe para vocês um dos melhores códigos de voltar ao topo. O melhor dele é que já vem tudo junto: O topo com mais 2 efeitos.

1º - O efeito deslizante deixa o blog lindo! Quando você aperta na imagem, em vez de ele ir direto ao banner, ele vai deslizando pelo blog, mostrando as postagens rapidamente. Para testar, é só clicar no voltar ao topo do CG

2º - Nesse código também temos um efeito bem legal também, que faz com que o topo não apareça "em cima", ou seja, no banner. Acho que esse efeito ajuda o blog ficar menos "pesado", ficar "mais clean"

Para colocar, parece mais difícil do que é. Como o código é simplesmente enorme, eu vou colocar um link com ele. Pegue o código aqui

Então, vá em layout > Adicionar gadget > Html/java script e cole o código.
Onde estiver escrito "Coloque aqui o url da sua imagem" Você coloca o link da imagem que você quer que apareça. (Aprendemos como hospedar imagens no ultimo post ;D)

Aqui tem algumas setas bem cutes, a maioria em estilo kawii, uma fofura!

Aprendi no.... Cherry Bomb

Até a próxima....



sábado, 8 de setembro de 2012

Como Hospedar Imagens


Olá! Mais um post hoje!
Bom, estava se perguntando " Que tuto fazer?" Então me toquei que tinha um tuto que a gente tinha que saber para saber a maioria dos outros.

  • Como hospedar imagens e o que é hospedar uma imagem?
Bom, vamos lá

O que é hospedar uma imagem?
Em códigos de html e css você não pode fazer " Upload de uma imagem". Então, como fazer? Você tem que criar um link para a imagem. É como você colocasse um endereço que aparece uma imagem. Acho que vocês entenderam, não?

Como hospeda-las?
Existem sites específicos para hospedar imagens. Um que eu vi várias pessoas comentarem que acham bom é o Image Shack, porém eu uso o serviço do blogger mesmo.

Bom, vamos ao tuto, vou ensinar a forma com o serviço do blogger mesmo

Primeiro você tem que ter um blog de testes, ok?

1º passo: Faça um post com a sua imagem

2º passo: Vá no blog e clique no botão direito > Abrir link em nova guia


3º passo: Logo após de você ter clicado, uma nova guia vai aparecer com a sua imagem, e onde se coloca a url, o link da sua imagem. Prontinho, agora você já tem a imagem hospedada e o seu link, para usar em qualquer código!

Gostaram? Essa eu acho que todo mundo já sabia, mas vale a pena fazer o tuto, vai que alguém não sabe, né?

Beijinhos e até o próximo tuto!












Olá para vocês!


Eii, você! Isso mesmo, você que está lendo esse texto! Bom, queria avisar que hoje (não sabe que dia é hoje? vê na data do post,to com preguiça de escrever xD) o Coruja de Glitter, ou seja, o blog que você está agora, foi criado! Bom, você deve estar se perguntando quem sou eu... Er... Sou só um texto...
Brincadeirinha! Me chamo Bia (Ok, se vocês quiserem, podem me chamar de Biriba), tenho 10 invernos e sou muito tímida. Olha, não sou muito boa em apresentações, e também não quero fazer um texto longo e chato sobre mim, tenho certeza que ninguém vai ler.

Bom, então foi isso. Comentem com tutoriais que vocês querem!