Cara Membuat Page Navigasi / Nomor Halaman Posting Blog

Navigasi dalam blog adalah teks untuk menampilkan halaman sebelum atau sesudahnya dari halaman artikel yang sedang dibaca/diakses. Pada tampilan default template gratis Blogger Blogspot halaman navigasi dikenal dengan teks Home, Posting Lebih Baru, Beranda dan Posting Lama.

Gambar: Tampilan Page Navigasi Website-Blog

Trik yang disharing pada posting ini untuk merubah tampilan default teks Posting Lebih Baru, Beranda dan Posting Lama ditampilkan dengan nomor halaman. Dengan tips ini halaman posting blog terdapat nomor halaman layaknya halaman buku, surat kabar, majalah dan lain-lain.

Page navigation atau halaman Navigasi yang dihasilkam menggunakan kode ini disamping terdapat teks Previous (sebelumnya) dan Next (selanjutnya) juga terdapat nomor halaman posting. Salah satu keuntungan memakai page navigasi setidaknya akan memudahkan pengunjung mengetahui halaman posting yang sedang dikunjungnya dari beberapa halaman yang ada. Untuk lebih jelasnya perhatikan gambar di atas.

Cara membuat Page Navigation (nomor halaman) posting blog dapat dilakukan dengan langkah-langkah sebagai berikut:

Sign in di blog
Klick Template
Backup Template jika diperlukan
Klick Edit HTML
Cari kode ]]></b:skin>
Tempatkan kode dibawah ini pas diatas kode ]]></b:skin>
Klick Simpan untuk menyimpan perubahan
Klick Tutup untuk keluar dari halaman template atau kembali pada halaman sebelumnya

Ini kode yang disimpan diatas kode ]]></b:skin>

Setelah melakukan langkah diatas selanjutnya menempatkan kode kedua yang merupakan kode pendukung tools Page Navigasi. Langkah membuatnya sebagai berikut:

Klick Tata Letak
Klick Add Gadget/Tambah gadget
Klick HTML/JavaScript
Copy lalu paste kode berikut ini pada Gadget HTML/JavaScript
Klick Simpan untuk menyimpan perubahan

Ini kode yang ditempatkan pada gadget HTML/JavaScript

var home_page_url = location.href;

var pageCount=8;
var displayPageNum=3;
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  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  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 home_page = "/";
if (thisUrl.indexOf("?q=")==-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>

Catatan: Ganti angka pada kode:
var pageCount=8; sesuai jumlah posting diinginkan

Setelah melakukan langkah diatas kemudian gadget HTML/JavaScriptnya pindah pada bagian bawah gadget Posting Blog. Cara menambah dan memindahkan Gadget dibawah halaman posting dapat membaca artikel ini.

Jika melakukan langkah-langkah di atas dengan benar tool page navigasi akan berfungsi sebagaimana mestinya seperti fungsi teks Home, Posting Lebih Baru, Beranda dan Posting Lama.

Sumber: ronamasae.blogspot.com

Artikel lainnya

Cara Tepat Terbitkan Posting Blog Terjadwal
Cara Membatasi Jumlah Komentar Visitor Blog Pada Halaman Posting Tertentu
Kelebihan Berkomentar Menggunakan Profil Blogger
Cara Membuat Twitter Button sendiri Untuk Dipasang Dalam Blog-Website
Cara Membuat Nomor Urut otomatis Artikel Pada Gadget Entri Populer
Sedikitnya 12 Perbedaan Tampilan Antarmuka Blogger Baru Dengan Antarmuka Blogger Lama