Cara Membuat Navigasi Halaman Bernomor

Navigasi halaman sebenarnya udah disediakan oleh pihak blogger dalam template Framework (Default) mereka. Bentuknya berupa link Older Post, Newer Post dan Home. Tapi kalo kalian ingin mengganti tampilan sederhana tersebut dengan yang lebih elegan, navigasi dalam bentuk nomor ini bisa menjadi alternatif buat blog kalian.

• Login ke Account (dashboard) blog kalian.
• Masuk ke menu Rancangan (design), kemudian pilih Edit HTML.
• Cari kode ]]></b:skin> , dan ganti kode tersebut dengan kode berikut :

.showpageArea{padding:15px;background:#fff}
.showpageArea a{-moz-border-radius:5px;text-decoration:none}
.showpageNum a{font-weight:bold;color:#0080ff;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px solid #91bde6;background:#fff;}
.showpageNum a:hover{color:#fff;background:-moz-linear-gradient(top,#cee5fc,#0080ff);text-shadow:0px 2px 2px #00a;border:1px solid #369afc;}
.showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #369afc;background:-moz-linear-gradient(top,#cee5fc,#0080ff);-moz-border-radius:5px;}
.totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #91bde6;-moz-border-radius:5px;}
.showpage a{padding:1px 8px; margin:0 2px;border:1px solid #91bde6;background:#fff;color:#0080ff;text-shadow:0px 2px 4px #999;padding-left:10px}
.showpage a:hover{background:-moz-linear-gradient(top,#cee5fc,#0080ff);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}
#showlastpage a{font-weight:bold}
]]></b:skin>

• Save template.

Berikutnya, kita akan memasukkan kode script pada bagian html template. Disini ada dua cara dalam membuatnya.

1. Menggunakan Inline Script.

--> Cari kode </body> pada kode template kalian, dan ganti kode tersebut dengan kode dibawah ini :

<div>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("blog-pager").style.display="inline";var canvas="";function writescript(a){document.write('<script src="/feeds/posts/summary?alt=json-in-script&callback='+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}function writelabelscript(a){document.write('<script src="/feeds/posts/summary/-/'+label+"?alt=json-in-script&callback="+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}var url=location.href,total;var already=new Boolean(false);var timestamps=new Array();if(url.indexOf("/search/label/")!=-1){if(url.indexOf("?updated-max")!=-1){var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?updated-max"))}else{var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?&max"))}}if(url.indexOf("#Page")!=-1){var currentpagenum=parseInt(url.substring(url.indexOf("#Page")+5,url.length))}else{var currentpagenum=1}var startindex=(currentpagenum-displayPageNum-1>0)?((currentpagenum-displayPageNum-2)*pageCount+1):1;var total=(2*displayPageNum+1)*pageCount;if(url.indexOf("?q=")==-1&&url.indexOf(".html")==-1){if(url.indexOf("/search/label/")==-1){var islabel=new Boolean(false);do{writescript("buildtimestamps");startindex+=100}while(total>startindex)}else{var islabel=new Boolean(true);do{writelabelscript("buildtimestamps");startindex+=100}while(total>startindex)}document.write('<script type="text/javascript">printnav();<\/script>')}function buildtimestamps(b){if(already==false){total=parseInt(b.feed.openSearch$totalResults.$t)}init=pageCount-1;for(var a=init;post=b.feed.entry[a];a+=pageCount){timestamps[timestamps.length]=encodeURIComponent(post.published.$t.substring(0,19)+post.published.$t.substring(23,29))}}function printlast(b){var a=encodeURIComponent(b.feed.entry[0].published.$t.substring(0,19)+b.feed.entry[0].published.$t.substring(23,29));if(islabel==false){link="search?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}else{link="/search/label/"+label+"?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}document.getElementById("showlastpage").innerHTML='<a href="'+link+'">'+maxpages+"</a>"}function printnav(){maxpages=Math.ceil(total/pageCount);canvas=canvas+'<span class="totalpages">Page ['+maxpages+"]</span>";var a=((currentpagenum+displayPageNum)<maxpages)?currentpagenum+displayPageNum:maxpages;var c=((currentpagenum-displayPageNum)>1)?currentpagenum-displayPageNum:1;if(currentpagenum>1){if(islabel==false){if(currentpagenum==2){link="/"}else{link="search?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}else{if(currentpagenum==2){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9668</a></span>'}if(c!=1){if(islabel==true){canvas=canvas+'<span class="showpageNum"><a href="/search/label/'+label+"&max-results="+pageCount+'">1</a></span>'}else{canvas=canvas+'<span class="showpageNum"><a href="/">1</a></span>'}canvas=canvas+"..."}for(var b=c;b<=a;b++){if(islabel==true){if(b==1){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}else{if(b==1){link="/"}else{link="search?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}}if(a!=maxpages){canvas=canvas+' .. <span id="showlastpage" class="showpage"></span>';startindex=Math.floor((total-1)/pageCount)*pageCount;if(islabel==true){writelabelscript("printlast")}else{writescript("printlast")}}if(currentpagenum<maxpages){if(islabel==false){link="search?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9658</a></span>'}document.getElementById("blog-pager").innerHTML=canvas};
//]]>
</script>
</b:if>
</div>
</body>

--> Ubah angka 5 pada var pageCount sesuai dengan jumlah post yang tampil di halaman depan blog kalian.

var pageCount=5;
var displayPageNum=5;

--> Angka 5 pada var displayPageNum adalah jumlah page yang akan ditampilkan. Ganti sesuai yang kalian inginkan.

--> Save, dan lihat hasilnya.

2. Menggunakan script dari luar.

--> Buka Notepad , dan copy kode berikut ini kedalamnya :

//<![CDATA[
document.getElementById("blog-pager").style.display="inline";var canvas="";function writescript(a){document.write('<script src="/feeds/posts/summary?alt=json-in-script&callback='+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}function writelabelscript(a){document.write('<script src="/feeds/posts/summary/-/'+label+"?alt=json-in-script&callback="+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}var url=location.href,total;var already=new Boolean(false);var timestamps=new Array();if(url.indexOf("/search/label/")!=-1){if(url.indexOf("?updated-max")!=-1){var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?updated-max"))}else{var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?&max"))}}if(url.indexOf("#Page")!=-1){var currentpagenum=parseInt(url.substring(url.indexOf("#Page")+5,url.length))}else{var currentpagenum=1}var startindex=(currentpagenum-displayPageNum-1>0)?((currentpagenum-displayPageNum-2)*pageCount+1):1;var total=(2*displayPageNum+1)*pageCount;if(url.indexOf("?q=")==-1&&url.indexOf(".html")==-1){if(url.indexOf("/search/label/")==-1){var islabel=new Boolean(false);do{writescript("buildtimestamps");startindex+=100}while(total>startindex)}else{var islabel=new Boolean(true);do{writelabelscript("buildtimestamps");startindex+=100}while(total>startindex)}document.write('<script type="text/javascript">printnav();<\/script>')}function buildtimestamps(b){if(already==false){total=parseInt(b.feed.openSearch$totalResults.$t)}init=pageCount-1;for(var a=init;post=b.feed.entry[a];a+=pageCount){timestamps[timestamps.length]=encodeURIComponent(post.published.$t.substring(0,19)+post.published.$t.substring(23,29))}}function printlast(b){var a=encodeURIComponent(b.feed.entry[0].published.$t.substring(0,19)+b.feed.entry[0].published.$t.substring(23,29));if(islabel==false){link="search?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}else{link="/search/label/"+label+"?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}document.getElementById("showlastpage").innerHTML='<a href="'+link+'">'+maxpages+"</a>"}function printnav(){maxpages=Math.ceil(total/pageCount);canvas=canvas+'<span class="totalpages">Page ['+maxpages+"]</span>";var a=((currentpagenum+displayPageNum)<maxpages)?currentpagenum+displayPageNum:maxpages;var c=((currentpagenum-displayPageNum)>1)?currentpagenum-displayPageNum:1;if(currentpagenum>1){if(islabel==false){if(currentpagenum==2){link="/"}else{link="search?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}else{if(currentpagenum==2){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9668</a></span>'}if(c!=1){if(islabel==true){canvas=canvas+'<span class="showpageNum"><a href="/search/label/'+label+"&max-results="+pageCount+'">1</a></span>'}else{canvas=canvas+'<span class="showpageNum"><a href="/">1</a></span>'}canvas=canvas+"..."}for(var b=c;b<=a;b++){if(islabel==true){if(b==1){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}else{if(b==1){link="/"}else{link="search?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}}if(a!=maxpages){canvas=canvas+' .. <span id="showlastpage" class="showpage"></span>';startindex=Math.floor((total-1)/pageCount)*pageCount;if(islabel==true){writelabelscript("printlast")}else{writescript("printlast")}}if(currentpagenum<maxpages){if(islabel==false){link="search?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9658</a></span>'}document.getElementById("blog-pager").innerHTML=canvas};
//]]>

--> Simpan kode tersebut dengan nama navigasihal.js (Rubah pilihan Save as type menjadi All Files)

--> Upload script navigasihal.js ke situs hosting. Kalian bisa menggunakan layanan hosting gratis dari Ripway.com

--> Kalau udah di upload, sekarang kita tinggal memasukkan script pemanggilannya pada kode template kita.

Di menu Edit HTML, cari kode </body> dan ganti kode tersebut dengan kode berikut ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script type='text/javascript' src='navigasihal.js'></script>

Nb: ganti teks berwarna hijau dengan URL link file di hostingan kalian. Contoh :

<script type='text/javascript' src='http://ripway.com/keichiro/navigasihal.js'></script>

--> Save, dan lihat hasilnya.

Semoga bermanfaat.

Sumber

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Hacks

• Cara Membuat Permalink di Blogspot
• Cara Memasang Tweetmeme di Setiap Postingan
• Membuat Navigasi Ala Google di Blogspot
• Cara Manipulasi Jumlah Komentar
• Cara Menambah Emotion Pada Kolom Komentar
• Merubah Warna Header Pada Blog
• Menambahkan Elemen Baru di Bawah Header
• Cara Membuat Garis Lengkung Pada Border

Blog

• Ribuan Backlink Gratis dari IMTalk
• Cara Memasang Tweetmeme di Setiap Postingan
• Cara Mendaftarkan Blog ke DMOZ
• Cara Membuat Short URL Google Plus
• Cara Daftar Google Plus (Google+)
• Google Update Pagerank Juli 2011
• Cara Menghapus dan Mengecek Broken Link Pada Blog
• Apa itu Google Plus (Google+) ?
• Tips Menghadapi Komentar Negatif
• Menambah Meta Tag Untuk Perkuat Postingan Kontes SEO
• Kontes SEO, Berbahaya!
• Pentingnya Menjawab Setiap Komentar di Blog
• Kenali Pengunjung Blog Anda
• 10 Artikel Terbaik Bulan Juni 2011
• Metode On Page dan Off Page SEO
• Cara Membuat Link Internal di Setiap Postingan
• Siapa Pengunjung Setia di Blog Anda?
• Tips Mendapatkan Pengunjung Setia di Blog
• Favicon Generate - Fitur Baru Blogger
• Cara Menambah Tombol Google +1
• DAW-XP Toolbar - Akses Cepat Menuju DAW-XP
• Cara Membuat Toolbar Alexa Sendiri
• Cara Memasang Alexa Widget
• Manfaat Alexa Toolbar
• Apa itu Alexa Rank?

Anda sedang membaca artikel tentang Cara Membuat Navigasi Halaman Bernomor dan anda bisa menemukan artikel Cara Membuat Navigasi Halaman Bernomor ini dengan url http://daw-xp.blogspot.com/2011/04/cara-membuat-navigasi-halaman-bernomor.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Navigasi Halaman Bernomor ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Navigasi Halaman Bernomor sumbernya.