In Tutoriais

5 Mini Tutoriais Rápidos, Fáceis e Básicos

 
Olá! Desejo que estejam super bem! Hoje é domingo (pé de cachimbo ¬¬), dia ótimo para descansar e aproveitar para dar uma organizadinha no blog; só que tem coisas que levam tempo quando se trata de adicionar recursos em nosso querido bloguinho, e aí não dá para relaxar. Pensando nisso, trouxe 5 mini tutoriais super simples, mas que ajudam bastante a manter tudo arrumadinho sem ficar horas no PC. São eles:
1. Como mudar cor da seleção do texto;
2. Como personalizar a scrollbar;
3. Como adicionar efeito fade nos links;
4. Redimensionar automaticamente imagens;
5. E acelerar o carregamento do blog.
Todos encontrados pelos vários links listados na página F.A.Q. Antes de começar seria legal que você tivesse com uma tabela de cores para pegar os códigos delas.
1. Mudando a cor de seleção dos textos:

Só colar este código na área de CSS ou acima de ]]></b:skin>:
 *::-moz-selection {
background: #CÓDIGO DA COR DO PLANO DE FUNDO !important;
color: #CÓDIGO DA COR DO TEXTO SELECIONADO !important;
}
*::selection {
background: #CÓDIGO DA COR DO PLANO DE FUNDO !important;
color: #CÓDIGO DA COR DO TEXTO SELECIONADO !important;
} 

2. Personalizando a Scrollbar (barra de rolagem):
Esse funciona no Chrome e deixa todas as barras de rolagem do blog personalizadas. Cole o código na área de CSS ou acima de ]]></b:skin>:
 ::-webkit-scrollbar {
width:10px;/**largura**/
height:auto;
background:#fff;/**cor de fundo**/
height:5px;/**altura**/
}
::-webkit-scrollbar-thumb{
background: #CC99FF;/**Cor da barra**/
border-radius:5px;/**arredondar**/
height:5px;/**altura**/
} 

Se quiser colocar uma imagem no lugar da cor, mude background:#fff; e background:#CC99FF; para background-image: url(URL DA IMAGEM);

3. Efeito fade nos links:
Esse efeito faz com que os links, quando selecionados, mudem de cor suavemente. Para isso encontre essas duas áreas:
 
A área número 1 deve ser substituída por:

 a:link {
color: #COR;     
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
a:visited {
color: #COR;   
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #COR;    
text-decoration:underline;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
border-bottom: 1px dotted #FF33FF;    
} 

Se em seu template aparecer a área número 2, apague o que foi mostrado na imagem para que o efeito seja aplicado aos links da sidebar.

4.Imagens do tamanho certo do post:
 
Esse código faz com que as imagens fiquem exatamente do tamanho da área de postagem, mesmo quando inseridas em tamanho original, como no exemplo acima, em que coloquei um wallpaper em seu tamanho real na postagem e ele chegou até a sidebar, porém, usando o código, a mesma imagem em tamanho real não ultrapassou a área de posts.
Acima de ]]></b:skin> adicione isso:
 
 .post a img, .post img {
  max-width: 450px;/**Troque o número pelo tamanho exato ou aproximado da sua área de postagem**/
  margin: 0 auto;
} 

5. Carregando o blog mais rápido com Lazy Load:
Lazy Load é um script recomendado para quem usa muitas imagens. Ele fará com que seu blog carregue mais rápido já que vai carregando imagens a medida que for necessário, digamos assim, porque elas vão aparecendo conforme você navega. Para usar, cole isso acima de </head>:
<script src='http://db.tt/YiV6Emfb' type='text/javascript'/>

ATUALIZAÇÃO 26 de março de 2013

Gente, havia esquecido de mencionar que para que o Lazy Load funcione direitinho é preciso adicionar também acima de </head> o script Jquery; essa é a versão mais recente que tenho dele:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Se você já usa alguma versão do Jquery, não precisa adicionar; se for uma versão anterior a 1.8.2, pode trocar por essa ok?


Prontinho! E ainda dá tempo de fazer alguma coisa neh ^-^ Tá esperando o quê então? Te vejo amanhã ok?
Beijinhus...

Related Articles

13 comentários:

  1. Realmente, super bacanas e rápidos os tutoriais. Gostei principalmente do Lazy Load =)

    ResponderExcluir
  2. Ahhhhhhh adorei Robertinha!!! simples e prático bjinhos .

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado também Licia ^^ Muito obrigada!!!
      E Chibi-san, obrigada pelo selinho; em breve vou buscar para postar aqui :3
      Beijus a todas!!

      Excluir
  3. selinho no blog pra você http://girldancerock.blogspot.com.br/

    ResponderExcluir
  4. Simples, porém fazem uma diferença!! Muito fofos mesmo, deixa o blog com um ar mais profissa, ou sei lá hehehe

    http://isabelaasuka.blogspot.com.br/

    ResponderExcluir
  5. Muito bons e úteis. Adorei o da barra de rolagem.. estava procurando á tempos um tutorial assim. Obrigado ♥

    ResponderExcluir
  6. Tô super contente por vocês gostarem meninas ^^
    Beijinhus e muito obrigada!!!

    ResponderExcluir
  7. Ohayo...

    roberta-chan. .

    em primeiro lugar. . .
    eu adorei tutorial...

    estava procurando um que arruma-se a imagem do post
    em segundo tem um meme para roberta-chan no meu blog

    lovehinainfinity.blogspot.com.br/2012/11/meme-das-11-coisas.html
    não sei se já tinha dito > u <'

    queria falar com vc posso?

    bom....
    na área de comentar do blog do layout kawaii
    não dá pra responder os comentários..
    eu clico em responder e não acontece nada x ~ x'
    eu já tentei arrumar mais não deu
    poderia me ajudar ?

    kokoro ni kisu

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado ^^ E obrigada pelo meme; assim que puder faço uma postagem com ele ok?
      Você se refere àquele layout com menu acima do cabeçalho que fiz? Se for, ele não possui a opção de responder comentários porque foi feito antes do Blogger ter ativado esta opção nos templates, foi o primeiro que fiz ^.^
      Mas há como adicionar esta função. Tem um artigo do site Mundo Blogger chamado "Ativar opção Responder Comentário padrão do Blogger" que mostra as alterações que se deve fazer no HTML de templates para usar o novo sistema de comentários ok?
      Beijinhus e muito obrigada.

      Excluir
  8. olá não consegui que o efeito Lazy Load funcione no meu blog , porque será? gostaria muito de ter esse efeito , pode me ajudar?

    ResponderExcluir
    Respostas
    1. Olá ^^ Você usa Jquery? Acho que não citei no post neh, mas o Lazy Load funciona com Jquery, vou atualizar a postagem.
      Obrigada por comentar e beijus ;3

      Excluir
  9. Nossa adorei fazia muito tempo que eu tava cassando Como mudar cor da seleção do texto , e só achei aqui adorei .. obrigada

    ResponderExcluir

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