Paginar nuestro blog paso a paso

Ya sabemos de antemano que blogger nos permite poner una serie de entradas limitadas a mostrar en nuestro blog simplemente accediendo a:

Diseño > Entradas del Blog > Número de entradas en la página principal.

Una vez excedamos este número de publicaciones simplemente nos saldrá los vínculos de navegación de "Entradas más recientes" y "Entradas más antiguas", a que Blogger no posee ninguna función incorporada para la numeración de páginas.
Ya hemos contado en este post más antiguo, como poner una paginación con un  simple gadget, pero hay vamos a ir más allá incorporando a nuestra plantilla un código CSS.

Siempre comento de antemano que antes de transformar nuestra plantilla hagamos un copia de seguridad ya que si no nos salé bien las cosas podemos volver al punto anterior.
LO podemos ver en este post paso a paso.

Ahora que ya tenemos la copia de seguridad guardada en un sitio seguro de nuestro PC nos vamos a editar nuestra plantilla.

Para ello nos vamos a:

Tema > Editar HTML  y con los botones CTRl +F buscamos: ]]></b:skin>
 Elegimos el modelo que más nos guste y lo pegamos junto encima.

Diseño 1
Numerada en color gris

  #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #blog-pager .pages{border:none;}

Diseño 2
Numerada en negro y naranja

 

  #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Diseño 3
Numerada en negro y azul 

 

 #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Diseño 4
 Numerada en blanco y azul 

 

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Diseño 4
 Colorida

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Diseño 5
 Numerada en naranja y amarilla

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Diseño 5
 Numerada en blanco y rojo

 

# Blog-pager {claro: ambos; margen: 30px auto; text-align: center; Relleno: 7px; }
.blog-pager {fondo: ninguno;}
.displaypageNum a, .showpage a, .pagecurrent {font-size: 12px; relleno: 5px 12px; margin-right: 5px; Color: # 222; Color de fondo: #eee; Frontera: 1px sólido #EEEEEE;}
.displaypageNum a: hover, .showpage a: hover, .pagecurrent {background: # E5E5E5; text-decoration: none; color: # 222;}
# Blog-pager .pagecurrent {font-weight: bold; color: #fff; background: # DB4920;}
.showpageOf {display: none! Important}
# Blog-pager .pages {border: none;}

Elegimos el modelo que más nos guste y lo pegamos junto encima.

Nota:
Si queremos eliminar los botones "First" y "Last" pegamos este código justo debajo del anterior que hallamos elegido: .firstpage, .lastpage {display: none;}   

Acción de la secuencia de comandos

Ahora buscamos:
</body>
y justo encima pegamos este otro código

<B: if cond = 'datos: blog.pageType! = & Quot; item & quot;'>
<B: si cond = 'datos: blog.pageType! = & Quot; static_page & quot;'>
<Script type = 'text / javascript'>
/ * <! [CDATA [* /
Var perPage = 3;
Var numPages = 3;
Var firstText = 'Primero';
Var lastText = 'Last';
Var prevText = '«Anterior';
Var nextText = 'Siguiente' ';
Var urlactivepage = location.href;
Var home_page = "/";

If (typeof firstText == "undefined") firstText = "First"; if (typeof lastText == "undefined") lastText = "Last"; var noPage; var currentPage; var currentPageNo; var postLabel; pagecurrentg (); function looppagecurrentg (PageInfo) {var html = ''; pageNumber = parseInt (numPages / 2); if (pageNumber == numPages-pageNumber) {numPages = pageNumber * 2 + 1}
PageStart = currentPageNo-pageNumber; if (pageStart <1) pageStart = 1; lastPageNo = parseInt (pageInfo / perPage) +1; if (lastPageNo-1 == pageInfo / perPage) lastPageNo = lastPageNo-1; pageEnd = pageStart + numPages- 1; if (pageEnd> lastPageNo) pageEnd = lastPageNo; html + = "<span class = 'showpageOf'> Página" + currentPageNo + 'de' + lastPageNo + (CurrentPageNo> 1) {if (currentPage == "page") {html + = '<span class = "showpage firstpage"> <a href="'+home_page+'">' + firstText + '</a> </ span > '} Else {html + =' <span class = "displaypageNum firstpage"> <a href="/search/label/'+postLabel+'?&max-results='+perPage+'"> '+ firstText +' </a> </ Span> '}}
If (currentPageNo> 2) {if (currentPageNo == 3) {if (currentPage == "page") <+ href="++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ '</a> </ span>'} else {html + = '<span class = "displaypageNum"> <a href="/search/label/'+postLabel+'?&max-results='+perPage+'">' + PrevText + '</a> </ span>'}} else {if (currentPage == "page") <href = "#" onclick = "redirectpage (' + PrevNumber + ') return false "> + prevText +' </a> </ span> '} else {html + =' <span class =" displaypageNum "> <a href =" # "onclick =" redirectlabel (' PrevNumber + '); return false ">' + prevText + '</a> </ span>'}}}
If (pageStart> 1) {if (currentPage == "page") {html + = '<span class = "displaypageNum"> <a href="'+home_page+'"> 1 </a> </ span>'} Else {html + = '<span class = "displaypageNum"> <a href="/search/label/'+postLabel+'?&max-results='+perPage+'"> 1 </a> </ span>'}}
If (pageStart> 2) {html + = '...'}
Para jj = jS = jJ = jS = jj = jS = jj = jS = jj = jS = 1) {if (currentPage == "page") {html + = '<span class = "displaypageNum"> <a href="'+home_page+'"> 1 </a> </ span> '<Span class = "displaypageNum"> <a href="/search/label/'+postLabel+'?&max-results='+perPage+'"> 1 </a> </ span>'}} else {if ( CurrentPage == "página") {html + = '<span class = "displaypageNum"> <a href="#" onclick="redirectpage('+jj+');return false">' + jj + '</a> < / Span> '} else {html + =' <span class = "displaypageNum"> <a href="#" onclick="redirectlabel('+jj+');return false"> '+ jj +' </a> < Span> '}}}
If (pageEnd <lastPageNo-1) {html + = '...'}
If (pageEnd <lastPageNo) {if (página actual == "página") {html + = '<span class = "displaypageNum"> <a href="#" onclick="redirectpage('+lastPageNo+');return false"> '+ LastPageNo +' </a> </ span> '} else {html + =' <span class = "displaypageNum"> <a href="#" onclick="redirectlabel('+lastPageNo+');return false"> ' + LastPageNo + '</a> </ span>'}}
Var nextnumber = parseInt (currentPageNo) +1; if (currentPageNo <(lastPageNo-1)) {if (currentPage == "page") <a href = "#" onclick = "Redirectpage ('+ nextnumber +'); return false"> '+ nextText +' </a> </ span> '} else {html + =' <href = "#" onclick = "Redirectlabel ('+ nextnumber +'); return false"> '+ nextText +' </a> </ span> '}}
If (currentPageNo <lastPageNo) {if (currentPage == "page") {html + = '<span class = "displaypageNum lastpage"> <a href = "#" onclick = "redirectpage (' + lastPageNo + > '+ LastText +' </a> </ span> '} else {html + =' <span class = "displaypageNum lastpage"> <a href = "#" onclick = "redirectlabel ('+ lastPageNo + > '+ LastText +' </a> </ span> '}}
Var pageArea = document.getElementsByName ("pageArea"); var blogPager = document.getElementById ("blog-pager"); para (var p = 0; p <pageArea.length; p ++) {pageArea [p] .innerHTML = html }
If (pageArea && pageArea.length> 0) {html = ''}
If (blogPager) {blogPager.innerHTML = html}}
Función totalcountdata (raíz) {var feed = root.feed; var totaldata = parseInt (feed.openSearch $ totalResults. $ T, 10); looppagecurrentg (totaldata)}
(1) {if (thisUrl.indexOf ("? Updated-max")! = - 1) {postLabel = ThisUrl.substring (thisUrl.indexOf ("/ search / label /") + 14, thisUrl.indexOf ("? Updated-max")) else {postLabel = thisUrl.substring (thisUrl.indexOf ("/ search / label /")+14,thisUrl.indexOf("?&max "))}}
If (thisUrl.indexOf ("? Q =") == - 1 && thisUrl.indexOf (".html") == - 1) {if {thisUrl.indexOf ("/ search / label / CurrentPage = "page"; if (urlactivepage.indexOf ("# PageNo =")! = - 1) {currentPageNo = urlactivepage.substring (urlactivepage.indexOf ("# PageNo =") + 8, urlactivepage.length) CurrentPageNo = 1}
Document.write () <script src = \ "" + home_page + "feeds / posts / summary? Max-results = 1 & alt = json-in-script & callback = totalcountdata \ Label "; if (thisUrl.indexOf (" & max-results = ") == - 1) {perPage = 20}
Si urlactivepage.indexOf ("# PageNo =")! = - 1) {currentPageNo = urlactivepage.substring (urlactivepage.indexOf ("# PageNo =") + 8, urlactivepage.length)} else {currentPageNo = 1}
Document.write ('<script src =' '+ home_page +' feeds / posts / summary / - / '+ postLabel +'? Alt = json-in-script & callback = totalcountdata & max-results = 1 " }}
Function redirectpage (página de números) {jsonstart = (numberpage-1) * perPage; noPage = numberpage; var nameBody = document.getElementsByTagName ('head') [0]; var newInclude = document.createElement ('script'); newInclude.type = 'Text / javascript'; newInclude.setAttribute ("src", home_page + "feeds / posts / summary? Start-index =" + jsonstart + "& max-results = 1 & alt = json-in-script & callback = finddatepost)) nameBody.appendChild (NewInclude)}
Function redirectlabel (numberpage) {jsonstart = (numberpage-1) * perPage; noPage = numberpage; var nameBody = document.getElementsByTagName ('head') [0]; var newInclude = document.createElement ('script'); newInclude.type = 'Text / javascript'; newInclude.setAttribute ("src", home_page + "feeds / posts / summary / - /" + postLabel + "& max-results = 1 & alt = json-in-script & callback = Finddatepost "); nameBody.appendChild (newInclude)}
Function finddatepost (raíz) {post = root.feed.entry [0]; var timestamp1 = post.published. $ T.substring (0,19) + post.published. $ T.substring (23,29); var timestamp = EncodeURIComponent (timestamp1); if (currentPage == "page") {var pAddress = "/ search? Updated-max =" + timestamp + "& max-results =" + perPage + "# PageNo =" + noPage} else {var pAddress = "+ Search + label +" + postLabel + "? Update-max =" + timestamp + "& max-results =" + perPage + "# PageNo =" + noPage}
Location.href = pAddress}

Unesdoc.unesco.org unesdoc.unesco.org
</ Script>
</ B: si>
</ B: si>

Configuracion de la paginación numerada

Después de instalar este código podemos hacer algunos cambios.

perPage: 7,.: Esto son los mensajes que se mostrarán en cada página (es decir 7). Este valos tiene que ser igual al que pongamos en el diseño de las entradas principales.

numPages: 6,: Esto son las páginas que se muestran en la página de navegación

(es decir 6)

var firstText ='First'; Primero

var lastText ='Last'; Ultimo

var prevText ='« Previous'; Anterior

var nextText ='Next »'; Reciente

Ya podemos guardar nuestra plantilla.