Sebelumnya anda sudah tahu donk apa itu paging? Paging ini sebenarnya fungsinya untuk menampilkan halaman pada blog atau website untuk artikel-artikel yang lama (Kurang lebihnya sih gitu), jadi tidak mungkin donk semua artikel ditampilkan di halaman utama blog, itu malah akan jadi berat ketika pengunjung ke halaman utama blog anda maka di buatlah cara paging ini.
Bagaimana membuatnya? Langsung saja ikuti caranya dibawah ini:
- Login ke akun blogger anda.
- Klik rancangan.
- Masuk pada Edit HTML.
- Lalu cari kode berikut ]]></b:skin> untuk lebih cepatnya tekan Ctrl + F
- Setelah ketemu copy paste kode berikut sebelum kode di atas.
- .showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px; } .showpageArea a {border: 1px solid #505050; color: #000000;font-weight:normal; padding: 3px 6px !important; padding: 1px 4px ;margin:0px 4px; text-decoration: none; } .showpageArea a:hover { font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; } .showpageNum a {border: 1px solid #505050; color: #000000;font-weight:normal; padding: 3px 6px !important; padding: 1px 4px ;margin:0px 4px; text-decoration: none; } .showpageNum a:hover { font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; } .showpagePoint {font-size:11px; padding: 2px 4px 2px 4px; margin: 2px; font-weight: bold; border: 1px solid #333; color: #fff; background-color: #000000; } .showpage a:hover {font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; } .showpageNum a:link,.showpage a:link { font-size:11px; padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #0066cc; color: #0066cc; background-color: #FFFFFF;} .showpageNum a:hover {font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; }
- Lalu cari kode </b:section>.
- Setelah ketemu copy paste kode berikut setelah kode di atas.
- <script type='text/javascript'>
- var home_page_url = location.href;
- var pageCount=10;
- var displayPageNum=6;
- 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 ='';
- for(var i=0, post; post = json.feed.entry[i]; i++) {
- var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
- timestamp = encodeURIComponent(timestamp1);
- var title = post.title.$t;
- 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+'&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){
- 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;
- for(var i=0, post; post = json.feed.entry[i]; i++) {
- var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
- timestamp = encodeURIComponent(timestamp1);
- var title = post.title.$t;
- if(title!=''){
- if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
- if(thisUrl.indexOf(timestamp)!=-1 ){
- thisNum = postNum;
- }
- if(title!='') postNum++;
- htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&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){
- 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>
- Lalu simpan template anda
Gimana, mudah bukan?? Selamat mencoba.
.png "English"){kind=small}
No comments:
Post a Comment