Reino Kawaii

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

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


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