Halaman navigasi untuk blogger adalah widget yang paling penting untuk blogger. Widget ini dapat membuat pengunjung mudah untuk menavigasi ke semua posting blog. Navigasi halaman pertama memiliki banyak bug, salah satunya adalah tidak dapat menunjukkan lebih dari 500 base pada link json dari blogger. Tapi Halaman Navi kali ini dapat menampilkan lebih dari 500 posting. Dan disini saya punya berbagai style



Page Nav Scroll
CSS :

/* Page Navigation--------------------- */.paginator {margin-top:60px;font-size:1em;}.paginator table {border-collapse:collapse;table-layout:fixed;width:100%;}.paginator table td {padding:0;white-space:nowrap;text-align:center;}.paginator span {display:block;padding:3px 0;color:#fff;}.paginator span strong,.paginator span a {padding:2px 6px;}.paginator span strong {background:#ff6c24;font-style:normal;font-weight:normal;}.paginator .scroll_bar {width:100%; height:20px;position:relative;margin-top:10px;}.paginator .scroll_trough {width:100%; height:3px;background:#ccc;overflow:hidden;}.paginator .scroll_thumb {position:absolute;z-index:2;width:0; height:3px;top:0; left:0;font-size:1px;background:#363636;}.paginator .scroll_knob {position:absolute;top:-5px; left:50%;margin-left:-10px;width:20px; height:20px;overflow:hidden;background:url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/s1600/slider_knob.gif) no-repeat 50% 50%;cursor:pointer; cursor:hand;}.paginator .current_page_mark {position:absolute;z-index:1;top:0; left:0;width:0; height:3px;overflow:hidden;background:#ff6c24;}.fullsize .scroll_thumb {display:none;}.paginator_pages {width:600px;text-align:right;font-size:0.8em;color:#808080;margin-top:-10px;}
JS :
<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><script src='http://donor-ilmu.googlecode.com/files/page_scroll.js' type='text/javascript'></script><script type='text/javascript'>var home_page=&quot;/&quot;;var urlactivepage=location.href;var postperpage=7;var numshowpage=6;</script><script src='http://donor-ilmu.googlecode.com/files/page_scroll_blogger.js' type='text/javascript'/></b:if></b:if>




Anda bisa merubah
Kode CSS (tidak perlu di rubah juga tidak masalah)
Kode JS pengaturan blog Anda:
var postPerPage = 7;
var numshowpage = 4;

postPerPage: Berapa banyak setiap Halaman Posting blog Anda
numshowpage: Banyak nomor akan ditampilkan dalam Navigasi Halaman Anda


Apakah anda sudah menetukan mana yang cocok di hati anda dari Page Nav di atas, Berikut cara memasangnya
  1. Langka pertama yang akan anda lakukan adalah, Login di Blogger.com, pergi keTemplate > Edit HTML (Expand Widget Templates)
  2. Tekan Ctrl+F cari kode ]]></b:skin>, letakan kode CSSnya di atas ]]></b:skin>
  3. Berikutnya cari </body>, letakan kode JSnya di atas </body>
  4. Terakhir cari kode 'data: label.url' (cari di semua teks dalam xml atau template anda) dan Ganti dengan ini
    'data: label.url + "? & max-results = 7"'
    Nilai 7 adalah berdasarkan berapa banyak posting yang akan ditampilkan di setiap halaman
  5. Simpan Template, klik Save Template

Posting Komentar

Catatan:
1. Komentar Anomin telah kami buka, silahkan berkomentar yang sopan
2. Jika kurang mengerti dengan posting di atas silahkan ajukan pertanyaan
3. Kami usahakan membalas komentar anda secepat kilat!
4. Masalah "Link Rusak" bisa anda laporkan lewat komentar
5. Jika meninggalkan Link Aktif pada komentar terpaksa kami hapus

Salam Admin
Darma Jaya

 
Top