Cara membuat Navigasi Halaman

Untuk memudahkan pengunjung blog atau web dalam melakukan pencarian artikel, selain menggunakan fasilitas searh engine, bisa juga dengan tombol navigasi halaman. Tombol navigasi halaman ini sebenarnya kurang lebih sama dengan tombol next atau previous pada blog sobat, namun bedanya navigasi halaman bisa membuat pengunjung ingat tempat suatu artikel pada halaman ke berapa pada blog kita. Karena navigasi halaman menampilkan nomor per halaman blog kita, seperti contoh pada halaman bawah search engine di google, terlihat tombol navigasi halaman untuk memudahkan pengunjung dalam pencarian keyword yang di maksud.

Berikut langkah mudah dalam membuat navigasi halaman :

  1. Login ke Blogger.

  2. Klik Tata Letak --> Elemen Halaman.

  3. Kemudian klik Tambah Gadget.

  4. Pilih yang Edit HTML/Javascript.

  5. Tambahkan kode berikut pada kotak kosong yang tersedia.

    <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=4;
    var firstPageWord = 'First';
    var endPageWord = 'Last';
    var upPageWord ='Previous';
    var downPageWord ='Next';

    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="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" 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>

  6. Drag and drop tepat dibawah kolom postingan.

  7. Kemudian Save.

Untuk var pageCount=5; --> jumlah postingan dalam satu halaman, jadi sobat sesuaikan dengan jumlah postingan sobat dalam satu halaman. Jika sobat menampilkan 5 postingan setiap halaman, maka sobat gunakan var pagecount=5.
Sipp semoga bermanfaat ya !!

Berlangganan artikel terbaru via Email
Artikel Lainnya :

44 comments

24 Juni 2009 02.33

wow....script na banyak bgt...
jadi pusing liatx...
btw mantaps kok...coba ahhhhh

25 Juni 2009 07.57

Manteppppsss,,, makasih sob,,,

25 Juni 2009 13.11

Info yang sangat bermanfaat, terimakasih sobat.

25 Juni 2009 22.48

Thanx ya... tipsnya

7 Juli 2009 00.45

Hi sob.., kunjngn sambil cari bacaan., artikel nya menarik n blog amazing..! Keep share friend !! Ditunggu kunjngn sobat.. ;), thx.

18 Agustus 2009 09.06

nice post ;)

25 September 2009 09.34

terima kasih ilmunya .. sukses besar ...

26 September 2009 09.56

trims atas ilmunya

14 Februari 2010 14.50

pantas dicoba...tks

23 Februari 2010 14.36

ternyata cukup mudah dan simple...tapi bermanfaat besar

27 April 2010 14.35

tips mantab....tengkyu

12 Mei 2010 04.15

alhamdulillah akhirnya ketemu.berhari-hari nyari artikel ini.tengkyu

28 Agustus 2010 10.07

Bagaimana Cara mengatasi masalah error ini mohon penjelasanya.

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "head" must be terminated by the matching end-tag "".

29 Agustus 2010 00.01

@Satrio Bagus Wicaksono : maaf brother tutorial ini tdk sampai mengedit HTML template, tp cukup menambahkannya pd Gadget

Jadi seperti ini :
Rancangan -->> Elemen Laman -->> Tambah Gadget -->> HTML/JavaScript

Tutorial ini sdh lama sy buat jd masih memakai Halaman Blogger yg lama seperti Tata Letak -->> Elemen Halaman -->> ....

13 Oktober 2010 00.39

thankz sob infonya...

lam knl yaaa

24 November 2010 19.23

mas, ane pake template minima, tapi kok bisa dipasangi page navigasi ya mas... ane juga coba tutorial dari blog laen juga kagak bisa semua. jadi puyeng banget nich

25 November 2010 16.16

@Belajar SEO : coba yang disini ya

17 Desember 2010 20.34

keren sob.. ijij save ya..

23 Desember 2010 12.54

mantap brooo.. langsung di coba..

7 Januari 2011 02.25

Makasih Tutornya mas...Kunjungan balik ya mas ke blog ku, and follow balik...Thanks.

17 Januari 2011 22.54

wah..keren-keren nih ilmunya...mantabs..thanks ya..

11 Februari 2011 16.01

mantap broo buat infonyaaa.. btw, langsung ke TKP aja nihh.. terima kasih.. salam kenal dan sukses selalu..

20 Februari 2011 15.05

langsung dicoba n berhasil mas

7 Maret 2011 22.32

langsung tak coba n kueren mas

12 Maret 2011 17.58

Terima kasih
Abang..

bisa minta TOLong Apa engga

29 Maret 2011 02.10

nie yang gua cari...makacih bos!

18 April 2011 21.32

mas, ada gak tutorialnya yang laen, soale waktu ana coba kok bagian latar belakang teks nya mirip sama yang punya mas...jadi navigasinya seperti punya nya mas...kalo ganti gambar bisa gak????ne ane coba kok jadi kayak gini yah?????visit www.the7kurcaci.blogspot.com

2 Mei 2011 05.22

betul tuh si peri kecil, klo bisa yang ada background-nya donk sob coz klo kaya gitu kelihatan monoton

31 Mei 2011 23.28

infonya bagus....
sukse selalu broo

10 Juli 2011 11.04

terimakasi tutorialnya, sangat bemanfaat sekalai

19 Juli 2011 14.25

gan ada gak tutorial bikin tombol navigasi di atas...kalo ada tolong share do blog ane yah...www.shuleedo.blogspot.com
sekalian dengan latar warna background yg cocok dgn blog ane nih...mantap abis nih blog nya.....

mantap gan mampir2....yaa blogqu di


http://romsy-uchiha.blogspot.com

19 Agustus 2011 16.23

KEREN..MAKASIH ILMUNYA BERMANFAAT BANGET

22 Agustus 2011 19.18

hanya ada satu kata.

USEFULL !

10 September 2011 11.00

sip

19 September 2011 07.21

kok di template saya ga bisa ya...
ada solusi...

10 April 2012 20.04

Kalo diblog Saya sepertinya gak support sob. Gak running soalnya, kenapa ya??

27 April 2012 12.26

punya saya kok nggak bisa ya.......

19 Mei 2012 07.00

terima kasih sob, ok punya,,,,,,tipsnya,,

17 Juni 2012 10.34

Alhamdulillah , akhirnya nemu cara lain tombol next heheh , makasih gan infonya , :D

5 September 2012 07.51

pengen pasang juga menu navigasi ini, thanks mas bro

26 Oktober 2012 19.53

ijin nyoba...

7 Desember 2012 01.41

alhamdulillah berhasil gan..cuma knpa ya pas di klik next ngak berurutan nomor nya..saya klik tombol 2 yang tampil halaman 4..saya klik next lagi keluar halaman 8,,gmn tuh mohon pencerahannya,,temkasih..

26 Desember 2012 11.04

wow... jadi pusing liatnya... banyak banget ya...

Poskan Komentar

Reader Community

Recent Comments