Cara Membuat Navigasi Page Number Di Blog

Pada postingan kali ini kita akan membuat navigasi page number atau cara membuat navigasi halaman dengan nomor. Blogger sebenarnya sudah mem...

Pada postingan kali ini kita akan membuat navigasi page number atau cara membuat navigasi halaman dengan nomor. Blogger sebenarnya sudah memiliki navigasi untuk menampilkan postingan baru dan postingan lama. Tapi sayangnya secara default blogger tidak dapat menampilkan jumlah halaman dengan menggunakan nomor.

Dengan membuat navigasi page number di blog, pengguna blog akan lebih cepat untuk melihat postigan lama dari blog. Kegunaan dari navigasi page number adalah untuk menampilkan jumlah halaman dan tombol link dengan angka, dimana setiap halaman memiliki jumlah postingan yg bisa diatur sedemikian rupa. Bagi yg ingin membuat navigasi page number di blog, simak langkah-langkah berikut.

Tutorial Blogger dan Widget Blogger

CSS Navigasi Page Number

  • Login ke blogger > Template > Edit html
  • Cari kode ]]></b:skin>

  • Kemudian pastekan salah satu css navigasi page number tepat diatas kode tersebut

CSS Navigasi Page Number Style 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;}]

CSS Navigasi Page Number Style 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);}]

CSS Navigasi Page Number Style 3

[#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;}]

CSS Navigasi Page Number Style 4

[#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;}]

CSS Navigasi Page Number 5

[#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;}]

JavaScript Navigasi Page Number

Masih di dalam template blogger, cari kode </body> kemudian tambahkan script navigasi page number dibawah ini tepat diatas kode tsb.

[<b:if cond="data:blog.pageType != "item""><b:if cond="data:blog.pageType != "static_page""><script type="text/javascript">/*<![CDATA[*/ var perPage=7;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/<script asycn='asycn' type='text/javascript'>/*<![CDATA[*/ if (typeof firstText == "undefined") firstText = "First";
if (typeof lastText == "undefined") lastText = "Last";
var noPage;
var currentPage;
var currentPageNo;
var postLabel;
pagecurrentg();
function looppagecurrentg(pageInfo) {
var html = '';
pageNumber = parseInt(numPages / 2);
if (pageNumber == numPages - pageNumber) {
numPages = pageNumber * 2+1
}
pageStart = currentPageNo - pageNumber;
if (pageStart < 1) pageStart = 1;
lastPageNo = parseInt(pageInfo / perPage)+1;
if (lastPageNo - 1 == pageInfo / perPage) lastPageNo = lastPageNo - 1;
pageEnd = pageStart+numPages - 1;
if (pageEnd>lastPageNo) pageEnd = lastPageNo;
html+= "<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";
var prevNumber = parseInt(currentPageNo) - 1;
//Iccsi was here,doing magic if (currentPageNo>1) {
if (currentPage == "page") {
html+= '<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'
}
else {
html+= '<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'
}
}
if (currentPageNo>2) {
if (currentPageNo == 3) {
if (currentPage == "page") {
html+= '<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'
}
else {
html+= '<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'
}
}
else {
if (currentPage == "page") {
html+= '<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'
}
else {
html+= '<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'
}
}
}
if (pageStart>1) {
if (currentPage == "page") {
html+= '<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'
}
else {
html+= '<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'
}
}
if (pageStart>2) {
html+= ' ... '
}
for (var jj = pageStart;
jj <= pageEnd;
jj++) {
if (currentPageNo == jj) {
html+= '<span class="pagecurrent">'+jj+'</span>'
}
else if (jj == 1) {
if (currentPage == "page") {
html+= '<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'
}
else {
html+= '<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'
}
}
else {
if (currentPage == "page") {
html+= '<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'
}
else {
html+= '<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'
}
}
}
if (pageEnd < lastPageNo - 1) {
html+= '...'
}
if (pageEnd < lastPageNo) {
if (currentPage == "page") {
html+= '<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'
}
else {
html+= '<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'
}
}
var nextnumber = parseInt(currentPageNo)+1;
if (currentPageNo < (lastPageNo - 1)) {
if (currentPage == "page") {
html+= '<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'
}
else {
html+= '<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'
}
}
if (currentPageNo < lastPageNo) {
//Iccsi was here,doing magic if (currentPage == "page") {
html+= '<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'
}
else {
html+= '<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'
}
}
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
for (var p = 0;
p < pageArea.length;
p++) {
pageArea[p].innerHTML = html
}
if (pageArea && pageArea.length>0) {
html = ''
}
if (blogPager) {
blogPager.innerHTML = html
}
}
function totalcountdata(root) {
var feed = root.feed;
var totaldata = parseInt(feed.openSearch$totalResults.$t,10);
looppagecurrentg(totaldata)
}
function pagecurrentg() {
var thisUrl = urlactivepage;
if (thisUrl.indexOf("/search/label/") != -1) {
if (thisUrl.indexOf("?updated-max") != -1) {
postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))
}
else {
postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))
}
}
if (thisUrl.indexOf("?q=") == -1 && thisUrl.indexOf(".html") == -1) {
if (thisUrl.indexOf("/search/label/") == -1) {
currentPage = "page";
if (urlactivepage.indexOf("#PageNo=") != -1) {
currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)
}
else {
currentPageNo = 1
}
document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")
}
else {
currentPage = "label";
if (thisUrl.indexOf("&max-results=") == -1) {
perPage = 5
}
if (urlactivepage.indexOf("#PageNo=") != -1) {
currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)
}
else {
currentPageNo = 1
}
document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1"><\/script>')
}
}
}
function redirectpage(numberpage) {
jsonstart = (numberpage - 1) * perPage;
noPage = numberpage;
var nameBody = document.getElementsByTagName('head')[0];
var newInclude = document.createElement('script');
newInclude.type = 'text/javascript';
newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");
nameBody.appendChild(newInclude)
}
function redirectlabel(numberpage) {
jsonstart = (numberpage - 1) * perPage;
noPage = numberpage;
var nameBody = document.getElementsByTagName('head')[0];
var newInclude = document.createElement('script');
newInclude.type = 'text/javascript';
newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");
nameBody.appendChild(newInclude)
}
function finddatepost(root) {
post = root.feed.entry[0];
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
var timestamp = encodeURIComponent(timestamp1);
if (currentPage == "page") {
var pAddress = "/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage
}
else {
var pAddress = "/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage
}
location.href = pAddress
}
/*]]>*/</script></b:if></b:if>]

Pengaturan

perPage: 7;
numPages: 6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
}
Silahkan ubah tulisan warna merah sesuai dengan keinginan anda dan kemudian klik simpan. Demikianlah postingan saya mengenai cara membuat navigasi page number di blog atau cara membuat navigasi halaman dengan nomor. Semoga artikel ini dapat bermanfaat bagi kita semua.

COMMENTS

Name

Aceh,23,Adsense,8,BBM,3,Biography,1,Bitcoin,4,Blog,21,Blogger,12,Blogging,55,Business,14,Cerita,3,CPNS,1,Delicious,1,Design,1,DeviantART,1,Digg,1,Dollar,3,Dunia,13,Facebook,5,Flickr,1,Friendster,1,Gambar,2,Game,34,Gmail,1,Google+,4,Hosting,1,Inspirasi,2,Instagram,1,Internet,13,Interview,11,Kesehatan,2,LinkedIn,1,Makalah,7,Marketing,12,Meme,8,Money,3,Motivasi,2,MySpace,1,Outlook,1,Path,1,Pendidikan,10,Pengetahuan,4,Pinterest,1,Plugin,5,PNS,1,Reddit,1,Review,4,Seo,53,Smartphone,5,Social Media,38,Sukses,3,Sumatera Barat,16,Sumatera Utara,3,Templates,1,Tips,6,Toko Online,3,Top10,18,Tumblr,1,Tutorial,29,Tutorial Blog,146,Twitter,3,Umum,9,Vimeo,1,VK,1,Weebly,1,WhatsApp,1,Widget,55,Wisata,4,WordPress,14,Yahoo,1,Youtube,3,
ltr
item
Mas Da Bang: Cara Membuat Navigasi Page Number Di Blog
Cara Membuat Navigasi Page Number Di Blog
https://3.bp.blogspot.com/-8jyGnfqL-vU/Wkp7xOxXVwI/AAAAAAAANi4/nRkI6LM3sYo4ASNDL9oTwZuKdSOW6JeiACLcBGAs/s1600/Widget-Blogger.png
https://3.bp.blogspot.com/-8jyGnfqL-vU/Wkp7xOxXVwI/AAAAAAAANi4/nRkI6LM3sYo4ASNDL9oTwZuKdSOW6JeiACLcBGAs/s72-c/Widget-Blogger.png
Mas Da Bang
https://blog.itapuih.com/2018/11/cara-membuat-navigasi-page-number-di.html
https://blog.itapuih.com/
https://blog.itapuih.com/
https://blog.itapuih.com/2018/11/cara-membuat-navigasi-page-number-di.html
true
2732475762120586724
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy