Membuat Navigasi Nomor Halaman di Blogspot

Tahukan anda perlunya sebuah navigasi pada blog anda?Jawabanya adalah tentu sangat dibutuhkan untuk memudahkan pengunjung membuka setiap halaman perhalaman dari blog anda.Sehingga pengunjung lebih santai dalam melihat dan mengulas blog anda.Bagi blog yang belum memiliki navigasi tentunya dibawah postingannya atau tepatnya aka nada tulisan “ older post “ newer post” itulah bentuk blog yang belum diberi navigasi halaman.

Navigasi halaman ini memang sedikitnya mempercantik urutan halaman perhalaman dari beberapa jumlah postingan kita seharinya-harinya,Mengapa?karena kita akan memudahkan beberapa halaman yang kita buka perpostingnya.Dengan adanya navigasi ini membuat pembaca lebih suka berputar-putar di nomor halaman yang telah kiat buat dengan navigasi nomor halaman.

Jadi langsung saja saya berikan cara membuat nomor navigasi di blogspot.

• Masuk ke Dashboard => Template => Edit HTML (terlebih dahulu centang Expand Template Widget)
• Cari kode ]]></b:skin>
• Masukkan script yang ada di bawah ini tepat di atas kode ]]></b:skin>

.showpageArea {font-family:verdana,arial,Helvetica;color: #000;font-size:11px;margin:10px;}
.showpageArea a {color: #000;text-shadow:0 1px 2px #fff;font-weight: 700;}
.showpageNum a {padding: 3px 8px;margin:0 4px;text-decoration: none;border:1px solid #3d85c6;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidO7mr5HKF_TBN8bIyDk_xAxfM5p8Q1Xy9918P6yB8utfhAJvNumicj4H1_o7CheRQqp3bAzX0O3AtmUkbFeNZylqnpqWbzmBzvScw_nlGcTs-7Nqsk5sCy_tpE7YQ8vrNCBHWhL-YnCA/s1600/halaman.jpg) 0 -50px repeat-x;}
.showpageNum a:hover {border:1px solid #aeae0a;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidO7mr5HKF_TBN8bIyDk_xAxfM5p8Q1Xy9918P6yB8utfhAJvNumicj4H1_o7CheRQqp3bAzX0O3AtmUkbFeNZylqnpqWbzmBzvScw_nlGcTs-7Nqsk5sCy_tpE7YQ8vrNCBHWhL-YnCA/s1600/halaman.jpg) 0 -25px repeat-x;}
.showpageOf{margin:0 8px 0 0;}
.showpagePoint {color:#fff;text-shadow:0 1px 2px #333;padding: 3px 8px;margin: 2px;font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #919106;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidO7mr5HKF_TBN8bIyDk_xAxfM5p8Q1Xy9918P6yB8utfhAJvNumicj4H1_o7CheRQqp3bAzX0O3AtmUkbFeNZylqnpqWbzmBzvScw_nlGcTs-7Nqsk5sCy_tpE7YQ8vrNCBHWhL-YnCA/s1600/halaman.jpg) 0 0 repeat-x;
text-decoration: none;

• |Selanjutnya cari kode </body>, lalu masukkan script di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'> var pageCount=5; var displayPageNum=5;
var upPageWord =&#39;Sebelumnya&#39;;
var downPageWord =&#39;Selanjutnya&#39;;
</script>
<script src='http://papawardi.googlecode.com/files/navigasiku.js ' type='text/javascript'/>
</b:if>

• Silahkan klik Prantijau dahulu untuk melihat hasilnya dulu.
• Jika sudah OK maka simpan template.

Hasilnya :

Catatan:

• Huruf yang berwarna merah var pageCount=5; jumlah angkanya harus di samakan dengan jumlah halaman posting anda yang akan di tampilkan. Untuk mengesetnya, silahkan masuk ke Dashboard => Setelan => Pos dan Komentar
• Huruf yang berwarna merah jambu var displayPageNum=5; jumlah angkanya bisa anda sesuaikan menurut tab angka halaman yang ingin di tampilkan.

Semoga artikel membuat navigasi nomor halaman di blogspot ini dapat memberikan penjelasan maksimal.Terima kasih.

Sumber : Disini

Share on Google Plus

About Bgaze

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.