Memasang Page Navigasi Dengan Mudah

Memasang Page Navigasi adalah salah satu widget yang membuat blog kita visitor friendly karena dengan menggunakan Page Navigasi pengunjung dapat melihat postingan terdahulu dengan mudah tanpa harus melihat dahulu satu-satu dan menurut artikel yang saya baca sih , Page Navigasi ini membuat template kita seo friendly juga, kalau soal seo friendly kembali ke diri sobat masing-masing karena saya tidak mengerti yang namanya seo .


Sebenarnya trik blog tentang Memasang Page Navigasi saya buat karena ada yang request dari salah satu teman blogger, dia mengirimkan pesan ke email saya. Memang request tentang trik blog atau tentang mempercantik blog itu yang request banyak banget jadi maaf kalau yang lagi request ke oketrik belum di berikan, sobat harus sabar karena saya kerja hanya sendiri tanpa ada admin yang lain . Oke sekarang kembali ke topik, eh langsung aja yuk ke caranya.

1. Seperti biasa login ke blogger
   
   
   
2. masuk ke Rancangan (dulunya tata letak) >> Elemen Halaman (tidak usah di cari karena biasanya apabila sudah mengklik Rancangan sobat sudah berada pada halaman tersebut)
   
   
   
3. Setelah itu tambahkan sebuah gadget (tambahkan saja di sidebar)
   
   
   
4. Setelah itu pilih yang HTML/Javascript
   
   
   
   
   
5. Setelah itu masukan kode di bawah ini ke dalamnya
   
   
   <style>
   .showpageArea a {
   text-decoration:underline;
   }
   
   .showpageNum a {
   text-decoration:none;
   border: 1px solid transparent;
   margin:0 3px;
   padding:3px;
   }
   
   .showpageNum a:hover {
   border: 1px solid transparent;
   background-color:#bbb;
   }
   .showpagePoint {
   color:#fff;
   text-decoration:none;
   border: 1px solid transparent;
   background: #000;
   margin:0 3px;
   padding:3px;
   }
   .showpageOf {
   text-decoration:none;
   padding:3px;
   margin: 0 3px 0 0;
   }
   .showpage a {
   text-decoration:none;
   border: 1px solid transparent;
   padding:3px;
   }
   .showpage a:hover {
   text-decoration:none;
   }
   .showpageNum a:link,.showpage a:link {
   text-decoration:none;
   color:#333;
   }
   
   </style>
   
   <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 ='';
   
   /*-bagian ini bisa sobat atur, sesuai keinginan sobat/*
   var pageCount=3;
   var displayPageNum=3;
   var firstPageWord = 'Awal';
   var endPageWord = 'Akhir';
   var upPageWord ='Sebelumnya';
   var downPageWord ='Selanjutnya';
   /*Akhir/*
   
   var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
   
   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="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" 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>
6. setelah itu simpan
7. eits ini belum selesai, sekarang drop/pindahkan widget tersebut ke bawah elemen post
   
   
   
   
   
8. setelah itu simpan dan sobat bisa lihat hasilnya.

Bagaimana, mudah dan simple bukan? Mungkin trik ini sudah banyak sekali yang menjelaskannya, namun tidak ada salahnya kalau saya bagikan? toh trik disini walaupun judulnya sama dengan yang lain tapikan langkah memasang/membuatnya berbeda, betul tidak ? Sekarang saya pamit dulu, sampai ketemu di post berikutnya oke sob. Terima kasih dan Happy Blogging .

Navigasi lainnya :

• Menu Navigasi Dengan jquery
• Menu Navigasi

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg