Numerador de paginas para Blogger

Hoy he implementado en el blog un numerador de páginas, tal y como os muestro en esta imagen:


Para hacerlo de una forma rápida y sin necesidad de editar nuestra plantilla, será tan fácil como copiar el código que os dejo a continuación y posteriormente pegarlo como un elemento Html/Javascript. Desde Diseño, Elementos de página, Añadir un gadget, Elemento HTML-Javascript.

Cuando lo tenemos agregado colocaremos el nuevo elemento debajo de las entradas del blog arrastrándolo con el ratón guardamos cambios y listos.

CODIGO:



<style>

.showpageArea a {

text-decoration:underline;

}

.showpageNum a {

text-decoration:none;

border: 1px solid #ccc;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #ccc;

background-color:#ccc;

}

.showpagePoint {

color:#333;

text-decoration:none;

border: 1px solid #ccc;

background: #ccc;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #ccc;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333;

}

</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 = 4;

var displayPageNum = 5;

var upPageWord = 'Anterior';

var downPageWord = 'Siguiente';







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>

En negrita dos datos que puedes variar.



Visto en: El Bufón Digital

Related Posts with Thumbnails