Tutorial: Adicionar PageNavi no Blogger

Todo mundo conhece a PageNavi nê? São os número das páginas... Além de deixar seu design melhor também ajuda na fácil navegação do site. Portanto venho postar esse tutorial a vocês blogeiros...

Adicione o código abaixo acime de ]]><*/b:skin*> [TIRA O *]

/* Navegaçao
----------------------------------------------- */
.showpage a{
text-decoration:none;
color:#fff;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
background-color:#09F;
margin:2px;
padding:4px 5px
}
.showpage a:hover{padding:6px 8px 6px 8px;
color:#fff;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
background-color:#000;
margin:2px;
padding:4px 5px
}
.showpageNum a {
text-decoration:none;
color:#fff;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
background-color:#09F;
margin:2px;
padding:4px 5px
}
.showpageNum a:hover {
color:#fff;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
background-color:#000;
margin:2px;
padding:4px 5px
}
.showpageNum a:active {
color:#fff;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
background-color:#000;
margin:2px;
padding:4px 5px
}
.showpageOf {
color:#009000;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
margin:2px;
padding:4px 5px
}
.showpagePoint {
color:#fff;
font:bold 14px Arial, Helvetica, Verdana;
border:2px solid #09F;
background-color:#000;
margin:2px;
padding:4px 5px
}

#blog-pager{
font:normal 12px Arial, Helvetica, Verdana;
margin:10px 0px 0px 0px;
padding:25px 0px 0px 0px;
background:url() no-repeat;
width:520px;
height:40px;
text-align:center;
}
#blog-pager a {
color: #fff;
}
#blog-pager {text-align: center;
}

Apos isso adicione o código abaixo acime de </body>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Anterior';
var downPageWord ='Próximo';
</script>
<script src='http://dl.dropbox.com/u/19188184/PageNavi_LibertyCreate.js' type='text/javascript'/>
</b:if>