Gadgets no topo pela html

Resultado de imagem para capas para twitter
Olá, gente! Que frio é esse? Em São Paulo, ao invés de fazer calor, está mais frio que o comum. Confesso que estou bastante chateada por isso, mas sei que o frio tem os seus lados positivos. Enfim, tirando essa questão de clima, estou muito feliz em voltar a postar aqui, entretanto muito triste por ver que alguns blogs acabaram. Em suma, é importante dizer que irei abordar os mesmos assuntos de sempre, porém com mais postagens por semana. Então, hoje trouxe um tutorial muito bacana e fácil de encontrar em qualquer site de tutoriais, mas difícil de achar um que dê certo. Juro que fiquei horas procurando um código que funcionasse e ficasse igual em todos os dispositivos, mas nenhum pegava. Fiquei mexendo na html do blog e acabei dando meus jeitos e  para minha surpresa pegou. 

1 Entre no HTML do seu blog (Modelo> editar HTML)
2 Dentro do quadro (Lembre-se, antes de dar ctrl+f certifique-se que clicou realmente dentro do quadro, caso clique fora não vai achar a código)aperte Ctrl+f e procure por ]]></b:skin> 
3 Acima de ]]></bskin> adicione o seguinte código:
.nome {
float: left;
margin-left: -0px;
margin-right: 0px;
margin-top: -0px;
margin-bottom: 0px;
}
Irá ficar desta forma:

Explicando código:
Nome: É responsável pelo nome da sua Gadgets. Não é preciso colocar o nome exato, no meu caso eu usei um de minha preferencia, ai vai da cada um de vocês. É importante lembrar o nome para usar depois. 
Margin-left: Responsavel pelo quanto vai para esquerda
Margin-Right: Responsavel pelo tanto que vai para direita
Margin-top: Responsavel pelo o quanto vai para cima (topo)

Aplicando código:
Quando acabar os passos acima vá até Layout> Adicionar Gadget> HTML/java script (não coloque titulo na gadget)> (Agora é a hora de lembra o nome que você colocou) e adicione o seguinte código:
<div class="NOME">SEU CÓDIGO AQUI</div>

Pronto, agora é só salvar e ajustar o necessário na HTML. Em caso de dúvidas estou a disposição.