Cara Membuat Navigasi Angka pada Blogger

dEFFDFS

Membuat sebuah navigasi halaman blogger baru yang dengan mudah bisa menampilkan beberapa posting sekaligus, seperti yang ada di homepage sangat penting karena akan membuat pengunjung lebih mudah menelusuri data posting yang ada di blog. Kemampuannya untuk diatur dalam menampilkan jumlah posting juga membuat widget ini sangat menarik dan mempunyai nilai lebih. Anda bisa mengatur jumlah posting yang ditampilkan dalam jumlah yang diinginkan, sekaligus juga bisa mengatur berapa banyak angka navigasi yang akan digunakan. Menggunakan navigasi angka ini juga sangat baik untuk melengkapi navigasi blogger default yang hanya ditampilkan di halaman posting yang berfungsi untuk mengakses posting yang lebih baru dan lebih lama (newer & older post). Agar beban loading tidak terlalu berat ketika pengunjung memanfaatkan fasilitas navigasi yang baru ini, sebaiknya anda mengatur jumlah tampilan posting disetiap halaman dalam jumlah yang tidak terlalu banyak. Menggunakan readmore menjadi sebuah keharusan agar tidak semua materi posting ditampilkan secara utuh yang pada akhirnya hanya akan menjadi beban lebih bagi loading blog.

D E M O

Silahkan tarik halaman buka halaman utama, atau anda bisa klik link di bawah ini untuk melihat bagaimana bentuk dan fungsi navigasi halaman berbentuk angka yang berfungsi menggantikan navigasi melengkapi navigasi default blogger yang tersedia di setiap halaman posting. 
Demo Navigasi Angka Klik untuk membuka dan melihat halaman demo navigasi halaman blogger berbentuk angka.

Cara membuat navigasi angka

1. Login ke Blogger
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disini
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Expand Widget Template
   • Cari Kode : </head>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy dan paste-kan kode CSS dan letakkan di atas kode </head>
   • Cari kode </body>
   • Copy dan paste-kan xHTML - javascript tepat di atas kode </body>.
   • Simpan Template/Save Template
7. Selesai...
8. Buka blog Homepage (halaman utama) dan lihat di ujung terbawah halaman. Sebuah navigasi angka akan terlihat seperti yang ada di demo.

kode CSS

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.showpageArea{background:rgba(255,255,255,.8);border-top:1px solid #aaa;border-bottom:1px solid #aaa;margin:10px 30px;padding:6px 10px;}
.showpageArea a{text-decoration:underline;}
.showpageNum a{text-decoration:none;border:1px solid #ccc;margin:0 3px;padding:3px;}
.showpageNum a:hover{border:1px solid #ccc;background-color:#ccc;}
.showpagePoint{color:#333;text-decoration:none;border:1px solid #ccc;background:#ccc;margin:0 3px;padding:3px;}
.showpageOf{text-decoration:none;padding:3px;margin:0 3px 0 0;}
.showpage a{text-decoration:none;border:1px solid #ccc;padding:3px;}
.showpage a:hover{text-decoration:none;}
.showpageNum a:link,.showpage a:link{text-decoration:none;color:#333;}
</style>
</b:if>
</b:if>

xHTML - javascript DEBBY

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=9;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://gubhugreyot-js-hack.googlecode.com/svn/blogger/pagenavi.js' type='text/javascript'/>
</b:if>
</b:if>

Keterangan:

1. Angka 5 merupakan jumlah posting yang akan ditampilkan. Atur jika ingin menampikan jumlah posting berbeda.
2. Angka 9 adalah jumlah navigasi angka yang ditampilkan.
3. Jika anda ingin jumlah posting yang ditampilkan di halaman utama (homepage) sama dengan yang ditampilkan melalui navigasi angka ini, rubah setting yang ada di template anda.
   • Dasbor
   • Setting (Setelan)
     • Post dan Komentar
     • Post
       - Tampilkan sebanyak mungkin?
       - Atur jumlah posting di halaman utama sejumlah setting di navigasi yang baru dibuat.
   • Save Setting (Simpan Setelan)
4. Selesai!