PAGINATION IN BLOG

Tuesday, 28 October 2014

PAGINATION IN BLOG

----------------------------------------------------------------------------------------------------------
1- FIND BODY CLOSE TAG AND REPLACE WITH BELOW CODE
READ MORE:
http://fbgadgets.blogspot.co.uk/2014/04/blog-pager-with-newer-older-home-post.html
http://fbgadgets.blogspot.co.uk/2014/06/generic-blogger-template-with-css_13.html
http://besttheme.net/lifetime-blogger-template/
------------------------------------------------------------------------------------------------------------



<style type='text/css'>

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
color:#a9a9a9;
font-weight: bold;
border:1px solid #ccc;
border-radius:2px;
background:#cfcfcf;
}
.showpageOf {
margin:0 8px 0 0;
color:#999;
}
.showpageNum a:hover {
border:1px solid #ccc;
border-radius:2px;
color:#045090;
font-weight: bold;
text-decoration: none;
background:#cfcfcf;
}
.showpagePoint {
color:#000000;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border:1px solid #ccc;
background:#cfcfcf;
border-radius:2px;
text-decoration: none;
}

</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>

<script type='text/javascript'>

//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 G;5 i;5 b;5 n;1f();x 1g(15){5 6=\'\';H=I(K/2);3(H==K-H){K=H*2+1}J=b-H;3(J<1)J=1;o=I(15/j)+1;3(o-1==15/j)o=o-1;L=J+K-1;3(L>o)L=o;6+="<4 e=\'1y\'>1z "+b+\' 1A \'+o+"</4>";5 16=I(b)-1;3(b>1){3(b==2){3(i=="w"){6+=\'<4 e="1B"><a f="\'+y+\'">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">\'+M+\'</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+16+\');A B">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+16+\');A B">\'+M+\'</a></4>\'}}}1h(5 g=J;g<=L;g++){3(b==g){6+=\'<4 e="1C">\'+g+\'</4>\'}c 3(g==1){3(i=="w"){6+=\'<4 e="k"><a f="\'+y+\'">1</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">1</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+g+\');A B">\'+g+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+g+\');A B">\'+g+\'</a></4>\'}}}5 17=I(b)+1;3(b<o){3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+17+\');A B">\'+1i+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+17+\');A B">\'+1i+\'</a></4>\'}}5 C=u.1D("C");5 18=u.1E("1F-1G");1h(5 p=0;p<C.P;p++){C[p].1j=6}3(C&&C.P>0){6=\'\'}3(18){18.1j=6}}x 1a(Q){5 R=Q.R;5 1k=I(R.1H$1I.$t,10);1g(1k)}x 1f(){5 d=m;3(d.9("/r/s/")!=-1){3(d.9("?S-7")!=-1){n=d.D(d.9("/r/s/")+14,d.9("?S-7"))}c{n=d.D(d.9("/r/s/")+14,d.9("?&7"))}}3(d.9("?q=")==-1&&d.9(".6")==-1){3(d.9("/r/s/")==-1){i="w";3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l("<h T=\\""+y+"U/V/W?7-l=1&X=Y-Z-h&11=1a\\"><\\/h>")}c{i="s";3(d.9("&7-l=")==-1){j=1J}3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l(\'<h T="\'+y+\'U/V/W/-/\'+n+\'?X=Y-Z-h&11=1a&7-l=1" ><\\/h>\')}}}x N(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x O(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W/-/"+n+"?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x 1b(Q){1c=Q.R.1K[0];5 1w=1c.1x.$t.D(0,19)+1c.1x.$t.D(1L,1M);5 1d=1N(1w);3(i=="w"){5 1e="/r?S-7="+1d+"&7-l="+j+"#E="+G}c{5 1e="/r/s/"+n+"?S-7="+1d+"&7-l="+j+"#E="+G}1O.f=1e}',62,113,'|||if|span|var|html|max||indexOf||nomerhal|else|thisUrl|class|href|jj|script|jenis|postperpage|showpageNum|results|urlactivepage|lblname1|maksimal|||search|label||document|newInclude|page|function|home_page|onclick|return|false|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|mulai|numshowpage|akhir|upPageWord|redirectpage|redirectlabel|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|getElementsByName|getElementById|blog|pager|openSearch|totalResults|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))

//]]>

</script>


</body>

==============================================



<style type='text/css'>
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
padding:8px 20px;
background: #FFD200;
border:5px solid#111;
}

.showpageArea a {
color: #000;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #caa910;
}

.showpageNum a:hover {
background: #9e8511;
}

.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #000;
text-decoration: none;
}

.showpageOf{
margin:0 8px 0 0;
}

</style>

<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=3;
var displayPageNum=4;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

htmlMap[htmlMap.length]='/';
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;

}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
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){
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++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

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;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-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 labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + 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){
html = labelHtml+'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++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

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 type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>



==============================================
BLOG PAGER NEXT PREVIOUS POST WITH JAVA
FIND THIS RED LINE AND REPLACE WITH BELOW CODE
<b:includable id='nextprev'>

==============================================

<b:includable id='nextprev'>

<style type='text/css'>
/* BlogPager
----------------------------------------------- */
.BlogPostPager {
background:#FFFFFF;
border-color:red purple blue yellow;
border-style:double;
border-width:6px;
float:left;
height:auto;
margin-bottom:10px;
margin-right:10px;
overflow:hidden;
padding:30px;
}
.BlogPostPager li.next {
float:right;
padding:0px;
background:none;
margin:0px;
}
.BlogPostPager li.next a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh78E2iPDKrJQO008UBHerLhVQykp656gNd2TwCJo2hMsPHKbvJlhAOqSnsbK-LI-RSzEHAKkMSfkWqQYlC5sByhz8SqnlTZXRKVMBAOEA6wfIowFuxUN9sprlxqaWGzHzgEyNiJilQ_pMj/s300-c/Stars.gif);
border-bottom-left-radius:28px;
border-bottom-right-radius:28px;
border-top-left-radius:28px;
border-top-right-radius:28px;
display:block;
font-size:20px;
height:30px;
padding:10px 20px;
text-decoration:none;
width:260px;
padding-left:24px;
}
.BlogPostPager li.previous {
margin:0px -2px 0px 0px;
float:left;
border-right:1px solid #ddd;
padding:0px;
background:none;
}
.BlogPostPager li.previous a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh78E2iPDKrJQO008UBHerLhVQykp656gNd2TwCJo2hMsPHKbvJlhAOqSnsbK-LI-RSzEHAKkMSfkWqQYlC5sByhz8SqnlTZXRKVMBAOEA6wfIowFuxUN9sprlxqaWGzHzgEyNiJilQ_pMj/s300-c/Stars.gif);
border-bottom-left-radius:28px;
border-bottom-right-radius:28px;
border-top-left-radius:28px;
border-top-right-radius:28px;
display:block;
font-size:20px;
height:30px;
padding:10px 20px;
text-decoration:none;
width:260px;
padding-right:24px;
}
.BlogPostPager li.next:hover,.BlogPostPager li.previous:hover {
background:#333333;
}
.BlogPostPager li {
width:50%;
display:inline;
float:left;
text-align:center;
}
.BlogPostPager li a {
position:relative;
min-height:77px;
display:block;
padding:15px 46px 15px;
outline:none;
text-decoration:none;
}
.BlogPostPager li i {
color:#ccc;
font-size:18px;
}
.BlogPostPager li a strong {
display:block;
font-size:20px;
color:#ccc;
letter-spacing:0.5px;
font-weight:bold;
text-transform:uppercase;
font-family:oswald,sans-serif,arial;
margin-bottom:10px;
}
.BlogPostPager li a span {
font-size:15px;
color:#666;
font-family:oswald,Helvetica,arial;
margin:0px;
}
.BlogPostPager li a:hover span,.BlogPostPager li a:hover i {
color:#ffffff;
}
.BlogPostPager li.previous i {
float:left;
margin-top:15%;
margin-left:5%;
}
.BlogPostPager li.next i {
float:right;
margin-top:15%;
margin-right:5%;
}
.BlogPostPager li.next i,.BlogPostPager li.previous i,.BlogPostPager li.next,.BlogPostPager li.previous {
-webkit-transition-property:background color;
-webkit-transition-duration:0.4s;
-webkit-transition-timing-function:ease-out;
-moz-transition-property:background color;
-moz-transition-duration:0.4s;
-moz-transition-timing-function:ease-out;
-o-transition-property:background color;
-o-transition-duration:0.4s;
-o-transition-timing-function:ease-out;
transition-property:background color;
transition-duration:0.4s;
transition-timing-function:ease-out;
}
.UkGreenSpot-right {
padding-right: 0px;
}

</style>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<ul class='BlogPostPager'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='UkGreenSpot-right'/>
<a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next'/>
<b:else/>
<i class='UkGreenSpot-right'/>
<a rel='next'><strong>Next</strong>
<span>You are viewing Most Recent Post</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa UkGreenSpot-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous'/>
<b:else/>
<i class='fa UkGreenSpot-left'/><a rel='previous'><strong>Previous</strong> <span>You are viewing Last Post</span></a>
</b:if>
</li>
</ul>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if></b:if>
<div class='clear'/>

</b:includable>

----------------------------------------------------------------------------------------------------------
PAGINATION SLIDER STYLE 2
------------------------------------------------------------------------------------------------------------


<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>

<style type='text/css'>

.paginator {
margin : 10px;
font-size : 1em;
}
.paginator table {
border-collapse : collapse;
table-layout : fixed;
width : 100%;
}
.paginator table td {
white-space : nowrap;
text-align : center;
padding : 0;
}
.paginator span {
display : block;
color : #fff;
padding : 3px 0;
}
.paginator span strong {
padding : 2px 8px;
}
.paginator span a {
padding : 2px 8px;
color : #888;
transition : all 0.5s 0s ease-out;
}
.paginator span a:hover {
background : #f35d5c;
color : #fff !important ;
border-radius : 3px 3px 3px 3px;
}
.paginator span strong {
background : #abacb6;
border-radius : 3px 3px 3px 3px;
font-style : normal;
font-weight : 400;
}
.paginator .scroll_bar {
width : 100%;
height : 20px;
position : relative;
margin-top : 10px;
}
.paginator .scroll_trough {
width : 100%;
height : 3px;
background : #abacb6;
overflow : hidden;
}
.paginator .scroll_thumb {
position : absolute;
z-index : 2;
width : 0;
height : 3px;
top : 0;
left : 0;
font-size : 1px;
background : #2c3e50;
}
.paginator .scroll_knob {
position : absolute;
top : -5px;
left : 50%;
margin-left : -10px;
width : 20px;
height : 20px;
overflow : hidden;
background : url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) 50% 50% no-repeat;
cursor : pointer;
}
.paginator .current_page_mark {
position : absolute;
z-index : 1;
top : 0;
left : 0;
width : 0;
height : 3px;
overflow : hidden;
background : #333333;
}
.fullsize .scroll_thumb {
display : none;
}
.paginator_pages {
width : 600px;
text-align : right;
font-size : 0.8em;
color : gray;
margin-top : -10px;
}
</style>
<script src='http://yourjavascript.com/222106553/page-scroll.js' type='text/javascript'/>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
</script>
<script src='http://yourjavascript.com/354622140/page-scroll-blogger.js' type='text/javascript'/>
</b:if>
</b:if>

----------------------------------------------------------------------------------------------------------
PAGINATION SLIDER STYLE 3
------------------------------------------------------------------------------------------------------------



<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>

<style type='text/css'>

.paginator {
margin : 10px;
font-size : 1em;
}
.paginator table {
border-collapse : collapse;
table-layout : fixed;
width : 100%;
}
.paginator table td {
white-space : nowrap;
text-align : center;
padding : 0;
}
.paginator span {
display : block;
color : #fff;
padding : 3px 0;
}
.paginator span strong {
padding : 2px 8px;
}
.paginator span a {
padding : 2px 8px;
color : #888;
transition : all 0.5s 0s ease-out;
}
.paginator span a:hover {
background : #f35d5c;
color : #fff !important ;
border-radius : 3px 3px 3px 3px;
}
.paginator span strong {
background : #abacb6;
border-radius : 3px 3px 3px 3px;
font-style : normal;
font-weight : 400;
}
.paginator .scroll_bar {
width : 100%;
height : 20px;
position : relative;
margin-top : 10px;
}
.paginator .scroll_trough {
width : 100%;
height : 3px;
background : #abacb6;
overflow : hidden;
}
.paginator .scroll_thumb {
position : absolute;
z-index : 2;
width : 0;
height : 3px;
top : 0;
left : 0;
font-size : 1px;
background : #2c3e50;
}
.paginator .scroll_knob {
position : absolute;
top : -5px;
left : 50%;
margin-left : -10px;
width : 20px;
height : 20px;
overflow : hidden;
background : url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) 50% 50% no-repeat;
cursor : pointer;
}
.paginator .current_page_mark {
position : absolute;
z-index : 1;
top : 0;
left : 0;
width : 0;
height : 3px;
overflow : hidden;
background : #333333;
}
.fullsize .scroll_thumb {
display : none;
}
.paginator_pages {
width : 600px;
text-align : right;
font-size : 0.8em;
color : gray;
margin-top : -10px;
}
</style>

<script type='text/javascript'>
//<![CDATA[

var Paginator=function(paginatorHolderId,pagesTotal,pagesSpan,pageCurrent,baseUrl){if(!document.getElementById(paginatorHolderId)||!pagesTotal||!pagesSpan)return false;this.inputData={paginatorHolderId:paginatorHolderId,pagesTotal:pagesTotal,pagesSpan:pagesSpan<pagesTotal?pagesSpan:pagesTotal,pageCurrent:pageCurrent,baseUrl:baseUrl?baseUrl:'/pages/'};this.html={holder:null,table:null,trPages:null,trScrollBar:null,tdsPages:null,scrollBar:null,scrollThumb:null,pageCurrentMark:null};this.prepareHtml();this.initScrollThumb();this.initPageCurrentMark();this.initEvents();this.scrollToPageCurrent();}
Paginator.prototype.prepareHtml=function(){this.html.holder=document.getElementById(this.inputData.paginatorHolderId);this.html.holder.innerHTML=this.makePagesTableHtml();this.html.table=this.html.holder.getElementsByTagName('table')[0];var trPages=this.html.table.getElementsByTagName('tr')[0];this.html.tdsPages=trPages.getElementsByTagName('td');this.html.scrollBar=getElementsByClassName(this.html.table,'div','scroll_bar')[0];this.html.scrollThumb=getElementsByClassName(this.html.table,'div','scroll_thumb')[0];this.html.pageCurrentMark=getElementsByClassName(this.html.table,'div','current_page_mark')[0];if(this.inputData.pagesSpan==this.inputData.pagesTotal){addClass(this.html.holder,'fullsize');}}
Paginator.prototype.makePagesTableHtml=function(){var tdWidth=(100/this.inputData.pagesSpan)+'%';var html=''+'<table width="100%">'+'<tr>'
for(var i=1;i<=this.inputData.pagesSpan;i++){html+='<td width="'+ tdWidth+'"></td>';}
html+=''+'</tr>'+'<tr>'+'<td colspan="'+ this.inputData.pagesSpan+'">'+'<div class="scroll_bar">'+'<div class="scroll_trough"></div>'+'<div class="scroll_thumb">'+'<div class="scroll_knob"></div>'+'</div>'+'<div class="current_page_mark"></div>'+'</div>'+'</td>'+'</tr>'+'</table>';return html;}
Paginator.prototype.initScrollThumb=function(){this.html.scrollThumb.widthMin='8';this.html.scrollThumb.widthPercent=this.inputData.pagesSpan/this.inputData.pagesTotal*100;this.html.scrollThumb.xPosPageCurrent=(this.inputData.pageCurrent- Math.round(this.inputData.pagesSpan/2))/this.inputData.pagesTotal*this.html.table.offsetWidth;this.html.scrollThumb.xPos=this.html.scrollThumb.xPosPageCurrent;this.html.scrollThumb.xPosMin=0;this.html.scrollThumb.xPosMax;this.html.scrollThumb.widthActual;this.setScrollThumbWidth();}
Paginator.prototype.setScrollThumbWidth=function(){this.html.scrollThumb.style.width=this.html.scrollThumb.widthPercent+"%";this.html.scrollThumb.widthActual=this.html.scrollThumb.offsetWidth;if(this.html.scrollThumb.widthActual<this.html.scrollThumb.widthMin){this.html.scrollThumb.style.width=this.html.scrollThumb.widthMin+'px';}
this.html.scrollThumb.xPosMax=this.html.table.offsetWidth- this.html.scrollThumb.widthActual;}
Paginator.prototype.moveScrollThumb=function(){this.html.scrollThumb.style.left=this.html.scrollThumb.xPos+"px";}
Paginator.prototype.initPageCurrentMark=function(){this.html.pageCurrentMark.widthMin='3';this.html.pageCurrentMark.widthPercent=100/this.inputData.pagesTotal;this.html.pageCurrentMark.widthActual;this.setPageCurrentPointWidth();this.movePageCurrentPoint();}
Paginator.prototype.setPageCurrentPointWidth=function(){this.html.pageCurrentMark.style.width=this.html.pageCurrentMark.widthPercent+'%';this.html.pageCurrentMark.widthActual=this.html.pageCurrentMark.offsetWidth;if(this.html.pageCurrentMark.widthActual<this.html.pageCurrentMark.widthMin){this.html.pageCurrentMark.style.width=this.html.pageCurrentMark.widthMin+'px';}}
Paginator.prototype.movePageCurrentPoint=function(){if(this.html.pageCurrentMark.widthActual<this.html.pageCurrentMark.offsetWidth){this.html.pageCurrentMark.style.left=(this.inputData.pageCurrent- 1)/this.inputData.pagesTotal*this.html.table.offsetWidth- this.html.pageCurrentMark.offsetWidth/2+"px";}else{this.html.pageCurrentMark.style.left=(this.inputData.pageCurrent- 1)/this.inputData.pagesTotal*this.html.table.offsetWidth+"px";}}
Paginator.prototype.initEvents=function(){var _this=this;this.html.scrollThumb.onmousedown=function(e){if(!e)var e=window.event;e.cancelBubble=true;if(e.stopPropagation)e.stopPropagation();var dx=getMousePosition(e).x- this.xPos;document.onmousemove=function(e){if(!e)var e=window.event;_this.html.scrollThumb.xPos=getMousePosition(e).x- dx;_this.moveScrollThumb();_this.drawPages();}
document.onmouseup=function(){document.onmousemove=null;_this.enableSelection();}
_this.disableSelection();}
this.html.scrollBar.onmousedown=function(e){if(!e)var e=window.event;if(matchClass(_this.paginatorBox,'fullsize'))return;_this.html.scrollThumb.xPos=getMousePosition(e).x- getPageX(_this.html.scrollBar)- _this.html.scrollThumb.offsetWidth/2;_this.moveScrollThumb();_this.drawPages();}
addEvent(window,'resize',function(){Paginator.resizePaginator(_this)});}
Paginator.prototype.drawPages=function(){var percentFromLeft=this.html.scrollThumb.xPos/(this.html.table.offsetWidth);var cellFirstValue=Math.round(percentFromLeft*this.inputData.pagesTotal);var html="";if(cellFirstValue<1){cellFirstValue=1;this.html.scrollThumb.xPos=0;this.moveScrollThumb();}else if(cellFirstValue>=this.inputData.pagesTotal- this.inputData.pagesSpan){cellFirstValue=this.inputData.pagesTotal- this.inputData.pagesSpan+ 1;this.html.scrollThumb.xPos=this.html.table.offsetWidth- this.html.scrollThumb.offsetWidth;this.moveScrollThumb();}
for(var i=0;i<this.html.tdsPages.length;i++){var cellCurrentValue=cellFirstValue+ i;if(cellCurrentValue==this.inputData.pageCurrent){html="<span>"+"<strong>"+ cellCurrentValue+"</strong>"+"</span>";}else{html="<span>"+"<a href='#' onclick='redirect"+jenis+"("+cellCurrentValue+");return false'>"+ cellCurrentValue+"</a>"+"</span>";}
this.html.tdsPages[i].innerHTML=html;}}
Paginator.prototype.scrollToPageCurrent=function(){this.html.scrollThumb.xPosPageCurrent=(this.inputData.pageCurrent- Math.round(this.inputData.pagesSpan/2))/this.inputData.pagesTotal*this.html.table.offsetWidth;this.html.scrollThumb.xPos=this.html.scrollThumb.xPosPageCurrent;this.moveScrollThumb();this.drawPages();}
Paginator.prototype.disableSelection=function(){document.onselectstart=function(){return false;}
this.html.scrollThumb.focus();}
Paginator.prototype.enableSelection=function(){document.onselectstart=function(){return true;}}
Paginator.resizePaginator=function(paginatorObj){paginatorObj.setPageCurrentPointWidth();paginatorObj.movePageCurrentPoint();paginatorObj.setScrollThumbWidth();paginatorObj.scrollToPageCurrent();}
function getElementsByClassName(objParentNode,strNodeName,strClassName){var nodes=objParentNode.getElementsByTagName(strNodeName);if(!strClassName){return nodes;}
var nodesWithClassName=[];for(var i=0;i<nodes.length;i++){if(matchClass(nodes[i],strClassName)){nodesWithClassName[nodesWithClassName.length]=nodes[i];}}
return nodesWithClassName;}
function addClass(objNode,strNewClass){replaceClass(objNode,strNewClass,'');}
function removeClass(objNode,strCurrClass){replaceClass(objNode,'',strCurrClass);}
function replaceClass(objNode,strNewClass,strCurrClass){var strOldClass=strNewClass;if(strCurrClass&&strCurrClass.length){strCurrClass=strCurrClass.replace(/\s+(\S)/g,'|$1');if(strOldClass.length)strOldClass+='|';strOldClass+=strCurrClass;}
objNode.className=objNode.className.replace(new RegExp('(^|\\s+)('+ strOldClass+')($|\\s+)','g'),'$1');objNode.className+=((objNode.className.length)?' ':'')+ strNewClass;}
function matchClass(objNode,strCurrClass){return(objNode&&objNode.className.length&&objNode.className.match(new RegExp('(^|\\s+)('+ strCurrClass+')($|\\s+)')));}
function addEvent(objElement,strEventType,ptrEventFunc){if(objElement.addEventListener)
objElement.addEventListener(strEventType,ptrEventFunc,false);else if(objElement.attachEvent)
objElement.attachEvent('on'+ strEventType,ptrEventFunc);}
function removeEvent(objElement,strEventType,ptrEventFunc){if(objElement.removeEventListener)objElement.removeEventListener(strEventType,ptrEventFunc,false);else if(objElement.detachEvent)objElement.detachEvent('on'+ strEventType,ptrEventFunc);}
function getPageY(oElement){var iPosY=oElement.offsetTop;while(oElement.offsetParent!=null){oElement=oElement.offsetParent;iPosY+=oElement.offsetTop;if(oElement.tagName=='BODY')break;}
return iPosY;}
function getPageX(oElement){var iPosX=oElement.offsetLeft;while(oElement.offsetParent!=null){oElement=oElement.offsetParent;iPosX+=oElement.offsetLeft;if(oElement.tagName=='BODY')break;}
return iPosX;}
function getMousePosition(e){if(e.pageX||e.pageY){var posX=e.pageX;var posY=e.pageY;}else if(e.clientX||e.clientY){var posX=e.clientX+ document.body.scrollLeft+ document.documentElement.scrollLeft;var posY=e.clientY+ document.body.scrollTop+ document.documentElement.scrollTop;}
return{x:posX,y:posY}}

//]]>
</script>

<script type='text/javascript'>

var home_page="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;

</script>

<script type='text/javascript'>
//<![CDATA[

var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){maksimal=parseInt(banyakdata/postperpage)+1;var blogPager=document.getElementById("blog-pager");html='<div class="paginator" id="paginator1"></div>';if(blogPager){blogPager.innerHTML=html}pag1=new Paginator('paginator1',maksimal,numshowpage,nomerhal,"")}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){if(numberpage!=1){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=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");nBody.appendChild(newInclude)}else{alamat=home_page;location.href=alamat}}function redirectlabel(numberpage){if(numberpage!=1){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}else{alamat=home_page+"search/label/"+lblname1+"?&max-results="+postperpage;location.href=alamat}}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat=home_page+"search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat=home_page+"search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}

//]]>
</script>

</b:if>
</b:if>