Pasang Menu Navigasi Halaman

Menu navigasi halaman ini bisa di bilang sebagai alternatif pengganti untuk tulisan "posting lama" dan "posting baru". Mungkin anda sudah sering membaca artikel mengenai cara menghilangkan atau mengganti tulisan posting lama dan posting baru. Seperti yang telah dikupas oleh kang rohman di salah satu postingannya. Jika anda ingin tau contoh dari menu navigasi halaman ini, anda bisa lihat di bagian bawah blog ini. Berikut screenshootnya : Nah...jika anda memang ngerasa kurang begitu menyukai dengan adanya tulisan posting lama dan posting baru, anda bisa menggantinya dengan menu navigasi halaman ini. Berikut cara penerapannya di blogspot : Silahkan login dahulu di blogger kemudian masuk ke menu page element. Setelah itu, klik add new page element dan pilih html/javascript. Langkah selanjutnya, silahkan copy paste kode berikut di form page element yang baru anda tambahkan dan ga usah di kasih judul.
<style> .showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px; } .showpageArea a {border: 1px solid #505050; color: #000000;font-weight:normal; padding: 3px 6px !important; padding: 1px 4px ;margin:0px 4px; text-decoration: none; } .showpageArea a:hover { font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; } .showpageNum a {border: 1px solid #505050; color: #000000;font-weight:normal; padding: 3px 6px !important; padding: 1px 4px ;margin:0px 4px; text-decoration: none; } .showpageNum a:hover { font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; } .showpagePoint {font-size:11px; padding: 2px 4px 2px 4px; margin: 2px; font-weight: bold; border: 1px solid #333; color: #fff; background-color: #000000; } .showpage a:hover {font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; } .showpageNum a:link,.showpage a:link { font-size:11px; padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #0066cc; color: #0066cc; background-color: #FFFFFF;} .showpageNum a:hover {font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; } </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 =''; var pageCount=5; var displayPageNum=3; var firstPageWord = 'Awal'; var endPageWord = 'Akhir'; var upPageWord ='Sebelumnya'; var downPageWord ='Selanjutnya'; 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 += ' <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">Halaman '+thisNum+' dari '+(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>
Jika sudah di copy pastenya, klik simpan atau save. Langkah selanjutnya, drag and drop page element yang barusan anda buat ke bawah page element postingan. Sehingga hasilnya seperti ini : Jika sudah selesai klik simpan....... Silahkan dicoba.....

22 komentar:

  1. Pertamaxxx...

    Mantabb tipsnya... :)

    BalasHapus
  2. wah tips yg bagus.. tp sayangnya aq pake wordpress.. jd piye?

    BalasHapus
  3. Kok di blog ku gak muncul sih?

    BalasHapus
  4. kunjungan tengah malam.... kang, aku lagi belajar di sini, boleh ya,,....

    BalasHapus
  5. Mantabs sih sebenernya ... sudah kuikuti, tapi kok di blogku ngga muncul, Sob?

    BalasHapus
  6. sip sip ntr coba ah.soalnya dah pagi nih.saatnya tidur :D

    BalasHapus
  7. @pakdejack : utk wordpress aku ga tau mas.

    Untuk yang lainnya, saya minta maaf karena kemaren kodenya salah. Tapi sekarang sudah di perbaiki kok..silahkan dicoba

    BalasHapus
  8. selamat apgiiiiii, bang, saya mau belajar lagi di siniya, boleh gag?

    BalasHapus
  9. sebelumnya thank's

    tapi ada yang janggal pas saya coba,

    permasalahan :
    pas saya coba clik "AKHIR" gak muncul postingan saya yang terahir malah muncul "No posts match your query"

    mohon bantuannya bozz

    BalasHapus
  10. sebelumnya thank's

    tapi ada yang janggal pas saya coba,

    permasalahan :
    pas saya coba clik "AKHIR" gak muncul postingan saya yang terahir malah muncul "No posts match your query"

    mohon bantuannya bozz

    BalasHapus
  11. ini dia nih yang aku cari2, tanks banget yah...

    BalasHapus
  12. Panjang bangetttttttt


    keren tipsnya...jadi mantap footer nya

    BalasHapus
  13. Mantabs..
    Saya Follow blognya ah..
    soalnya tips blog hackingnya maknyus...

    BalasHapus
  14. makasi sodara..
    ini yang aku cari-cari...

    BalasHapus
  15. kok ga muncul apa apa yah

    BalasHapus
  16. Tp di klik hal 1 koQ loncat ke hal 4 Bos??

    BalasHapus
  17. ga muncul apa2 neh.... ga bisa tak coba diblogku

    BalasHapus

blogger