Tutorial Membuat Tombol Navigasi Halaman Blogger

Kali ini akan saya share cara membuat tombol navigasi halaman/page pada blog. Tombol navigasi halaman adalah tombol yang digunakan utnuk memilih page/halaman pada blog utnuk mencari postingan yang diinginkan (postingan sebelumnya), sebagai contoh lihat pada gambar disamping. Untuk membuatnya ikuti langkah-langkah berikut :

Cara Membuat Tombol Navigasi Halaman

  1. Login ke Blogger, lalu pilih rancangan > edit html dan centang Expand Template Widget.
  2. Cari kode script ]]></b:skin> , dan letakan script berikut tepat diatas kode ]]></b:skin>.
    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    text-decoration:bold;
    border: 0px solid #cccccc;
    margin:0 3px;
    padding:10px;
    }
    .showpageNum a:hover {
    border: 0px solid #ffffff;
    background-color:#transparent;
    }
    .showpagePoint {
    color:#00ff0c;
    text-decoration:bold;
    border: 0px solid #cccccc;
    background: #transparent;
    margin:0 3px;
    padding:12px;
    }
    .showpageOf {
    text-decoration:bold;
    color:#ff7e00;
    padding:10px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:bold;
    border: 0px solid #cccccc;
    padding:10px;
    }
    .showpage a:hover {
    text-decoration:bold;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:bold;
    color:#ff7e00;
    }
  3. Selanjutnya cari kode script </body>, dan letakkan script berikut di atas kode </body>.
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
    var pageCount=4;
    var displayPageNum=5;
    var upPageWord =&#39;Previous&#39;;
    var downPageWord =&#39;Next&#39;;
    </script>
    <script src='http://nthoeng.googlecode.com/files/navigasi.js' type='text/javascript'/>
    </b:if> 
  4. Ganti angka berwarna merah sesuai dengan jumlah posting yang ingin ditampilkan setiap page/halaman.
  5. Jangan lupa Simpan Template, untuk melakukan perubahan warna, ubah pada kode warna pada script yang diletakkan di atas ]]></b:skin>. Kode warna diawali dengan tanda pagar (#) dan terdiri dari 6 karakter.

5 comments

makasih sob..

blog sobat keren..

Reply

thank's sob

don't forget follow my blog

http://reza-solidaritas.blogspot.com/

Reply

,,Makasih mas brow,,,Sipp poko'e . . .

Reply

oke sob keren ni infonya
jangan lupa berkunjung juga ke blog saya
http://nonimaxidoid.blogspot.com/

Reply

Maxidoid
Keren juga nih infonya.
Thanks Ya Broo.
Mohon Kunjungan Baliknya ya bro http://www.nonimaxidoid.com

Reply

Post a Comment