numbered page navigation

Ovo je hack i demo imate kod mene na ovoj stranici, bar jedan, plavi i radi. Ako ne radi, ostavite komentar, da vidimo gde je greška da otklonimo.
Da počnemo, lako je:

1. Idite ovim putem:  Blogger dashboard > Template > Edit HTML > Expand widget i nadjite sledeći kod:

<b:includable id='mobile-index-post' var='post'> 

    2. Sledeći kod postavite iznad gornje linije 

<b:includable id='page-navi'>

<div class='pagenavi'>

<script type='text/javascript'>

var pageNaviConf = {

perPage: 7,

numPages: 5,

firstText: "First",

lastText: "Last",

nextText: "»",

prevText: "«"

}

</script>

<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/>

<div class='clear'/>

</div>

</b:includable>

Možete da uradite "Custom" varijantu, podešavanje koliko postova, broj stranica i slično
perpage: Na primer, crveno je broj postova po jednoj stranici 
numpage: Plavo je broj stranica

 3. Sad nadjite ovaj kod ( CTRL + F ) 

<b:include name='nextprev'/>

4. Zamenite prethodni kod sa kodom ispod:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>

5. Sad nadjite ]]></b:skin> i dodajte jedan od CSS stilova koji želite iznad njega
Stil #1

#blog-pager, .pagenavi {

     clear: both;

     text-align: center;

     margin: 30px auto 10px;

}

#blog-pager a, .pagenavi span, .pagenavi a {

text-decoration: none;

color: #333;

text-shadow: 0 1px 0 rgba(255, 255, 255, .5);

background-color: #F8F8F8;

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f8f8);

background-image: -moz-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);

background-image: -ms-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);

background-image: -o-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FCFCFC),color-stop(100%,#F8F8F8));

background-image: -webkit-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);

background-image: linear-gradient(to bottom,#FCFCFC 0,#F8F8F8 100%);

padding: 5px 10px;

border: 1px solid lightGrey;

font-weight: bold;

font-size: 12px;

vertical-align: middle;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

border-radius: 2px;

margin: 2px 2px;

-webkit-transition: .0s ease-in!important;

-moz-transition: .0s ease-in!important;

-ms-transition: .0s ease-in!important;

-o-transition: .0s ease-in!important;

transition: .0s ease-in!important;

}

#blog-pager a:hover, .pagenavi a:hover {

border-color: #C6C6C6;

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);

background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);

background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);

background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));

background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);

background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);

}

#blog-pager-older-link, #blog-pager-newer-link {

     float: none;

}

.pagenavi .current {

border-color: #C6C6C6;

background-color: #E9E9E9;

background-image: none;

-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);

-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);

}

.pagenavi a:active {

border-color: #C6C6C6;

background-color: #E9E9E9;

background-image: none;

-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);

-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);

}

Stil #2

#blog-pager, .pagenavi {

     clear: both;

     text-align: center;

     margin: 30px auto 10px;

}

#blog-pager a, .pagenavi span, .pagenavi a {

background-color: #3BB3E0;

padding:  5px 10px;

position: relative;

margin: 2px;

font-size: 12px;

text-decoration: none;

color: white;

border: solid 1px #186F8F;

background-image: linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);

background-image: -o-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);

background-image: -moz-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);

background-image: -webkit-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);

background-image: -ms-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #2CA0CA), color-stop(1, #3EB8E5) );

-webkit-box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;

-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;

box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

}

#blog-pager a:hover, .pagenavi a:hover {

background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);

background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);

background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);

background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);

background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );

}

#blog-pager-older-link, #blog-pager-newer-link {

     float: none;

}

.pagenavi .current {

background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);

background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);

background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);

background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);

background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );

}

Stil #3

#blog-pager, .pagenavi {

     clear: both;

     text-align: center;

     margin: 30px auto 10px;

}

#blog-pager a, .pagenavi span, .pagenavi a {

border: 1px solid #3d8bf2;               

padding: 5px 10px;                

text-decoration: none;                

font-family: arial;                

color:#fff;                

margin: 2px;                

background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG');

background-position: left;           

-webkit-transition: all 0.7s ease-in-out;              

-moz-transition: all 0.7s ease-in-out;                

-o-transition: all 0.7s ease-in-out; 

}

#blog-pager a:hover, .pagenavi a:hover {

background-position:right;

}

#blog-pager-older-link, #blog-pager-newer-link {

     float: none;

}

.pagenavi .current {

background-position:right;

}

Stil #4

#blog-pager, .pagenavi {

     clear: both;

     text-align: center;

     margin: 30px auto 15px;

}

.pagenavi .pages {

display: none;

}

#blog-pager a, .pagenavi span, .pagenavi a {

padding: 5px 10px;

text-decoration: none;

font-family: arial;

color: white;

margin: 2px;

background: black;

background-position: bottom;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

border-radius: 30px;

font-size: 20px;

}

#blog-pager a:hover, .pagenavi a:hover {

background: orange;

}

#blog-pager-older-link, #blog-pager-newer-link {

     float: none;

}

.pagenavi .current {

background: orange;

}

Ako imate pitanje, sugestije, ako vam se svidja ovo ili ako želite drugi tip ili vrstu ili bilošta, ostavite komentar slobodno. Hvala