Tuesday, April 01, 2014

Ganti navigasi halaman blog dengan angka

navigasi halaman blogspot

Untuk menggati navigasi halaman blog yang terdapat dibagian bawah blog seperti newer post, older post, dan home menjadi angka tujuannya agar pengunjung lebih mudah untuk menelusuri isi dari blog kita. Kode javascript yang saya berikan ini didapat dari berbagai sumber di google dan untuk kode css udah saya modifikasi ulang sesuai dengan tema template saya. Jika kamu ingin memasang navigasi halaman blog dengan angka, sesuaikan kode cssnya dengan template kamu agar lebih serasi....

Langkah-langkah dalam pembuatan navigasi halaman blog :
  1. Login ke akun blogger.
  2. Klik template, dan pilih edit html.
  3. Tambahkan kode css dibawah ini diatas ]]></b:skin>
    .showpageArea a {display: inline-block;text-decoration:underline;}
    .showpageNum a {display: inline-block;font-weight:bold;color:#23195A;text-decoration:none;margin:0 1px;padding:5px;background:#d30000;}
    .showpageNum a:hover {color:#23195A !important;background:#f2cf0a;}
    .showpagePoint {display: inline-block;font-weight:bold;color:#23195A;text-decoration:none;background: #f2cf0a;margin:0 1px;padding:5px;}
    .showpageOf {display: inline-block;color:#ffffff;text-decoration:none;padding:5px;margin: 0 1px 0 0;}
    .showpage a {display: inline-block;font-weight:bold;color:#ffffff;text-decoration:none;padding:5px;background:#d30000;}
    .showpage a:hover {color:#23195A !important;text-decoration:none;background:#f2cf0a;}
    .showpageNum a:link,.showpage a:link {text-decoration:none;color:#ffffff;}
    .showpageNum a:visited,.showpage a:visited{color:#ffffff;}
  4. Cari kode </body>, dan tambahkan kode javascript dibawah ini diatas </body>
    <script type='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord =&#39;Previous&#39;;var downPageWord =&#39;Next&#39;;</script><script src='http://dokyasde.googlecode.com/files/page.js' type='text/javascript'/>
  5. Simpan template.
Note : 
  • pageCount=5 adalah jumlah untuk menampilkan halaman posting, silahkan ganti sesuai keinginan kamu.
  • displayPageNum=5 adalah jumlah nomor pada halaman beranda blog, silahkan ganti sesuai keinginan kamu.
  • Previous, Next ganti sesuai keinginan atau biarkan saja.