Menambahkan Nomor Halaman Pada Blogger

Hallo sobat blogger.. Siang ini matahari bersinar cukup terik, tetapi jangan mematahkan semangat untuk tetap beraktivitas, semoga kita semua selalu dilimpahkan kesehatan dan kemudahan untuk melaksanakan semua kegiatan, Aamin YRA.

Pada hari yang cerah ini Bizril akan membahas tentang Trick dan Tutorial untuk menambahkan nomor halaman pada Blogger seperti yang digunakan pada Bizril blog ini, tepatnya di bawah posting paling bawah tepat di atas footer. Nomor halaman ini sekaligus menggantikan link Prev / Next yang muncul sebagai bawaan template blogger.


Trick dan tutorial ini ditemukan saat jalan-jalan (blogwalking) mengelilingi dunia blog dari sebuah blog ternama. Nomor halaman pada blog saya pikir itu penting untuk membantu navigasi dan lebih baik daripada link nex/tprev, kamu bisa menggantikan link next/prev pada blog dengan nomor halaman.

Langsung saja ke pembahasan inti untuk menambahkan nomor halaman pada blog, begini prosesnya :

+ Menambahkan Script CSS

1. Login ke blogger

2. Klik Template

3. Klik Edit (backup dulu template sebelum mengeditnya)

4. Cari (Ctrl-F) kode : ]]></b:skin>

5. Pilih salah satu tampilan nomor halaman di bawah ini, copy (Ctrl-C) scriptnya

# Tampilan 1

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;} .showpageOf{display:none!important} #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;} #blog-pager .pages{border:none;}

# Tampilan 2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;} #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;} .showpageOf{display:none!important} #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

# Tampilan 3

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;} a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;} #blog-pager .pages{border:none;background: none;}

# Tampilan 4

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

# Tampilan 5

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;} #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

# Tampilan 6

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

# Tampilan 7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

6. Paste (Ctrl-V) script tepat di atas kode : ]]></b:skin>





7. Untuk menghilangkan tombol First dan Last tambahkan script di bawah ini di bawah script tadi

.firstpage, .lastpage {display: none;}

+ Menambahkan Script HTML

1. Cari (Ctrl-F) kode : </body>

2. Copy (Ctrl-C) script di bawah ini

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> /*<![CDATA[*/ var perPage=5; var numPages=6; var firstText ='First'; var lastText ='Last'; var prevText ='« Previous'; var nextText ='Next »'; var urlactivepage=location.href; var home_page="/"; /*]]>*/ </script> <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/> </b:if> </b:if>

3. Paste (Ctrl-V) tepat di atas kode : </body>

4. Edit script sesuai dengan keinginan, dengan ketentuan :

- perPage diisi dengan jumlah post yang tampil pada setiap halaman
- numPages diisi jumlah halaman yang muncul pada navigasi
- firstText diisi keterangan menuju ke halaman pertama (halaman 1)
- lastText diisi keterangan menuju halaman terakhir
- prevText diisi keterangan menuju halaman sebelumnya
- nextText diisi keterangan menuju halaman berikutnya

+ Mengedit HTML Template

1. Cari (Ctrl-F) ada beberapa kode ini : expr:href='data:label.url'

2. Ganti kode itu dengan kode di bawah ini :

expr:href='data:label.url + "?&max-results=5"'

Angka 5 adalah jumlah post yang ditampilkan pada setiap halaman, ganti dan sesuaikan dengan blog kamu.

3. Klik tombol Save Template (Simpan Template)

Selesai. Kamu sudah berhasil menambahkan nomor halaman pada blog. Selamat mencoba.

Baca juga post Bizril blog yang lain :

+ Backlink Gratis dari SItus Media Berita Online

+ Menyambut Tahun Baru 2015 Masehi

+ Tips Trick Main Game Pets di Tagged

+ Cek Koneksi Internet Speedy

+ Membuat dan Mengedit Screenshot dengan Paint

Blogger, Trick, Tutorial, CSS, HTML, Javascript, Nomor, Halaman