SEKOCI : MEMBUAT NAVIGASI HALAMAN BLOG

SEKOCI. Membuat atau memasang navigasi halaman blog setidaknya bertujuan untuk lebih me-modernisir penampilan blog yang kita miliki. Karena apa ? Standar blog yang disediakan oleh blogspot rata-rata hanya memberikan navigasi minimal yang berupa older-post, newer-post dan beranda. Pemasangan navigasi halaman blog ini paling tidak dapat sedikit menampilkan kesan "pro" pada blog (gratisan) yang kita miliki. Selanjutnya akan menutupi kesan standart-blog dan akan terlihat lebih dinamis serta sistematis.

Berikut ini adalah contoh navigasi halaman yang dapat kita buat untuk tujuan di atas.

Langkah awal dan pertama yang harus kita lakukan adalah menghapus terlebih dahulu <data:newer-post/>, <data:older-post/> serta <data:home-msg/>. Selanjutnya ikuti langkah-langkah berikut ini  :

Login ke blog anda  kemudian menuju halaman Design dan Edit HTML, jangan lupa di back up dulu templatenya untuk keamanan soalnya akhir akhir ini sering error blogger.
 

    Cari kode ]]></b:skin> lalu paste Css di bawah ini tepat di atas kode ]]></b:skin>

    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    text-decoration:none;
    border: 1px solid #cccccc;
    margin:0 3px;
    padding:3px;
    }
    .showpageNum a:hover {
    border: 1px solid #cccccc;
    background-color:#cccccc;
    }
    .showpagePoint {
    color:#333;
    text-decoration:none;
    border: 1px solid #cccccc;
    background: #cccccc;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #cccccc;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#333333;
    }

Langkah selanjutnya anda cari kode </body> , kalau sudah ketemu paste kode berikut ini tepat di atas kode </body>

    <!--Page Navigasi-->
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <script type='text/javascript'>
    var pageCount=6;
    var displayPageNum=5;
    var upPageWord =&#39;Previous&#39;;
    var downPageWord =&#39;Next&#39;;
    </script>
    <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
    </b:if>
    </b:if>
    <!--Page Navigasi -->

Simpan template dan lihat hasilnya :).

Keterangan :

Anda bebas mengubah tulisan yang saya kasih warna merah, angka 6 adalah jumlah posting yang tampil tiap halaman sedangkan yang 5 adalah tombol navigasi halaman yang tampil. Next adalah text untuk ke halaman selanjutnya, sebaliknya Previous untuk kembali kehalaman sebelumnya.

Demikianlah cara membuat navigasi halaman blog yang bersumber dari : http://www.bamz.us/2012/01/membuat-navigasi-nomer-halaman-blog.html, semoga dapat membawa manfaat.