Bem, hoje trouxe uma novidade para vcs!! Acabo de criar um twitter para o blog e para mim; lá são postadas as novidades das redes sociais da qual faço parte, no caso, as que mais tempo eu fico online rsrsrs...também vou twittar coisas pessoais e prévias do que está por vir no Reino Kawaii; assim eu fico mais perto de vcs! Ainda não tenho muitos seguidores ;___; Espero que este número mude. Conto com vcs ;3Agora vamos ao post.
Vocês já acessaram meu Tumblr recentemente? Se sim, perceberam que ele está de layout novo. (Se não, ali na sidebar, na minha descrição, tem o link).
O resultado foi que agora posso postar mais tutoriais para Tumblr também; de vez em quando me perguntam se os tutoriais que posto aqui no Reino Kawaii podem ser usados no Tumblr e agora posso afirmar com certeza que alguns deles podem sim!!! Eu ia postar mais e ia ser mais cedo (vejam ali na sidebar que eu disse no twitter que postaria os tutoriais há umas 5 horas atrás, porém, só tive como agora por causa de um trabalho que estava fazendo.
Vou mostrar como fazer alguns, como os de opacidade nas imagens (que é novo!), usar cursor e favicon diferente, colocar os corações que seguem o cursor e imagem de volta ao topo; eles serão postados em inglês no Cotton Candy depois. E é no Cotton Candy que vc poderá visualizar o resultado.
Vamos lá! Acesse em seu tumblr a área de customização do tema (Customize Theme - Edit HTML)
1. Opacidade nas imagens
Dá um efeito suave às imagens.
Para Tumblr: Adicione este código antes de body{
img{
-webkit-transition: opacity 0.30s linear;
opacity: .80;
}
img:hover{
-webkit-transition: opacity 0.30s linear;
opacity: 1;
}
Para Blogger: O efeito será aplicado a todas as imagens do blog, exceto as que estão no HTML dele. Vá em Layout, Elementos da página, Adicionar gadget, HtmlJavaScript, e cole este código:
<style type="text/css">
img{
-webkit-transition: opacity 0.30s linear;
opacity: .80;
}
img:hover{
-webkit-transition: opacity 0.30s linear;
opacity: 1;
}
</style type="text/css">
Gostou deste tutorial para Blogger? Então vc pode usá-lo no Tumblr (veja no meu tumblr para ver como fica).
O tutorial em português está no final dessa postagem:
3.Como adicionar cursor personalizado ao Tumblr
Quer um cursor diferente no seu Tumblr?
Primeiro escolha uma imagem que goste, hospede em algum site como o Photobucket por exemplo.
Primeiro escolha uma imagem que goste, hospede em algum site como o Photobucket por exemplo.
Depois adicione o endereço da imagem nos códigos:
Código 1:
Código 1:
Este código permite que apareçam duas imagens diferentes no cursor, uma para todo o site, e outra para quando o cursor estiver em cima de um link, como o cursor do Reino Kawaii que se transforma em uma mãozinha quando vc clica nos links:
<style type="text/css">
HTML,BODY{cursor: url("URL DA SUA IMAGEM PARA O SITE"), url("URL DA SUA IMAGEM PARA O SITE"), auto;} A:hover{cursor: url(";URL DA SUA IMAGEM QUANDO ESTIVER EM UM LINK"), url("URL DA SUA IMAGEM QUANDO ESTIVER EM UM LINK"), auto;}
</style>
Código 2:
<style type="text/css">body {cursor:url("URL DA SUA IMAGEM"),default}</style>
Ambos os códigos devem ser adicionados acima de </body>
4.Imagem com link no cantinho do site
Esse tutorial é ideal para adicionar imagens que voltem para o topo do site ou para o início dele.
Acima de </body> adicione o código:
Se vc quiser adicionar um link, basta substituir no local indicado; se não, deixe apenas o #, e quando alguém clicar voltará ao topo do Tumblr. E alt='up', substitua a palavra up pelo título que preferir, tipo 'subir' ou 'topo'. Se quiser colocar a imagem a esquerda, substitua right por left.
Tutorial para Blogger: http://reinokawaii.blogspot.com/2011/05/tutorial-colocando-uma-imagem-no.html
Favicon é o nome dado à imagem que aparece junto ao endereço de um site. Para adicionar um favicon ao Tumblr procure pela área que diz link rel="shortcut icon" href=... e substitua por:
Vocês podem usar alguns mini gifs que postei na tag gifs.
Para Blogger:http://reinokawaii.blogspot.com/2011/05/mini-gifs-e-favicons.html ou vc pode ir em Layout, Elementos da Página e adicionar a imagem no gadget Favicon do Blogger, respeitando o tamanho da imagem "Utilize uma imagem quadrada que tenha menos de 100 KB.
Bem, por enquanto é só, mas em breve trago mais tutoriais ok? Beijus<3
Acima de </body> adicione o código:
<a href='#AQUI VC COLOCA O LINK OU NÃO SE NÃO QUISER'><img alt='up' border='0' src='URL DA IMAGEM' style='position:fixed; bottom:0; right:0;'/></a>
Se vc quiser adicionar um link, basta substituir no local indicado; se não, deixe apenas o #, e quando alguém clicar voltará ao topo do Tumblr. E alt='up', substitua a palavra up pelo título que preferir, tipo 'subir' ou 'topo'. Se quiser colocar a imagem a esquerda, substitua right por left.
Tutorial para Blogger: http://reinokawaii.blogspot.com/2011/05/tutorial-colocando-uma-imagem-no.html
5. Adicionar Favicon ao Tumblr
Favicon é o nome dado à imagem que aparece junto ao endereço de um site. Para adicionar um favicon ao Tumblr procure pela área que diz link rel="shortcut icon" href=... e substitua por:
<link rel="shortcut icon" href="URL DA IMAGEM">
Vocês podem usar alguns mini gifs que postei na tag gifs.
Para Blogger:http://reinokawaii.blogspot.com/2011/05/mini-gifs-e-favicons.html ou vc pode ir em Layout, Elementos da Página e adicionar a imagem no gadget Favicon do Blogger, respeitando o tamanho da imagem "Utilize uma imagem quadrada que tenha menos de 100 KB.
Bem, por enquanto é só, mas em breve trago mais tutoriais ok? Beijus<3
Ótimos tutorias! *-*
ResponderExcluirVou passar aqui para pegar umas dicas quando eu for fazer o próximo layout! ^^
Beijoos
~ ♥ ~
harajukucriativa.blogspot.com
Perfeito,vou tentar aplicar essas dicas no meu tumblr e no meu twitter ^^
ResponderExcluirApaixonei nesse layout, tá cada vez mais kawaii aqui =(^.^)=
http://out-of-orbit.blogspot.com/
Adorei todos os tutorias! Apliquei o "efeito opacidade na imagem" no meu Blog e ficou bem legal! Parabéns por esse Blog perfeito que você tem. ^^
ResponderExcluirhttp://anonlypossibility.blogspot.com.br/
Muito obrigada e bem-vinda! Fico feliz com sua presença♡(>^ω^<)bjus.
ExcluirAmeiiiiiiiiiiiii!
ResponderExcluir