- 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 ='Prev';
var downPageWord ='Next';
</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 =
'Prev';
var downPageWord =
'Next';
var urlactivepage=location.href;
var
home_page="/";
</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 ='Prev
var
donwPageword ='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 !
.jpg)
