$0A

Green Spitial

image

 

Template Information

 

Name Green Spitial
Author http://www.blog-zone.info
Designer http://www.mybloggerthemes.com
Properties 2 Columns, White, Green, Rounded Corner, Fixed Width, Right Sidebar, Gradient
Descriptions Green Spitial is a new styled Blogger template. Template is also very neat. Green spitial use navigation with a black shadow, making it more arise and looks elegant. Suitable for personal blog.

Navigasi Halaman Menggunakan Javascript

image Tutorial pemasangan navigasi halaman ini sudah pernah saya bahas dulu, dengan cara meletakkan langsung seluruh kode di gadget. Namun masih saja ada yang kesulitan dengan panduan peletakkan navigasi halaman tersebut. Sekarang saya akan coba berikan sedikit tips yang berbeda dan tentunya dengan variasi bentuk yang lebih menarik. Saya tidak akan panjang lebar menjelaskan tentang pengertian navigasi halaman ini karena sudah pernah saya bahas sebelumnya.

 

Kode css dan javascript ini saya ambil dari blog dengan bentuk yang sama persis. Tapi jangan menelan mentah-mentah kode css yang ada karena sobat bisa kreasikan sesuai dengan warna background blog sobat. Jika kode script ini saya pasang langsung di pasti akan membuat sobat pusing karena kode ini sangat panjang, oleh karenya saya simpan saja di . Berikut cara pemasangannya.

 

  1. Setelah login di blogger, silahkan sobat klik Rancangan.
  2. Kemudian klik tab Edit HTML.
  3. Untuk radio button Expand Template Widget tidak usah di klik karena akan menambah pusing nantinya.
  4. Letakkan kode css berikut ini sebelum kode ]]></b:skin>

     

    .showpageNum a {

    color:#FFF;padding:4px 10px;

    margin:0 2px;

    text-decoration:none;

    -webkit-border-radius:2px;-

    moz-border-radius:2px;

    background:#848484

    }
    .showpageOf {

    color:#222;

    margin:0 6px 0 0

    }
    .showpageNum a:hover {

    background:#222;

    color:#FFF

    }
    .showpagePoint {

    color:#FFF;

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

    padding:4px 10px;

    margin:0 2px;

    -webkit-border-radius:2px;

    -moz-border-radius:2px;

    background:#222;

    text-decoration:none

    }
  5. Dan letakkan kode berikut sebelum </body>

     

    <script type='text/javascript'>
    var home_page=&quot;/&quot;;
    var urlactivepage=location.href;
    var postperpage=10;
    var numshowpage=7;
    var upPageWord =&#39;&#9668;&#39;;
    var downPageWord =&#39;&#9658;&#39;;
    </script>
    <script src='http://miscah.googlecode.com/files/pagenav.js' type='text/javascript'/>
  6. Kemudian Simpan Template.

 

Keterangan :

  • var postperpage=10; adalah jumlah postingan dalam satu halaman, sesuaikan dengan jumlah postingan sobat, jika jumlah postingannya 5 maka ganti angka tersebut dengan angka 5.
  • var numshowpage=7; adalah jumlah tombol navigasi dalam satu halaman.

 

Semoga berhasil ya !