Membuat Page Number Berurut

Kali ini qta akan coba buat Page Navigasi Halaman Berurut itu lho yang biasanya ada tulisan Halaman 1 2 3 yang kayak di bagian bawah google or yang ada dibawah blog q ne....

oke dari pada ribet ngejelasinnya langsung ja, liat contohnya:

cara buatnya kayak gini:

1. Login ke account blogger dan tujulah ke tab Layout, kemudian klik link "Add Page Element".
2. Pilih HTML/JAVASCRIPT dalam window Page Element tersebut.
3. Isikan kode berikut :


<style>
.showpageArea {font-size: 11px; <span style="color: rgb(255, 0, 0);">width:500px</span>;background: url(<span style="color: rgb(255, 0, 0);">http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg</span>) no-repeat left top; padding: 10px; color:#003366;text-align:center;
}
.showpageArea a {
color:<span style="color: rgb(255, 0, 0);">#0F0</span>;
<span class="IL_AD" id="IL_AD4">text-decoration</span>:underline;
}
.showpageNum a {

text-decoration:none;
<span style="color: rgb(255, 0, 0);">color:#0F0;</span> <span style="color: rgb(255, 0, 0);">border:1px solid #FFF;</span>
margin:0 10px;
padding:0 5px 0 8px;
}
.showpageNum a:hover {
<span style="color: rgb(255, 0, 0);">color:#FE8314;</span> <span style="color: rgb(255, 0, 0);">border:1px solid #0071A5;</span>
background-color:#FFF;
}
.showpagePoint {
<span style="color: rgb(255, 0, 0);">color:#FE8314;</span>
margin:0 8px 0 4px;
}
.showpage a {
text-decoration:none;
color:#FFF;
padding:0 2px 0 4px;
}
.showpage a:hover {
<span style="color: rgb(255, 0, 0);">color:#FE8314;</span>
text-decoration:underline;
} .showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#cc0000;
}
</style>






<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.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=1;
var displayPageNum=2;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';


var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&amp;max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.<span class="IL_AD" id="IL_AD5">published</span>.$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&amp;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&amp;max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) &amp;&amp; p<(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; 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 += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></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 &amp;&amp; p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) &amp;&amp; p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea">




<span class="showpage"> Total '+(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&amp;&amp;pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999" type="text/javascript">
</script>

<div style="color: black; display: none; font-size: 10px; margin-top: 15px; text-align: right;">
<a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a>
</div>
</div>
</pre>
Untuk Informasi anda script yang bercetak merah ditas dapat anda ubah dan anda ganti sesuai dengan kebutuhan dan keinginan anda sendiri...
Setelah anda memasukkan kode tersebut maka letakkanlah page element itu di bawah main post blog anda... dan selesai.....
4. Setelah javascript tersebut ditambahkan, pindahkan (drag n drop) widget tersebut kebawah widget Post kamu.

5. Jangan lupa untuk save template / layout untuk menyimpan perubahan yang telah dilakukan.

Selesai deh