Selamat Datang

Jumat, 01 Januari 2010

Cara Pasang Page Number Di Blog

Sebelum Saya Bahas Tutorial Kali ini Saya Akan jelaskan Dulu Apa itu Page Number? Page Number Adalah Sebuah Tool Yang Biasanya Diletakkan Dibawah Entries Untuk Menentukan Nomor Halaman Dan Berguna Untuk Mempermudah Pengunjung Atau Pengguna Blog Berpindah Dan Meloncati Halaman Lain Di Suatu Blog. Menurut Pengertian Saya Sih Begitu...??? Untuk Lebih Jelasnya Sobat bisa Lihat Gambar Atau Demo Dan Kalau Sudah Paham Mari Kita Lanjut Ke Cara Pembuatannya.
  • Pertama Silahkan Sobat Login Ke Akun Blogger Sobat.
  • Masuk Rancangan Lalu Pilih Edit HTML Dan Awas Jangan Sampai Lupa Centang Expand Template Widget.
  • Untuk Berjaga jaga Takut Ada Kerusakan Silhkan Sobat Backup Template Sobat Dulu.
  • Bila Langkah Diatas Sudah Mantap Selanjutnya Sobat Cari Kode ]]></b:skin> Pada Template Sobat.
  • Kalau Udah Ketemu Kode Diatas Silahkan Sobat Copy Kode Berikut Dan Taruh Tepat Diatas Kode ]]></b:skin> Tadi.

    /* Page Number */
    .showpageArea a {
    color:#fff;
    text-decoration:underline;
    }

    .showpageNum a {
    text-decoration:none;
    border: 1px solid #000;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWIr6HgxYzLNWuO4oN65Pt4eVS6Es7MeJJlxa7GjHv_Io_LOgIXjmt3iIZar4jREQdVCNOkORUX6Jw6eVJHPHN7muz3IiqjOjHcRuZ34qxlHH2N-aJSbl92MOtgZNnYCRySPC0tpDGVR-O/s288/navi1.jpg) top left repeat-x;
    margin:0 2px;
    padding:10px;
    }

    .showpageNum a:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3XosdbelQ8V8P1jVEtTc32RcXrkAsKUUxKX_EGIqXjSdbMz52Bx7gD_C_LGobt-g2Qa0zaHZ72ep33m5l72Cwx_nfKLIe9arq5c0OxcBsoZ9JtB_rc668CpOxvtQY8B3ob_hCcoYf4fO/s288/navi2.jpg) top left repeat-x;
    }
    .showpagePoint {
    color:#fff;
    text-decoration:none;
    border: 1px solid #000;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3XosdbelQ8V8P1jVEtTc32RcXrkAsKUUxKX_EGIqXjSdbMz52Bx7gD_C_LGobt-g2Qa0zaHZ72ep33m5l72Cwx_nfKLIe9arq5c0OxcBsoZ9JtB_rc668CpOxvtQY8B3ob_hCcoYf4fO/s288/navi2.jpg) top left repeat-x;
    margin:0 3px;
    padding:10px;
    }
    .showpageOf {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWIr6HgxYzLNWuO4oN65Pt4eVS6Es7MeJJlxa7GjHv_Io_LOgIXjmt3iIZar4jREQdVCNOkORUX6Jw6eVJHPHN7muz3IiqjOjHcRuZ34qxlHH2N-aJSbl92MOtgZNnYCRySPC0tpDGVR-O/s288/navi1.jpg) top left repeat-x;
    color:#fff;
    text-decoration:none;
    border: 1px solid #000;
    padding:10px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWIr6HgxYzLNWuO4oN65Pt4eVS6Es7MeJJlxa7GjHv_Io_LOgIXjmt3iIZar4jREQdVCNOkORUX6Jw6eVJHPHN7muz3IiqjOjHcRuZ34qxlHH2N-aJSbl92MOtgZNnYCRySPC0tpDGVR-O/s288/navi1.jpg) top left repeat-x;
    color:#fff;
    text-decoration:none;
    border: 1px solid #000;
    padding:10px;
    }
    .showpage a:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL3XosdbelQ8V8P1jVEtTc32RcXrkAsKUUxKX_EGIqXjSdbMz52Bx7gD_C_LGobt-g2Qa0zaHZ72ep33m5l72Cwx_nfKLIe9arq5c0OxcBsoZ9JtB_rc668CpOxvtQY8B3ob_hCcoYf4fO/s288/navi2.jpg) top left repeat-x;
    color:#fff;
    text-decoration:none;
    border: 1px solid #000;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#fff;
    }

  • Selanjutnya Cari Kode Seperti ini </body> Dan Copy Kode Dibawah ini Dan Taruh Tepat Diatasnya Kode </body> Tersebut.

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
    var pageCount=5;
    var displayPageNum=5;
    var upPageWord =&#39;Prev&#39;;
    var downPageWord =&#39;Next&#39;;
    </script>
    <script src='http://filiex.googlecode.com/files/pager-number.js' type='text/javascript'/>
    </b:if>

  • Tahap Terakhir Sobat Cari Kode 'data:label.url' Dan Gantikan Atau Replace Kode Tersebut Dengan Kode Dibawah ini.

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

  • Bila Semua Sudah Selesai Harap Di Pratinjau Dulu Dan Bila Page Number Sudah Muncul, Sekarang Sobat Bisa Save Atau Simpan Template Sobat.
  • Selesai.



Cukup Sekian Dan Selamat Mencoba 
Comments
0 Comments

0 komentar:

Posting Komentar

Tata Cara Berkomentar :
1. Berilah komentar/saran walau sepatah kata
2. Komentar/saran yang tidak sopan tidak akan ditampilkan/segera dihapus
3. Jika ingin memasukan gambar gunakan kode : [img]url gambar[/img]
4. Jika Video gunakan kode : [youtube]URL Video[/youtube]
5. Jika kata - kata mutiara gunakan kode :[blockquote]Kata-kata Anda[/blockquote]
6. Anda juga bisa menggunakan emoticon seperti biasa.

Komentar dan Saran Anda sangat bermanfaat untuk perkembangan blog ini.
Terima Kasih !!!