Como fazer um bloco de notas para seu blog

Olá pessoas aqui é a Dessa de novo querendo ensinar outro tutorial porém simples demais. E hoje eu vou mostrar a fazer um bloco de notas (isso mesmo!) para seu blog,ensinando passo-a-passo e tirando todas suas dúvidas,depois disso,você pode personalizá-lo do jeito que quiser e eu vou mostrar como fazer isso mas,para isso você terá de ler tudo com atenção no que está fazendo.
Vamos lá com o tutorial...

Mas como esse bloco de notas vai funcionar?
Para o bloco de notas funcionar,quando você for criar um post,entre na aba 'html' e digite <notepad> E aqui você coloca o conteúdo do bloco de notas </notepad>

Exemplo:
<notepad> Este é um bloco de notas (de teste) para seu blog </notepad>

Como vai aparecer?
Nota: eu digitei várias vezes...

Clique para ampliar

Mas, para aparecer deste modo, temos que aplicar uma função à ele e estilizá-lo. Para isso, utilizamos o 'CSS' e como vou adicionar um CSS à ele? Simples. Você irá abrir seu blog em modelo > editar html e clicar no campo de texto e depois procurar ( ctrl + f ) por ]]></b:skin> e acima dele,você irá colar este código aqui:

notepad {
background: #FFF;
display: block;
border: 1px solid #5e5e5e;
font-size: 14px;
font-family: arial;
overflow-y: auto;
max-height: 101px;
color: #5E5E5E;
padding: 7px;
padding-top: 3px;
margin: 10px 20px 10px 20px;
}

Agora, você pode ver que está funcionando direitinho... Vamos para a parte de personalização você pode alterar as cores de fundo do bloco de notas em 'background:#FFF' para isso, você necessitará de cores hexadecimais e trocar a cor branca (#fff).
Para mudar a cor do texto é a mesma coisa.
Você pode mudar o tamanho da font em 'font-size: tamanhodafont px;'
E alterar o tamanho máximo do 'max-height: tamanho px;' Mas, o que é tamanho máximo? por exemplo... você terá de escrever até certo ponto para aparecer a barrinha vertical, esta barrinha: