Jika jumlah postingan sudah melebihi maka pada bagian bawah akan muncul halaman navigasi, yaitu post lebih lama (older post) dan post lebih baru (newer post). Sehingga untuk berpidah dari halaman ke halaman lainnya akan sedikit mengalami kesulitan.
Karena Hal tersebut disini saya akan memperlihatkan cara untuk menambahkan atau mengganti dengan Halaman Navigasi Bernomor ( Numbered Page Navigation ) untuk memudahkan pengunjung untuk berpindah dari halaman ke halaman lain, juga untuk mempercantik tampilan halaman. Ada 7 model yang saya sediakan kalian bisa pilih sesuai selera masing masing, jika kalian mengerti mengenai pemrograman web kalian bisa custom sendiri tampilannya.
Menambahkan Navigasi Halaman Bernomor :
- Menambahkan CSS ( Untuk Tampilannya )
- Menambahkan Script ( Untuk Fungsi Navigasinya )
- Setting / Konfigurasi Fungsi Navigasi
a.
Masuk ke Dashboard ==> Template ==> Edit HTML
b.
Cari dan temukan tag kode seperti dibawah.
]]></b:skin>Untuk lebih mudahnya gunakan fungsi pencarian dengan menekan CTRL + F
c.
Setelah ketemu tempel kode CSS dari salah satu dari 7 model yang ada di bawah, pilih sesuai selera masing - masing.
Tempel tepat diatas tag " ]]></b:skin> ".
Numbered Page Navigation on GRAY
#blog-pager{clear:both;margin:30px auto;text-align:center; padding:
7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px
7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid
#E9E9E9;}
.displaypageNum a:hover,.showpage
a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color:
#000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color:
#888;}
#blog-pager .pages{border:none;}Numbered Page Navigation Black with Orange Current Page
#blog-pager{clear:both;margin:30px auto;text-align:center; padding:
7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px
10px;margin-right:5px; color: #F4F4F4;
background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50,
50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50,
0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover,
.pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color:
#000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px
rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50,
0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}Numbered Page Navigation Dark with Blue Current Page
#blog-pager{clear:both;margin:30px auto; padding: 7px;
text-align:center;font-size: 11px;background-image:
-webkit-gradient(linear,left bottom,left top,color-stop(0,
#000000),color-stop(1, #292929));background-image:
-o-linear-gradient(top, #000000 0%, #292929 100%);background-image:
-moz-linear-gradient(top, #000000 0%, #292929 100%);background-image:
-webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image:
-ms-linear-gradient(top, #000000 0%, #292929 100%);background-image:
linear-gradient(to top, #000000 0%, #292929 100%); padding:
6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius:
3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px
10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image:
-webkit-gradient(linear,left bottom,left top,color-stop(0,
#59A2CF),color-stop(1, #D9EAFF));background-image:
-o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image:
-moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image:
-webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image:
-ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image:
linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration:
none;color: #000;-webkit-border-radius: 3px;-moz-border-radius:
3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link,
.blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color:
#fff;}
#blog-pager .pages{border:none;background: none;}Numbered Page Navigation Gray with Blue Current Page
#blog-pager{clear:both;margin:30px auto;text-align:center; padding:
7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px
12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover,
.pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color:
#fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}Numbered Page Navigation Green with Orange and Pink on hover
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;
}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px
12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover,
.pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color:
#D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}Numbered Page Navigation Orange with Red Current Page
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;
}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px
12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover,
.pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color:
#fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;} Numbered Page Navigation Gray wit Red Current Page
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
Note : Jika ingin menghilangkan tombol "first" dan "last" tambahkan baris kode berikut dibawah kode CSS.
.firstpage, .lastpage {display: none;}2. Menambahkan Script ( Untuk Fungsi Navigasinya )
a.
Cari dan temukan ( CTRL + F ) tag kode berikut :
</body>b.
Tambahkan Script Kode Berikut tepat diatas Kode Tadi :
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=3;
var numPages=3;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}
pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}
if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}
if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}
if(pageStart>2){html+=' ... '}
for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}
if(pageEnd<lastPageNo-1){html+='...'}
if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}
var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}
if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}
var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}
if(pageArea&&pageArea.length>0){html=''}
if(blogPager){blogPager.innerHTML=html}}
function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}
function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=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){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}
if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}
function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=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");nameBody.appendChild(newInclude)}
function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
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(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}
location.href=pAddress}
/*]]>*/
</script>
</b:if>
</b:if>
Sampai Proses ini halaman navigasi bernomor sudah bisa digunakan, jika menginginkan konfigurasi lain dari defaultnya silahkan lihat bagaimana cara mengkonfigurasi seperti langkah selanjutnya.
3. Setting / Konfigurasi Fungsi Navigasi
perPage: 7,
numPages: 6,
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';- perPage : Berapa banyak postingan yang akan di tampilkan di setiap halaman ( contoh 7 ). Jumlah ini harus sama dengan jumlah postingan yang ditampilkan dihalaman utama.
- numPage : Berapa banyak halaman yang akan ditampilkan di navigasi ( contoh 6 ).
- Untuk mengganti kata "First", "Last", "« Previous", "Next »" pada naviasi bar cukup ketik kata yang diinginkan didalam kutip.
Secara default blogspot akan menampilkan 20 post pada halaman label, sehingga kita perlu mengubah default tersebut sesuai yang kita inginkan ( disesuaikan dengan perPage: 7). Sehingga jika widget label diklik jumlah post yang akan ditampilkan tidak 20 lagi (contoh 7 postingan).
Cari setiap potongan tag kode berikut :
expr:href='data:label.url'Ganti dengan tag kode berikut :
expr:href='data:label.url + "?&max-results=7"'Langkah terakhir adalah Klik tombol Save Template untu menyimpan settingan.
Jangan lupa sebelum mengedit Template sebaiknya backup dulu untuk menghindari hal-hal yang tidak diinginkan.
sumber : helplogger.blogspot.com
Posts
2 komentar:
Mkasih mas infonya sangat membantu sekali.
Hey there just wanted to give you a quick heads up and let you know a few of the images aren't loading correctly. I'm not sure why but I think its a linking issue. I've tried it in two different browsers and both show the same outcome. sign in to gmail
Post a Comment