Page Navigation Blogger

Unknown | Selasa, Mei 22, 2012 | Blogger Tutorials

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

JS

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioueacuFEgWGD3BJ4zGbKj-cZBfQR1oJiyoGAL-r64EEso1cW_FaenlERbwaYoPbZfU_f3k69AuQnSAsyaF1oYx3FImbl04U9C95aZPu4YAAkFd0o2HD_XrkI8wuerkMXDsWqME5mDXoU/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; }

<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>

Page Nav Google

CSS

JS

/* Page Navigation --------------------- */ #blog-pager,.blog-pager{ background-color: #FFFFFF;width:100%,text-align:center;} td.showpageOf{display:none;} #nav{font-family: Arial, Helvetica, sans-serif; font-size:12px;margin:0 auto;} #nav a{display:block; text-decoration:none; color: #0066FF} #nav a:hover{ text-decoration:underline;} #nav .b a,#nav .b a:visited{color: #0000CC; text-decoration: underline; font-weight:bold} .cur{ font-weight:bold;} .csb{background:url(http://www.google.com/images/nav_logo7.png) no-repeat 0 0;height:26px;display:block;} .csb.cur{background-position: -44px 0pt; width: 16px;} .csb.movenext{color:#20c;background-position: -76px 0pt; margin-right: 42px; width: 66px;} .csb.moveprev{color:#20c;background-position: 0pt 0pt; margin-left: 42px; width: 44px;} .csb.ch{background-position: -60px 0pt; width: 16px;} #nav td{padding:0;text-align:center}

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'>; var home_page='/'; var urlactivepage=location.href; var postperpage=7; var numshowpage=4; var upPageWord ='Prev'; var downPageWord ='Next'; </script>; <script src='http://donor-ilmu.googlecode.com/files/page_google.js' type='text/javascript'></script> </b:if> </b:if>

Page Nav Yahoo

CSS

JS

/* Page Navigation --------------------- */ .blog-pager,#blog-pager{ font-family:"Times New Roman", Times, serif; font-weight:normal; font-size:12px; width:500px; } .showpageNum a,.showpage a { background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg.png') repeat-x; border:1px solid #97a7af; margin:0px 1px 0 1px;padding:3px 8px; text-decoration:none; color:#333;line-height:14px;cursor:pointer;white-space:nowrap; -webkit-border-radius:3px;-moz-border-radius:3px; } .showpageNum a:hover,.showpage a:hover { background-image:url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png'); border:1px solid #e4905a;color:#e4905a;text-decoration:none; } .showpageOf{ margin:0 8px 0 0; } .showpagePoint { background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png') repeat-x; margin:0 3px 0 3px;padding:3px 8px; line-height:14px;cursor:pointer;white-space:nowrap; -webkit-border-radius:3px;-moz-border-radius:3px; border:1px solid #e4905a;color:#333;text-decoration:none;font-weight:bold; }

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'>; var home_page='/'; var urlactivepage=location.href; var postperpage=7; var numshowpage=4; var upPageWord ='Prev'; var downPageWord ='Next'; </script>; <script src='http://donor-ilmu.googlecode.com/files/page_nav.js' type='text/javascript'></script> </b:if> </b:if>

Page Nav Simple

CSS

JS

/* Page Navigation --------------------- */ .blog-pager,#blog-pager{ font-family:"Times New Roman", Times, serif; font-weight:normal; width:500px; font-size: 0.8em; padding: 0.6em 0.5em; background-color:#000000; text-align:center; } .showpageNum a,.showpage a { text-decoration: none; padding: 0.3em 0.5em; color: #055d90; white-space: nowrap; color: #ffffff; margin-right: 0.1em; } .showpageNum a:hover,.showpage a:hover { color:#A30A1A; text-decoration:none; background-color:#ffffff; } .showpageOf{ margin:0 8px 0 0; display:none; } .showpagePoint { color:#ffffff; text-decoration:none; background-color:#A9061B; width:36px; height:16px; font-size:12px; padding-left:5px; padding-right:6px; padding-top:3px; padding-bottom:4px; }

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'>; var home_page='/'; var urlactivepage=location.href; var postperpage=7; var numshowpage=4; var upPageWord ='Prev'; var downPageWord ='Next'; </script>; <script src='http://donor-ilmu.googlecode.com/files/page_nav.js' type='text/javascript'></script> </b:if> </b:if>

Pilih salah satu dari navigasi diatas. 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 ke Template > 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

Description: Page Navigation Blogger, Rating: 4.5, Reviewer: Unknown, ItemReviewed: Page Navigation Blogger

Anda sedang membaca artikel tentang Page Navigation Blogger dengan url http://blog-rizkyramadhani.blogspot.com/2012/05/page-navigation-blogger.html,Anda boleh copy paste tapi sertakan Page Navigation Blogger sebagai sumbernya.