Barra de Rolagem (imagem / cor)

.eu vou postar  como deixar  a barra de rolagem colorida e como  usar background ao invés de cor 
Vá em design > Editar HTML > Aperte Ctrl+F e procure por ]]></b:skin>
Cole o código acima de ]]></b:skin>

/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:50px;

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:10px;

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

 }
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra de rolagem*/
 background: #000000; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
}

 Se quiser colocar background ao invés de cor substitua background: #000;  por background: url(URL DA IMAGEM);

Se quiser a barra móvel mais quadrada apague ou diminua os px de:
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

 Personalize do jeito que quiser :)

Fundo dos link's "piscando"

Fundo do link piscando: Não se confunda com o efeito Rainbow !

Esse efeito é a cor de fundo dos links.. (ao passar o mouse) : 

é super simples e achei o efeito legal    ah tu pode escolher se esse efeito aparece só nos posts ou só na sidebar..ou nos dois 

continue lendo e saiba como usar

Vá em design > Editar HTML > aperte Ctrl F e procure por: ]]></b:skin>
Achou?! certo
agora cole acima dele o código:

.post a:hover {background: url('URL DA IMAGEM');color: #BCAFE0;}

Saiba que o que esta em:

rosa: Se refere que esse efeito apareça somente na área dos posts.
preto: Se refere que esse efeito só aparece ao passar o mouse no link.
verde: Esse é o Endereço da Imagem.
vermelho: É a cor da Fonte.

Obs: se você quiser usar esse efeito na sidebar, basta substituir onde diz .post por sidebar
e se quiser usar esse efeito no post e sidebar basta colar o código dos dois:

.sidebar a:hover {background: url('url do gif');color: #BCAFE0;}

.post a:hover {background: url('url do gif');color: #BCAFE0;}

Créditos: (♥)http://kakajupiter.blogspot.com.br

Colocar assinatura no blog

como por assinatura com imagem no fim do post.

 Exemplo:

Bom vamos começar do começo hehe 



Vá em Design // Editar HTML

Marque a opção Expandir modelos

Aperte Ctrl f e procure o código:

<data:post.body/>

Quando achar é só colar abaixo dele:

<center><img src="URL DA IMAGEM"/></center> 

Não retire as aspas

Site para hospedar imagens Tinypic.com 

Obs: Se não quiser deixar a assinatura centralizada, é só trocar onde diz <center>
por:

<left> Esquerda

<right> Direita

Visualize se tiver tudo certinho Salve.

CRÉDITO: http://kakajupiter.blogspot.com.br

Enfeitar link: Linha ondulada

coloque isso no link que deseja 'enfeitar' sempre dentro das chaves { }

   text-decoration: underline;
   color:#f22;
  -moz-text-decoration-color: #000;
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: dashed;

No exemplo acima onde diz: underline pode ser substituido por:

    text-decoration: none → retira o sublinhado;
    text-decoration: underline → coloca sublinhado;
    text-decoration: overline → coloca a linha no topo do texto;
    text-decoration: underline overline →  linha no topo e em baixo do link;
    text-decoration: line-through → coloca a linha no meio do texto.


Exemplos de style, onde diz: dashed no exemplo acima, pode-se usar:

-moz-text-decoration-style: dashed     
-moz-text-decoration-style: dotted 
-moz-text-decoration-style: solid    
-moz-text-decoration-style: double    
-moz-text-decoration-style: wavy  olha que lindinha *-*

Onde diz: color:#f22; é a cor do texto/link
Onde diz: -moz-text-decoration-color: #000; é a cor da linha

Extras:

text-decoration:blink;  → O texto pisca.
letter-spacing:3px;  → espaço entre as letras
line-height:2;  → altura entre linhas

Se eu  ajudei, e vocês usarem.. gostaria de receber os créditos ^^

 Crédito:http://kakajupiter.blogspot.com.br

Gadgets diferentes

tutorial de como deixar a sidebar , com cada gadget diferente do outro, vou dar o código e o resto é com vocês ^-^ vocês vão ver que é a coisa mais fácil do mundo, sério muitos devem pensar que devem ser aqueles tutoriais com códigos gigantes, mas não é não :)

 Vocês perceberam que cada gadget é diferente, pode-se usar formas, cores e backgrounds..

Vá em design ~ Editar HTML ~ Marque a opção  Expandir modelos

Aperte Ctrl F e procure por o nome do gadget que deseja personalizar, veja a imagem:
No caso eu quero personalizar o meu gadget welcome..apertei Ctrl f e procurei por welcome

Identifique o numero do widget id..que no meu caso o meu gadget welcome era HTML4 e faça o seguinte:

Procure por ]]></b:skin>

e acima dele cole:

#HTML4 { código da personalização  }

dentro da chave você coloca o que quiser, por exemplo:

#HTML4 {

border: solid 1px #000; Se você quiser borda no widget

background: url(URL DO BG AQUI) repeat; Se quiser background de fundo no widget

background: #000; Se quiser apenas cor de fundo no widget

box-shadow: inset 0 0 15px #ccc, 0 0 3px #aaa; Se quiser sombra no widget

border-radius:10px; Se quiser arredondar

}

É super fácil, não tem mistério, agora é só usar o mesmo processo em todos gadgets que queira personalizar, procure pelo nome identifique o id e personalize ^-^

Obs: Para personalizar o gadget de seguidores o código usado é:  #Followers1 { personalização}

Crédito do blog da Karine Júpiter

http://kakajupiter.blogspot.com.br/