Reino Kawaii

 

Vamos lá!

1. A primeira coisa a ser feita é personalizar uma imagem; eu usei o pássaro do twitter deste pacote aqui, que tem mais modelinhos de passarinho, e o Photoscape, que tem muitos modelinhos de balões fofos. Se quiserem, podem usar a imagem que uso:

 

2. Agora, acesse seu template na área de edição de HTML e procure por ]]></b:skin>; quando encontrar, adicione ACIMA o código:

#twitter_div {
text-align : left;
display : block;
width : 277px;
height : 205px;
background-image : url(URL DA IMAGEM);
background-repeat : no-repeat;
background-position : 0% 0%;
font : normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
line-height : 1.4em;
color : #624e5b;
}

#twitter_update_list {
margin : 0;
padding : 20px 20px 5px 20px!important;
list-style-type : none;
text-indent : 0;
line-height : 1.4em;
}

#twitter_update_list li {
margin : 3px 0!important;
padding : 5px!important;
}
a#twitter-link {
float : right!important;
text-align:right!important;
padding : 0 25px;
}
#twitter_div a, #twitter_div a:visited {
color : #ff5f9d;
}
#twitter_div a:hover, #twitter_div a:active, #twitter_div a:focus {
color : #624e5b !important ;
}

As áreas destacadas são as principais para editar. Em text-align : left, defina a posição do texto para esquerda ou direita (right); width e height se referem ao tamanho da imagem (largura e altura); background-image é onde se adiciona uma imagem de fundo; em font você escolhe o tipo, tamanho e estilo; e color se refere as cores do texto e dos links.

3.Agora procure por </body> e adicione ACIMA estes scripts:

<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='https://api.twitter.com/1/statuses/user_timeline/TWITTER_ID.json?callback=twitterCallback2&amp;count=1' type='text/javascript'/>

Onde está escrito Twitter_ID, substitua pelo seu nome de usuário do twitter sem o @. Visualize seu template e se tudo estiver certo salve. Mas você ainda não vai ver o resultado do tutorial ok?

4. Se deu tudo certo, vá até seu Layout, em Elementos da Página e adicione um novo gadget Html/JavaScript com este código aqui:

<div id='twitter_div'><ul id='twitter_update_list'></ul><a href='http://twitter.com/TWITTER_ID' id='twitter-link' title='follow me!'>follow me!</a></div>

Novamente troque Twitter_ID pelo seu nome de usuário sem o @; onde está escrito follow me! você pode alterar pelo texto que quiser. Salve o novo gadget e visualize seu template. O resultado será algo como:
É isso; simples neh ^ ^
Beijus<3