Paginação em menu hover

Hoje estava dando uma olhadinha nos meus antigos layouts, é engraçado ver como de um layout para outro a uma grande mudança não só profissionalmente mais em personalidade. Na vida passamos por várias fases e hoje vejo claramente como. Então trago um código simples e bem conhecido de um dos meus antigos layouts. Como fazer paginação em menu com efeito hover. Vocês podem arrumar como desejarem, os créditos vão para minha querida e amiga Roh.

Resultado

1. Abra o HTML ative a pesquisa (Ctrl+F). Procure por ]]></b:skin>, acima dele cole:

Códigos

#blog-pager {
clear:both;
text-align: center;
margin:0px auto;
padding-top:4px;
padding-bottom:5px;
padding-right:7px;
padding-left:7px;
}
#blog-pager a:link, #blog-pager a:visited{
color: #fff;
text-shadow: 1px 1px 1px #;
font-family:silkscreen;
font-size:8px;
padding-top:4px;
padding-bottom:5px;
padding-right:7px;
padding-left:7px;
background:#D0DAC7;border: solid 1px #C0CBB7;
box-shadow: inset 0 0 20px #D6E1CD;, 0 0 4px #ccc;
border-radius: 2px; /* Bordas arredondadas normais */
-moz-transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
-o-transiotion: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#blog-pager a:hover{
color: #E8ACBA;
text-shadow: 1px 1px 1px #;
font-family:silkscreen;
font-size:8px;
padding-top:4px;
padding-bottom:5px;
padding-right:7px;
padding-left:7px;
background:#F9E6EB;border: solid 1px #ecc1cb;
box-shadow: inset 0 0 20px #ecc1cb, 0 0 4px #ccc;
border-radius: 2px; /* Bordas arredondas ao passar o mouse */
-moz-transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
-o-transiotion: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}

É isso! Agora é só deixar bunitim ao seu gosto.