Membuat Page Number Navigasi Halaman Blog

Tips tentang Membuat Page Number Navigasi Halaman halaman Blogspot, dimana satu halaman ini akan memuat semua artikel post sesuai dengan label nya masing-masing.

Dimana tips atau page navigasi menjadi hal yang sifatnya penting dan tidak penting, dan akan menjadi penting apa bila muatan artikel pos suatu blog sudah banyak dan sudah di kelompokan dari judul label nya, navigasi ini di fungsikan agar tampilan blok bisa lebih ringkas, sehingga tidak menjuntai berkepanjangan ke bawah, halaman akan tersusun rapi dan lebih mudah untuk dicari artikel apa aja yang ada pada blog tersebut.

Ada beberapa cara untuk kita membuat page navigasi halaman pada blogspot

Untuk pasang page number navigasi Ada Dua Cara yaitu Pertama dengan edit template HTML, Kedua dan menambah gadget HTML/javascipt.

I. Cara Pertama

Kita Melalui edit template HTML adalah kita harus masuk ke tema dan edit HTML kerangka log dan bertemu  jutaan kode scipt disana.

1. Pertama :
Kita menuju ke Setingan/Setelan > setingan, komentar dan berbagi. atur jumlah post artikel yang akan ditampil diberanda.

2. Kedua :
Kemudian Kita masuk ke Template, edit HTML.

3. Ketiga :
Mencari kode script </body> dan pasang script page namber di sana di atas nya seperti nampak pada gambar di bawah.

Seboga saja Script di bawah ini berfungsi sesuai tema template blog anda, karena memang ada beberapa tema blog yang tidak mendukung untuk sauatu bentuk script tertentu.

<!--Navigasi Nomor Starts-->
<script type='text/javascript'>
var postperpage=4;
var numshowpage=2;
var upPageWord = &#39;Prev&#39;;
var downPageWord = &#39;Next&#39;;
var urlactivepage=location.href;
var home_page=&quot;/&quot;;
</script>
<script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/pagination_duarupa_blogspot_com.js"></script>
<!--Page Navigation Ends -->

Keterangan :
var postperpage= 4 : 4 yang artinya jumlah artikel Pos yang kita tampilkan di beranda, sesuaikan dengan langkah Pertama diatas.
var numshowpage= 8 : kotak tombol page navigasi yang di tampilan
PageWord = 'Prev&#39 downPageWord = 'Next&#39 : di gunakan untuk kembali dan page selanjut nya.

4. Keempat :
Mencari kode ]]></b:skin> atau </style> dan pasang script style page namber diatasnya, lihat gambar di bawah :

Dan berikut di bawah adalah cript style nya :

Tampilannya style nvigasinya sederhana seperti di bawah : Untuk menyesuikan dengan blog atau style yang kita sukai ya, kita harus berjuang bersama kode-kode script diatas mencoba dan mencoba sampai terbentuk style dan warna seperti yang kita harapkan, itu apa bila kamu mengakui sebagai Blogger sejati.

<!-- STAR PAGE NAVIGASI -->
.showpageArea a { text-decoration:underline;}
.showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px;}
.showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc;}
.showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px;}
.showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0;}
.showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px;}
.showpage a:hover { text-decoration:none;}
.showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333;}
<!-- END PAGE NAVIGASI -->

5. Kelima :

Harap harap cemas, minum kopi nya blasss... page number nya sudah kelihatan apa belum, kalo belum muncul bisa di coba ulang atau dengan mengganti beberapa model script page number yang bertebaran di balogger.

Namun apa bila anda menggunakan scipt yang saya gunakan dan ikuti langkah di atas seharusnya muncul icon page navigasi pada halaman beranda Anda.
Jangan cepat nyerah, terus berjuang yah.

Tidak perlu merubah kode script  'data:label.url' menjadi: 'data:label.url + &quot;?&amp;max-results=4&quot;'
Karena langkah tersebut sudah kita lakukan pada langkah pertama tadi, jika anda tidak percaya silahkan cek dengan dengan ctrl+f masukan kode  'data:label.url' pasti tidak akan muncul, namun akan muncul apa bila kita masukan kode yang ini : 'data:label.url + &quot;?&amp;max-results=4&quot;'

Dilanjut ke Cara Ke Dua --- >

II. Cara Ke Dua

Cara Kedua : adalah Dengan menambah Gadget  yang teredia diblog, yaitu Gadget HTML/javascipt.

1. Pertama :
Anda menuju tata letak blog silahkan pilih tombil + text biru tambah Gadget,

2. Kedua :
Pilih Gadget HTML/javascipt. boleh menulis judul tidak di isipun tidak masalah, kemudian lalukan save, dan pindahkan gadget tersebut di pada deretan layout Utamana, bisa di bawah atau di atas gadget posting blog.

Sementara ini di bawah adalah kode script nya silahkan masukan ke kotak Javascript kamudian save. lakukan beberapa pratinjau untuk meihat hasil dari scipt nya.

Berikut Kode script nya, Scriptnya Agak panjang karena script Style dan js nya di gabung :

<!-- START PAGE STYLE -->
<style>
.showpageArea {
padding:2px;
font-size:15px;
border: 0px solid #333;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 0px solid #ffffff;
color: #cc0000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: shadow;
}
.showpageArea a:hover {
font-size:15px;
border: 0px solid #333;
color: #000000;
background-color: #FEFF5F;
}

.showpageNum a {border: 0px solid #ffffff;
color: #00ff00;font-weight:blod;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-shadow: 1px 1px 1px red;

}
.showpageNum a:hover {
font-size:15px;
border: 0px solid #333;
color: #000000;
background-color: #000000;
}
.showpagePoint {font-size:15px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #0000;
color: #ff000;
background-color: none;
}


.showpageNum a:link,.showpage a:link {
font-size:15px;
padding: 2px 4px 2px 4px;
margin: 2px;
border: 0px solid #0066cc;
background-color: none;}

.showpageNum a:hover {font-size:15px;color: #00ff09;
background-color: #000000;
text-shadow: 1px 1px 1px #0000ff;
}
</style>

<!-- START PAGE VIEW -->

<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=4;
var displayPageNum=8;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Prev';
var downPageWord ='Next';

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

<!-- START PAGE NAVIGASI SCRIPT -->
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$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&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&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){
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 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

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

html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

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&&pageArea.length>0){
html ='';
}

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

}
</script>

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

Keterangan nya sama pada tahap pertama :
var pageCount=4;
var displayPageNum=8;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Prev';
var downPageWord ='Next';

Style tombol page navigasinya seperti ini :

Namun scipt di atas sudah saya sesuikan dengan style pada blog saya, untuk menyesuikan lagi dengan style atau ke inginan anda yaah,.. anda harus berjuang berspekulasi dengan kode-kode script di atas merubah warna sesuai dengan blog anda. Jangan pantang penyerah, perjuangan mahal harganya dari sekedar mutlak copas 100% dari script-script style yang tersedia dan bertebaran di blog.

Langkah Tambahan............:

Kenapa ada langkah Tambahan ? :

Karena dari dua cara di atas masing-masing terdapat kelemahan.
Cara Pertama dia hanya berfungsi pada Halaman Beranda Saja, Tidak pada halaman yang berkategorikan Lebel post. Sementara
Cara Kedua dia hanya berfungsi pada Halaman post berkategorikan Label dan tidak berfungsi pada Beranda. Namun juka Style page nvigasinya di gunakan dua-duanya tampilannya pun akan bentrok tidak bagus dan ngacak-acak.

Namun kedua cara di atas normal dan dapat di gunakan semua, tergantung kita akan pilih yang mana, cukup pada beranda saja tau cukup pada halaman kategori berlabel, sesuaikan dengan jenis style blog kita.

Sementara untuk menggabungkan keduanya cukup hilangkan Langkah Ketiga pada Cara Pertama Script style di sana di hilangkan saja.

Ya untuk tampilan tombol navigasinya anda bisa melihat pada blog saya ini, cukup sederhana belum bagus " maklum masih perlu banyak belajar", warna bentuk style nya juga masih dalam proses, yang penting sudah berfungsi.

NB :

Ingat yah, menghadapi kode script dalam tahap belajar tidak semudah seperti apa yang tertulis di semua artikel blog-blog, walaupun Jika kita sengaja Menulis pun juga tidak Mudah.
Jangan Patah semangat apabila pada saat memasang dan melihat hasil pratinjau tidak seperti apa yang kita harapkan, bankkan mungkin sama sekali tidak adanya penampakan samasekali dari yang di harapkan.
Teruslah berjuah, tidak ada yang tidak berhasil apa bila kita terus berusaha, Niat & Keinginan adalah Modah Utama.