Top Ad unit 728 × 90

2 Style Navigasi Nomor Halaman Blogger

Halaman Navigasi adalah fitur yang akan memberikan kenyamanan bagi pengunjung blog Anda untuk menjalahi index posting dari blog Anda. Untuk template bawaan dari blogger memang sudah ada tombol Navigasi halaman tapi itu bukanlah yang terbaik. Nah, pada kesempatan ini kita akan mempelajari tutorial tentang membuat Navigasi Nomor Halaman Blogger yang tentunya sudah sering Anda lihat pada blog lain.
navigasi-blogger


Artikel Terkait :


Cara Membuat Navigasi Nomor pada Halaman Blogger

  • Login ke Dashboard Blogger Anda
  • Klik Template – Edit HTML
  • Sekarang cari kode dibawah ini :
]]></b:skin>
  • Kemudian tambahkan kode dibawah ini tepat diatasnya :
.showpageArea a { text-decoration:underline;}
.showpageNum a {text-decoration:none; border: 1px solid #cccccc;margin:0 3px; padding:3px;}
.showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc;}
.showpagePoint {color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px;}
.showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; }
.showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; }
.showpage a:hover { text-decoration:none;}
.showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333;}


  • Script diatas bisa Anda gunakan untuk mengedit dari style Navigasi. Selanjutnya cari tag :
</body>

  • Kemudian tambahkan script dibawah ini tepat diatasnya :
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='https://dl.dropboxusercontent.com/s/xem1puohuldjpms/blogger_pagenavi_min.js' type='text/javascript'/>


  • Langkah terakhir klik – Simpan template

Untuk menggunakan Navigasi style ke-2 caranya sama seperti diatas, cukup Anda menggantikan css style dan javascript diatas dengan script berikut :
Css Style Navigasi ke-2 :
.showpageNum a, .showpage a {  text-decoration: none;  margin: 0 0 0 1px;  padding: 7px 11px;  background: #333;  color: #fff;  }
.showpageOf {  display:none;  }
.showpageNum a:hover, .showpage a:hover {  background: #41B7D8;  color: #fff;  text-decoration: none;  }
.showpagePoint {  color:#fff;  padding: 7px 11px;  background: #41B7D8;  text-decoration: none;  }


Javascript Navigasi ke-2 :
<!--Navigasi Nomor Starts-->
<script type='text/javascript'>
    var postperpage=5;
    var numshowpage=2;
    var upPageWord = &#39;Prev&#39;;
    var downPageWord = &#39;Next&#39;;
    var urlactivepage=location.href;
    var home_page=&quot;/&quot;;
</script>
<script src='https://dl.dropboxusercontent.com/s/gzu15cdm6njxqba/btnt-pagenav.js' type='text/javascript'/>

<!--Page Navigation Ends -->


Keterangan :
Kode ini menentukan jumlah posting yang akan ditampilkan per halaman.
var pageCount=5;
dan
var postperpage=5;
Kode ini menentukan jumlah nomor navigasi halaman tambahan yang akan ditampilkan pada halaman.
var displayPageNum=5;
dan
var numshowpage=2;
Kedua baris menentukan teks yang akan ditampilkan untuk halaman sebelumnya dan halaman berikutnya.
var upPageWord =&#39;Prev
var donwPageword =&#39;Next


Finaly, dengan menyelesaikan langkah diatas Anda telah berhasil menambahkan Navigasi Nomor pada halaman Blogger. Dan bila Anda menemukan kesulitan dengan tutorial diatas jangan malu untuk meninggalkan komentar Anda. Akhir kata semoga artikel ini bermanfaat buat Anda dan salam satu-delapan !



2 Style Navigasi Nomor Halaman Blogger Reviewed by burhan sanusi on December 16, 2013 Rating: 5

4 comments:

  1. alhamdulilah bro berhasil...... bbrp blog saya temui.. cm blog ini yg bikin saya mempan heheh

    ReplyDelete
  2. lam kenal brow burhan.. saya dari sorong papua ni mohon bimbingannya.... dan thanks artikelnya.

    ReplyDelete

All Rights Reserved by BSD © 2014 - 2015
Powered by Themes24x7

Contact Form

Name

Email *

Message *

Powered by Blogger.