Menu em forma de gota

Vou ensinar vocês um tutorial diferente, que é um menu em forma de gota, quando passa o mouse e ele fica redondo.

Vamos lá.

Vá dem Design → Editar HTML marque a caixinha "Expandi modelo de windet"

Tecle CTRL+F ou F3 e procure por:

]]></b:skin>

Quando achar essa tag, cole esse seguinte link bem acima dela:

/ Inicio do menu /
ct {
font-family: century gothic; /* Fonte do Menu */
width: 10%; /* Tamanho do Menu */
float: left;
background:#FF82AB; /* Cor do fundo do Menu */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 11px;
-webkit-border-top-left-radius: 1px;/* Efeito das bordas */
border-radius: 11px;
border-top-left-radius: 1px;
-webkit-transition-duration: .80s; /* efeito trasition */
font-size: 10pt; /* Tamanho da fonte */
color: #000; /* Cor da fonte */
}
ct:hover {
font-family: century gothic; /* Fonte do Menu quando passa o mouse */
width: 10%; /* Tamanho do Menu quando passa o mouse */
float: left;
background:#eee; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 22px;
border-radius: 22px;
-webkit-transition-duration: .80s; /* efeito trasition */
font-size: 10pt; /* Tamanho da fonte do Menu quando passa o mouse */
font-style:bold; /* Fica em negrito quando passa o mouse */
color: #000; /* Cor da fonte do Menu quando passa o mouse */
}

/ Fim do menu /

Agora para que a paginas apareçam no blog, você deve add um gadget o HTML/JavaScript com esse código aqui.

 <a href="Link da pagina"><ct>Nome da pagina</ct></a