Cara Membuat Navigasi Halaman

Cara lain untuk memudahkan pengunjung mencari artikel yang ada pada blog kita adalah memberi tombol navigasi halaman yang berada dibawah artikel. Selain memberikan nomor urut semua halaman yang ada, widget ini juga dilengkapi dengan tombol "Next" dan "Previous".
Bila anda berminat silahkan ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan dan pilih Edit HTML.

3. Sebaiknya Download Template Lengkap (back-up Template)terlebih dulu, agar template aman, bila terjadi kesalahan.
4. Cari kode di bawah ini atau yang mirip dengan kode ini :

]]></b:skin>

5. Copy kode di bawah ini dan taruh tepat diatas kode ]]></b:skin> :

.showpageArea a {<br /> text-decoration:underline;<br /> }<br /> .showpageNum a {<br /> border:1px solid #CCCCCC;<br /> margin:0 3px;<br /> padding:3px 7px;<br /> text-decoration:none;<br /> }<br /> .showpageNum a:hover {<br /> background-color:#CCCCCC;<br /> border:1px solid #CCCCCC;<br /> }<br /> .showpagePoint {<br /> -moz-background-clip:border;<br /> -moz-background-inline-policy:continuous;<br /> -moz-background-origin:padding;<br /> background:#CCCCCC none repeat scroll 0 0;<br /> border:1px solid #CCCCCC;<br /> color:#333333;<br /> margin:0 3px;<br /> padding:3px 7px;<br /> text-decoration:none;<br /> }<br /> .showpageOf {<br /> margin:0 3px 0 0;<br /> padding:3px 7px;<br /> text-decoration:none;<br /> }<br /> .showpage a {<br /> border:1px solid #CCCCCC;<br /> padding:3px 7px;<br /> text-decoration:none;<br /> }<br /> .showpage a:hover {<br /> text-decoration:none;<br /> }<br /> .showpageNum a:link, .showpage a:link {<br /> color:#333333;<br /> text-decoration:none;<br /> }

6. Simpan template.
7. Setelah template tersimpan lalu pilih Elemen Laman.
8. Tambah Gadget yang ada dibawah blog post.
9. Pilih "html/java script".
10.Copy Kode dibawah ini dan paste pada gadget tersebut:

<script type='text/javascript'> var home_page_url = location.href; var pageCount=1; 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><br /> <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>

11.Simpan dan selesai.

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Judul: Cara Membuat Navigasi Halaman; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• CSS3 TransisiSetelah yang lalu kita belajar tentang Transformasi 2D, kemudian agar lebih menarik kita tambahkan dengan efek transisi. Dengan CSS3 transisi, kita dapat menambahka ... readmore
• Thread Comments Stylish Dark Edition dengan CSSPada kesempatan kali ini saya akan membahas tentang modifikasi thread comment. "Thread Comment Stylish Dark Edition dengan CSS". thread comment yang biasa dan sudah ... readmore
• CSS Gradient background GeneratorPada posting sebelumnya saya membahas tenntang CSS3 Generator, dan kali ini saya akan membahas tentang CSS Gradient Background Generator (Warna Gradient) yaitu sebu ... readmore
• Cara membuat slide dengan efek marqueeAnimasi slide foto atau gambar dengan menggunakan efek marquee, tidak kalah menarik bila dibanding dengan animasi flash. Selain lebih ringan, animasi slide ini dile ... readmore
• Modifikasi Tampilan Pesan Komentar Versi 2 Pada kesempatan kali ini saya akan membahas tentang cara memodifikasi tampilan pesan komentar. Sebelumnya sudah pernah saya bahas "Modifikasi Tampilan Pesan Ko ... readmore