1º - Faça login no Blogger, entre em: "Layout" -> "Editar HTML".

2º - Procure (Ctrl + F):

    ]]></b:skin>

Cole o seguinte código ANTES:

    #menu-lateral ul li { display: inline; font-weight: bold; list-style-type: none; padding: 5px 5px 5px 0; margin: 0; }
    #menu-lateral li span.home { background: url('http://codigosblog.net/servidor/icones/home.gif') no-repeat; padding: 0 0 0 20px; }
    #menu-lateral li span.sobre { background: url('http://codigosblog.net/servidor/icones/about_kde.png') no-repeat; padding: 0 0 0 20px; }
    #menu-lateral li span.contato { background: url('http://codigosblog.net/servidor/icones/mail_post_to.png') no-repeat; padding: 0 0 0 20px; }

* Onde está de vermelho são as imagens do menu, caso queira troca-las, basta substituir o link pela nova imagem desejada (tamanho ideal: 16px por 16px);
* Para criar novos links para o menu copie esse código abaixo:

    #menu-lateral li span.NOVO { background: url('IMAGEM') no-repeat; padding: 0 0 0 20px; }



* Onde está de azul substitua pelo nome do novo link, em letra minuscula, exemplo:


    #menu-lateral li span.templates { background: url('http://codigosblog.net/servidor/icones/layout.png') no-repeat; padding: 0 0 0 20px; }


Simples, faça cada código para cada link do menu.
 Depois teste, se não modificou NADA no template, salve!





3º - Entre em: "Layout" -> Elementos da página".
Clique em "Adicionar um Gadget" no lugar desejado que fique o menu. Escolha adicionar um: "HTML/Java Script".


E adicione o seguinte código:


    <div id="menu-lateral">
      <ul>
      <li><span class="home"><a href="LINKAQUI">Home</a></span></li>
      <li><span class="sobre"><a href="LINKAQUI">Sobre</a></span></li>
      <li><span class="contato"><a href="LINKAQUI">Contato</a></span></li>
      </ul>
      </div>




Para ver como fico: Clik Aqui