Membuat Halaman Navigasi pada Blogspot

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Membuat Halaman Navigasi pada Blogspot atau Navigation Page on Blogger. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

demo

Halaman Navigasi pada Blogspot

1. Log In ke akun blogger dulu
2. Masuk Rancangan, kemudian edit HTML
3. Centang Expand Template Widget
Expand Template Widget
4. Copy kode di bawah ini

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #fff;
  font-size:11px; 
  margin:10px;
  padding:8px 20px;
  background: rgba(0,0,0,0.5);
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  }
  
.showpageArea a {
  color: #fff;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #666;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  }
  
.showpageNum a:hover {
  background: #888;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #da6100;
  text-decoration: none;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  }

.showpageOf{
  margin:0 8px 0 0;
  color:#fff;
  }

5. Copy kode tadi di atas

</b:skin>

6. Selanjutnya copy kode di bawah ini

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://dl.dropbox.com/u/22738692/PageNavigation/script.js' type='text/javascript'/>
</b:if>
<!--Page Navigation Ends-->

7. Dan letakkan di atas kode ini

</body>

8. Kemudian simpan template

Keterangan dari script di atas bisa di edit kembali sesuai dengan keperluan anda.

• var pageCount=5;
  

Kode ini untuk menampilkan jumlah posting yang akan ditampilkan di halaman blog

• var displayPageNum=5;
  

Kode ini untuk menampilkan angka yang akan tampil pada halaman blog

• var upPageWord ='Previous';
  

Untuk menuju halaman yang sebelumnya

• var downPageWord ='Next';
  

  Untuk menuju halaman yang selanjutnya

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait