Paginação do Blog: Editar, Personalizar, Modificar



autumn, beautiful, forest, leaves, lonely

Hola gente >< Hoje vou ensinar como editar, personalizar ou ainda modificar a paginação do blog. Vamos lá amores? Cliquem em Leia Mais e confiram este post!


TUTORIAL 1: Imagem No lugar do Início, Postagens Mais Antigas e Postagens Mais Recentes


Esse tutorial já é bem conhecido, mas é bom relembrar. Vamos lá então? 

Editar HTML > Expandir Modelos Widgets

Procure (F3) por:

<data:newerPageTitle/> 

Que é o que corresponde ao link “Postagens mais recentes”.

<data:olderPageTitle/> 

Que é o que corresponde ao link “Postagens mais antigas ”

<data:homeMsg/> 

Correspondente ao link “Início”

No lugar desses, você cola:

<img src="URL DA IMAGEM AQUI" />

Certo? Trouxe algumas imagens para vocês usarem, estão grandes, para que ajustem como quiserem (clique sobre elas para abri-las em tamanho original):

   

GifGif

TUTORIAL 2: Estilos Para o Texto Início, Postagens Mais Antigas e Postagens Mais Recentes


Editar HTML

Esse é bem fácil embora não muito popular!

Procure (F3) por:

]]></b:skin>

Acima, cole o código já editado:

Para “Postagens mais recentes”, cole:

#blog-pager-newer-link {
background: #COR;
border-radius: 20px;
font-family: verdana;
}

Para “Postagens mais antigas”, cole:

#blog-pager-older-link {

background: #COR;
border-radius: 20px;
font-family: verdana;
}

Para “Início”, cole:


#home-link {

background: #COR;
border-radius: 20px;
font-family: verdana;
}

Você pode colocar uma imagem de fundo se preferir, é só no lugar de #COR; , você colocar:

url (LINK_DA_IMAGEM);



Ok? Edite e salve. Espero que tenha funcionado ;D Vamos ao próximo!


GifGif

TUTORIAL 3: Paginação no Blogger


Esse é bem procurado hein? Vamos usar esse tutorial do Dicas Para Blogs que é ótimo!

Editar HTML (Não precisa marcar "Expandir Modelos Widgets") e procure (F3) por:

]]></b:skin>

Acima, cole:

.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;}
.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
Tudo bem? Agora procure por:

</ body>

ACIMA disto, cole:


<script type='text/javascript'>;var home_page=&#39;/&#39;;var urlactivepage=location.href;var postperpage=4;var numshowpage=4;var upPageWord =&#39;Prev&#39;;var downPageWord =&#39;Next&#39;;</script><script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>

Salve.

Agora procure por:

'data:label.url'

e no lugar disso, cole:

'data:label.url + "?&amp;max-results=4"'

Veja que o número é o mesmo de postperpage, e assim que tem que ser.

Espero que tenham curtido esses três tutoriais galera ;D