X-MATY Blogger's Navigasi Halaman Bernomor/Paging

Navigasi Halaman Bernomor/Paging

Setelah lama saya mencari akhirnya dapat juga, jika biasanya pada halaman pada blog sobat hanya ada older post ternyata itu bisa di ganti dengan halaman bernomor seperti gambar berikut:

penasaran bagaiman cara membuatnya, langsung aja :
yang paling penting anda harus login dulu
2. masuk ke tata letak (layout) >> element halaman
3. tambah gedget >> pilih HTML/java script
4. copas dan code berikut:

<style><br /> .showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;<br /> }<br /> .showpageArea a {border: 1px solid #505050;<br /> color: #000000;font-weight:normal;<br /> padding: 3px 6px !important;<br /> padding: 1px 4px ;margin:0px 4px;<br /> text-decoration: none;<br /> }<br /> .showpageArea a:hover {<br /> font-size:11px;<br /> border: 1px solid #333;<br /> color: #000000;<br /> background-color: #FFFFFF;<br /> }<br /> <br /> .showpageNum a {border: 1px solid #505050;<br /> color: #000000;font-weight:normal;<br /> padding: 3px 6px !important;<br /> padding: 1px 4px ;margin:0px 4px;<br /> text-decoration: none;<br /> <br /> }<br /> .showpageNum a:hover {<br /> font-size:11px;<br /> border: 1px solid #333;<br /> color: #000000;<br /> background-color: #FFFFFF;<br /> <br /> }<br /> .showpagePoint {font-size:11px;<br /> padding: 2px 4px 2px 4px;<br /> margin: 2px;<br /> font-weight: bold;<br /> border: 1px solid #333;<br /> color: #fff;<br /> background-color: #000000;<br /> <br /> <br /> }<br /> <br /> .showpage a:hover {font-size:11px;<br /> border: 1px solid #333;<br /> color: #000000;<br /> background-color: #FFFFFF;<br /> <br /> }<br /> .showpageNum a:link,.showpage a:link {<br /> font-size:11px;<br /> padding: 2px 4px 2px 4px;<br /> margin: 2px;<br /> text-decoration: none;<br /> border: 1px solid #0066cc;<br /> color: #0066cc;<br /> background-color: #FFFFFF;}<br /> <br /> .showpageNum a:hover {font-size:11px;<br /> border: 1px solid #333;<br /> color: #000000;<br /> background-color: #FFFFFF;<br /> }<br /> </style><br /> <br /> <br /> <br /> <script type="text/javascript"><br /> <br /> function showpageCount(json) {<br /> var thisUrl = location.href;<br /> var htmlMap = new Array();<br /> var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";<br /> var isLablePage = thisUrl.indexOf("/search/label/")!=-1;<br /> var isPage = thisUrl.indexOf("/search?updated")!=-1;<br /> var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";<br /> thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;<br /> var thisNum = 1;<br /> var postNum=1;<br /> var itemCount = 0;<br /> var fFlag = 0;<br /> var eFlag = 0;<br /> var html= '';<br /> var upPageHtml ='';<br /> var downPageHtml ='';<br /> <br /> <br /> var pageCount=5;<br /> var displayPageNum=3;<br /> var firstPageWord = 'First';<br /> var endPageWord = 'Last';<br /> var upPageWord ='Previous';<br /> var downPageWord ='Next';<br /> <br /> <br /> <br /> var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';<br /> <br /> for(var i=0, post; post = json.feed.entry[i]; i++) {<br /> var timestamp = post.published.$t.substr(0,10);<br /> var title = post.title.$t;<br /> if(isLablePage){<br /> if(title!=''){<br /> if(post.category){<br /> for(var c=0, post_category; post_category = post.category[c]; c++) {<br /> if(encodeURIComponent(post_category.term)==thisLable){<br /> if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br /> if(thisUrl.indexOf(timestamp)!=-1 ){<br /> thisNum = postNum;<br /> }<br /> <br /> postNum++;<br /> htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;<br /> }<br /> }<br /> }<br /> }//end if(post.category){<br /> <br /> itemCount++;<br /> }<br /> <br /> }else{<br /> if(title!=''){<br /> if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br /> if(thisUrl.indexOf(timestamp)!=-1 ){<br /> thisNum = postNum;<br /> }<br /> <br /> if(title!='') postNum++;<br /> htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;<br /> }<br /> }<br /> itemCount++;<br /> }<br /> }<br /> <br /> for(var p =0;p< htmlMap.length;p++){<br /> if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br /> if(fFlag ==0 && p == thisNum-2){<br /> if(thisNum==2){<br /> if(isLablePage){<br /> upPageHtml = labelHtml + upPageWord +'</a></span>';<br /> }else{<br /> upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';<br /> }<br /> }else{<br /> upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';<br /> }<br /> <br /> fFlag++;<br /> }<br /> <br /> if(p==(thisNum-1)){<br /> html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';<br /> }else{<br /> if(p==0){<br /> if(isLablePage){<br /> html = labelHtml+'1</a></span>';<br /> }else{<br /> html += '<span class="showpageNum"><a href="/">1</a></span>';<br /> }<br /> }else{<br /> html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';<br /> }<br /> }<br /> <br /> if(eFlag ==0 && p == thisNum){<br /> downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';<br /> eFlag++;<br /> }<br /> }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br /> }//end for(var p =0;p< htmlMap.length;p++){<br /> <br /> if(thisNum>1){<br /> if(!isLablePage){<br /> html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';<br /> }else{<br /> html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';<br /> }<br /> }<br /> <br /> html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;<br /> <br /> if(thisNum<(postNum-1)){<br /> html += downPageHtml;<br /> html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';<br /> }<br /> <br /> if(postNum==1) postNum++;<br /> html += '</div>';<br /> <br /> if(isPage || isFirstPage || isLablePage){<br /> var pageArea = document.getElementsByName("pageArea");<br /> var blogPager = document.getElementById("blog-pager");<br /> <br /> if(postNum <= 2){<br /> html ='';<br /> }<br /> <br /> for(var p =0;p< pageArea.length;p++){<br /> pageArea[p].innerHTML = html;<br /> }<br /> <br /> if(pageArea&&pageArea.length>0){<br /> html ='';<br /> }<br /> <br /> if(blogPager){<br /> blogPager.innerHTML = html;<br /> }<br /> }<br /> <br /> }<br /> </script><br /> <br /> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script><br />

5. text yang First Last Previous Nextbisa anda ganti dengan tetx seperti: first menjadi home,

next menjadi lanjut, Previous menjadi kembali last menjadi terakhir

6. letakkan di bawah posting blog seperti gambar berikut:

7. simpan template, lihat hasilnya . . .

sumber:http://devit1104.blogspot.com

EmoticonEmoticon

Langganan: Posting Komentar (Atom)