16 diciembre 2010

Numerar las páginas de tu blog

Hoy os traigo un  truquito para numerar las páginas de vuestro blog, solo funciona en las plantillas modificadas, no en las del diseñador de Blogger.

No sé si les habrá pasado a ustedes alguna vez que al visitar un blog y ver las entradas antiguas, quieres volver atrás y no te deja, tan solo te dá la opción de ir a la página principal.

Pués con este truco se acabó el volver a la página principal, ya que te dá la opción de ir a la página que tu quieres, sin tener que ir pasando página trás página.

Es tán fácil como copiar el código de abajo y añadirlo a tu blog en un gadget HTML/JAVA

<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #FA8A8A;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #FA8A8A;
background-color:#FA8A8A;
}
.showpagePoint {
color:#7B0A0A;
text-decoration:none;
border: 1px solid #FA8A8A;
background: #FA8A8A;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #FA8A8A;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#7B0A0A;
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount = 7;
var displayPageNum = 5;
var upPageWord = 'Anterior';
var downPageWord = 'Próxima';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span class="showpageOf"> Paginas ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>


Eso sí, es recomendable colocarlo justamente bajo las entradas de blog

Se puede configurar y cambiar de color, eso lo dejo a vuestra elección, tan solo deberéis cambiar (una vez instalado) las etiquetas que definen el color #FA8A8A; este sería el rojo oscuro y este #7B0A0A el rojo claro, por los vuestros gris oscuro,gris claro,azul oscuro,azul claro etc...

Os dejo una tabla de colores para que probéis Tabla de Colores

Y listo, ya verás abajo la numeración de tu blog, os quedará de esta forma, si todo os sale bién:

8 comentarios

MUY BUENO YA SE LO HE COLOCADO A MI BLOG LO ESTABA BUSCANDO !!!! GRACIAS
PERO TENGO UNA CONSULTA POR QUE DE VEZ EN CUANDO SE ME QUITA SOLO???? TENGO QUE ENTRAR Y DARLE APLICAR DE NUEVO?? SI PUEDES AYUDARME...
UN SALUDO

hola una pregunta, e puesto el condigo, pero no sale nada de nada, que me puedo pasar??

http://cactusyaficiones.blogspot.com.es/

No me funcionó, seguí los pasos pero no salió en mi blog Unidos por el Fútbol

No funciona en las nuevas plantillas del diseñador de Blogger.

Como siempre te escribo en tus post: OJALA HUBIERA SERVIDO

Webmaster, no se si habrás leido que no funciona en las plantillas del diseñador de Blogger, solo en las plantillas modificadas.

Saludos.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"