Rabu, 06 Februari 2013

Membuat Tombol Navigasi Halaman Pada Blog

 


Tombol navigasi halaman adalah tombol yang digunakan utnuk memilih page/halaman pada blog untuk 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.

Tidak ada komentar:

Posting Komentar

 
Sumber : http://www.sektim.com/2012/03/tutorial-membuat-tombol-navigasi.html#ixzz2KB8mh2mX