In Outros Tutoriais

Tutoriais para Tumblr e Blogger+Twitter!!!

Olá!

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 ;3
Agora 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).
Editei um dos temas disponíveis do Tumblr, muito completo por sinal, e aprendi muita coisa!
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">

2.Corações seguindo o ponteiro do mouse

Eu havia postado isso aqui:
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.
Veja alguns cursores prontos ou para editar clicando aqui, aqui e aqui.
Depois adicione o endereço da imagem nos códigos:

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:
<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

Related Articles

5 comentários:

  1. Ótimos tutorias! *-*
    Vou passar aqui para pegar umas dicas quando eu for fazer o próximo layout! ^^
    Beijoos
    ~ ♥ ~

    harajukucriativa.blogspot.com

    ResponderExcluir
  2. Perfeito,vou tentar aplicar essas dicas no meu tumblr e no meu twitter ^^
    Apaixonei nesse layout, tá cada vez mais kawaii aqui =(^.^)=

    http://out-of-orbit.blogspot.com/

    ResponderExcluir
  3. 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. ^^

    http://anonlypossibility.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Muito obrigada e bem-vinda! Fico feliz com sua presença♡(>^ω^<)bjus.

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart