Navigasi Halaman (Page Navigation) di BLog

Fungsi navigasi halaman ini berguna bagi semua pengguna blog untuk mempermudah pengunjung pengunjung blog anda untuk melihat postingan yang telah di buat. Sebagai contoh lihat Gambar 1. Tetapi dalam membuatnya ada beberapa kelemahan, diantaranya adalah:

1.      Banyak nya postingan harus di bawah 500

2.      Harus membaca semua file JSON jika posting begitu banyak sehingga mengakibatkan blog nya menjadi lambat

3.      Diperlukannya proses loop untuk menghitung semua posting

 

Gambar 1

Tapi, saat ini masalah masalah di atas sudah bisa di atasi. Untuk melihat hasil nya anda bisa melihat demo nya di blog tetangga.

• Demo for Minima
• Demo for Custom Template (Irressistible from Anshul)
• Demo for Classic from Choen Blog

Berikut akan saya berikan langkah langkah nya dalam membuat page navigation di blog :

Langkah 1 : Apply Style

1. Login ke Blogger Dashboard and navigate to Desain > Edit Html
2. Jangan men-Check yang bertuliskan “Expand Widget Templates”
3. Cari script berikut

        ]]></b:skin>

kemudian replace script tersebut dengan :

        .showpageNum a {

          padding: 3px 8px;

          margin:0 4px;

          text-decoration: none;

          border:1px solid #999;

          -webkit-border-radius:3px;-moz-border-radius:3px;

          background: #ddd;

          }

 

        .showpageOf {

        margin:0 8px 0 0;

        }

        .showpageNum a:hover {

          border:1px solid #888;

          background: #ccc;

          }

 

        .showpagePoint {

          color:#fff;

          text-shadow:0 1px 2px #333;

          padding: 3px 8px;

          margin: 2px;

          font-weight: 700;

          -webkit-border-radius:3px;-moz-border-radius:3px;

          border:1px solid #999;

          background: #666;

          text-decoration: none;

          }

 

        ]]></b:skin>

 

Langkah 2 : Aplly Javascript

Cari script berikut :

        </body>

Ubahlah dengan :

        &lt;script type='text/javascript'&gt;

        var home_page=&quot;/&quot;;

        var urlactivepage=location.href;

        var postperpage=7;

        var numshowpage=4;

        var upPageWord ='Prev';

        var downPageWord ='Next';

        &lt;/script&gt;

&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;

        </body>

 

Ubah juga sesuai dengan settingan blog mu di perintah:
var postperpage=7;
var numshowpage=4;

Postperpage : Berapa banyak Post disetiap halaman untuk blog Anda
numshowpage : Banyaknya nomor yang akan dimunculkan pada halaman Navigasi anda

Langkah 3 : Customize Label

Masuk ke halaman Edit HTML (lihat langkah 1) kemudian check di sebelah kanan yg bertuliskan “Expand Widget Templates”. Kemudian cari script berikut :

      'data:label.url'

Kemudian replace script tersebut dengan:

      'data:label.url + &quot;?&amp;max-results=7&quot;'

Ubah ‘7’ menjadi banyak nya halaman postingan yang anda mau.

Selamat mencoba dan semoga berhasil

Posted by adewe