Personalizar o gadget Arquivo do Blogger

Eu já publiquei um tutorial ensinando uma forma de personalizar o Widget Arquivo em Forma de Calendário.
Já ensinei também como incluir ícones ao lado dos links da sidebar, mas se você notar, esse links não se aplicam ao gadget de arquivo.
E esta foi a grande dúvida da @joangel1, quando ela me perguntou se era possível incluir mini ícones nos links do gadget arquivos também.
Na verdade ela queria personalizar os links deste gadget de forma diferenciada dos demais links já personalizados na sidebar. Queria saber como incluir um ícone diferente apenas no gadget arquivo.
Eu resolvi testar para descobrir como resolver essa questão.
Atendendo o pedido da @joangel1, neste tutorial vou demonstrar como incluir ícones nos links do gadget arquivos, substituir aquela setinha por um ícone e também, como incluir uma barra de rolagem no gadget, tudo na base de inserção de CSS.
Simples e fácil!

Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.

1. Incluir ícone ao lado dos links e substituir a setinha por um ícone

Entre na aba "design" >> "editar html" >> não precisa marcar a caixinha "expandir modelos de widgets, copie o código abaixo e cole-o ACIMA de ]]></b:skin>

.BlogArchive #ArchiveList a{
background: url(URL-DO-ICONE) no-repeat scroll 10px center;
font-size:14px;  /*--edite tamanho da fonte--*/
color: #000;   /*--edite cor da fonte--*/
padding:5px 3px 5px 25px;  /*--edite espaçamento se quiser--*/
text-indent:0px;
list-style-type:none;
}
.BlogArchive .zippy {
display:none;
list-style:none outside none;
}

Bom, antes que me perguntem, se você notar na imagem demonstrativa, vai perceber que, apesar de eu ter conseguido substituir a "setinha" por um ícone, por hora, não consegui encontrar uma solução para fazer com que aparecesse apenas um ícone, no Mozilla Firefox. No Chrome e no IE aparece 1 ícone, mas quando visualizado no Mozilla, aparecem 2. Entretanto, o 1º ícone está substituindo a setinha, se clicarmos em cima dele, ele se expandirá normalmente, já no Chrome e no IE, ele não se expande.
Se alguém souber como solucionar isso, por favor, me informe nos comentários.

2. Incluir barra de rolagem no gadget de arquivo

O gadget de arquivo ocupa bastante espaço na sidebar, principalmente se no seu blog existir muitas publicações. Mas também ficar sem ele não é uma boa opção, afinal, o gadget arquivo, contem algumas palavras-chaves e é muito importante, para que suas páginas apareçam nas buscas.
Para resolver esse problema de espaço, você tem a opção de configura-lo como "Menu Suspenso", mas se não quiser configurar dessa maneira, você pode incluir uma barra de rolagem e assim determinar a altura que você deseja, economizando bastante espaço na sidebar.


Entre na aba "design" >> "editar html" >> não precisa marcar a caixinha "expandir modelos de widgets, copie o código abaixo e cole-o ACIMA de ]]></b:skin>

#BlogArchive1{
border:1px solid #000;  /* ---Coloque borda se quiser ---*/
padding:5px;  /* ---edite as medidas ---*/
background-color:#FFFFFF;  /* ---Coloque a cor de fundo se quiser---*/
width:auto;   /* ---defina a largura se quiser ---*/
height: 200px; /* ---edite a altura ---*/
overflow: auto;
}

Edite as cores de acordo com seu gosto.
O comando overflow: auto; faz como que a barra de rolagem apareça automaticamente, apenas se altura do gadget arquivo ultrapassar os 200px. Se quiser, edite esse valor.

Bom, é isso! ;)