Cara Memasang Page Number Navigasi Pada Blog

Cara Memasang Page Number Navigasi Pada Blog - Fungsi utama page number ialah untuk meperlihatkan banyaknya laman melalui tombol link berupa angka, Bisa diartikan tombol tersebut merupakan nomor halaman yang terdapat dalam sebuah buku. Pengunjung yang mengunjungi blog anda memerlukan penunjuk jalan untuk bisa berselancar lebih jauh di dalam blog anda. Sudah menjadi kewajiban kita bukan dalam memberikan fasilitas sebaik mungkin terhadap pengunjung? dibalik usaha kita tersebut saya jamin tidak ada yang sia-sia kok.

Untuk memasang navigasi ini saya anjurkan anda telah banyak memiliki postingan karena memang biasanya page number dibutuhkan untuk melanjutkan atau kembali ke artikel sebelumnya dan sangat jarang saya menjumpai sebuah postingan memasang navigasi ini hanya dengan dua halaman saja. Maka dari itu tidak berniat untuk menggurui sama sekali ada baiknya anda memfokuskan kuantitas postingan anda terlebih dahulu.

Pada umumnya page number ini dipasang pada halaman homepage atau serachpage namun tidak jarang pula dijumpai pada postingan biasa. Mengingat kondisi dan jenis template yang berbeda saya ingin menawarkan anda dua cara dalam pemasangan navigasi ini mari kita lihat mana yang cocok untuk template anda.

Cara Memasang Page Number Navigasi Pada Blog

Kita mulai dari trik yang paling mudah terlebih dahulu.

1. Login ke akun Dasbor Blogger anda.

2. Pilih Laman Tata Letak.

3. Tambahkan widget "Add widget".

4. Klik HTML/Javascript.

5. Letakkan kodenya.

6. Simpan Setelan Tata Letak dan lihat hasilnya.

Mudah bukan? Nah pilihan kedua berikutnya bisa anda pilih jika template yang anda pakai bukan berasal dari blogspot melainkan dari anda sendiri karena biasanya template yang kita pasang tidak mendukung sepenuhnya pada pengaturan Tata Letak jadi mau tidak mau kita sedikit harus turun tangan ke editan template. Tidak usah cemas cara kedua juga mudah kok Come On Lets Do Its!

1. Sekarang saya anggap telah masuk ke Dasbor Blogger anda.

2. Selanjutnya pilih laman Edit Template.

3. Carikan kode ]]></b:skin>.

4. Letakkan kode berikut tepat diatas kode tersebut.

5. Langkah selanjutnya carilah kode </body>
6. Letakkan kode dibawah tepat diatasnya.

<b:if cond='data:blog.pageType != "item"'>
<script type='text/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 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){
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>
</b:if>

7. Simpan setelan Template dan lihat hasilnya.

Sekian Tutorial singkat kali ini, jika ada yang ingin ditanyakan silahkan poskan di komentar Mudah-mudahan saya siap membantu. Tinggalkan jejak kalau anda berhasil ya sob..

Semoga Bermanfaat
Thank's

Pages

Cara Memasang Page Number Navigasi Pada Blog

Unknown

Apa tanggapan Anda untuk "Cara Memasang Page Number Navigasi Pada Blog"

Post a Comment

Cara Memasang Page Number Navigasi Pada Blog

Postingan terkait:

Unknown

Apa tanggapan Anda untuk "Cara Memasang Page Number Navigasi Pada Blog"

Post a Comment