[Blog] - Numeração de Páginas

On: quarta-feira, janeiro 15, 2014 By: Unknown 0 comentários

Hey gente, hoje estava a navegar pela web e veio-me à ideia de colocar numeração de páginas no meu blog, eu procuro e procuro e só encontro algo como isto:

Depois estive a ver o código e percebi que era fácil de modificar usando código css, algum tempo depois acabei a numeração de páginas do meu blog, que ficou assim:

Que acham? Ficou bem melhor, né?

Tem aqui o código original:

<style type="text/css"> #blog-pager{font-size:normal;padding:10px 0;clear:both;} .showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px} .showpageArea a{color:#000} .showpageNum a{padding:3px 8px;margin:0 2px;text-decoration:none;border:1px solid #999;background:#ddd;color:#000;} .showpageNum a:hover{border:1px solid #888;background:#ccc} .showpageOf{margin:0 2px 0 0;padding:3px 8px;margin:0 2px;text-decoration:none;border:1px solid #999} .showpagePoint{color:#fff;padding:3px 8px;margin:2px;border:1px solid #999;background:#666; text-decoration:none} </style> <script style='text/javascript'> var numshowpage=4; var postperpage =3; var upPageWord="Anterior"; var downPageWord="Próxima"; var home_page="/"; var urlactivepage=location.href; </script> <script style='text/javascript' src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/paginacionbloggermtb.js'></script></ textarea>

E aqui o código modificado, para utilizaram no vosso blog basta colocar como widget, aprenda aqui!

<style type="text/css"> #blog-pager{font-size:normal;padding:10px 0;clear:both;} .showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px} .showpageArea a{color:#000} .showpageNum a{padding:3px 8px;margin:0 2px;text-decoration:none;border:1px solid #999;background:#ddd;color:#000;background: #63B8EE; background: linear-gradient(top, #C4803C, #93602D); background: -ms-linear-gradient(top, #C4803C, #93602D); background: -webkit-gradient(linear, left top, left bottom, from(#C4803C), to(#93602D)); background: -moz-linear-gradient(top, #C4803C, #93602D); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #000000;} .showpageNum a:hover{border:1px solid #888;background:#ccc;color: #14396A !important; background: #468CCF; background: linear-gradient(top, #468CCF, #63B8EE); background: -ms-linear-gradient(top, #468CCF, #63B8EE); background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE)); background: -moz-linear-gradient(top, #468CCF, #63B8EE); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #000000; } .showpageOf{padding:3px 8px;margin:0 2px;text-decoration:none;border:1px solid #999;background:#ddd;color:#000;background: #63B8EE; background: linear-gradient(top, #C4803C, #93602D); background: -ms-linear-gradient(top, #C4803C, #93602D); background: -webkit-gradient(linear, left top, left bottom, from(#C4803C), to(#93602D)); background: -moz-linear-gradient(top, #C4803C, #93602D); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #000000;} .showpagePoint{color:#000000;padding:3px 8px;margin:2px;border:1px solid #999;background:#666; text-decoration:none;background: #FFFFFF; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 3px solid #000000;} </style> <script style='text/javascript'> var numshowpage=4; var postperpage =3; var upPageWord="Anterior"; var downPageWord="Próxima"; var home_page="/"; var urlactivepage=location.href; </script> <script style='text/javascript' src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/paginacionbloggermtb.js'></script></ textarea>

Em breve irei fazer um tutorial para ensinar a mexer com css.

Bordas:

http://webtoools.blogspot.pt/2014/01/tutorialblog-modificar-codigo-css-bordas.html

Cores, Fontes e Sombras
http://webtoools.blogspot.pt/2014/01/tutorialblog-modificar-codigo-css-cores.html