Portal Blog - Kali ini kita akan bahas cara menambahkan widget halaman navigasi bernomor yang dapat digunakan di blogger. Biasanya dalam tombol navigasi akan terlihat tombol next dan previos apabila jumlah posting dihalaman melebihi jumlah halaman. Dengan penomoran setelah jumlah postingan akan membantu kita menjelajahi halaman dengan mudah dan cepat, juga untuk mengetahui jumlah postingan yang diterbitkan.
Tutorial ini adalah bagaimana cara menambahkan nomor navigasi bernomor menggunakan javascript. Berikut ini adalah 7 jenis penomoran halaman yang dapat anda pilih.
Menambahkan Tombol Navigasi Bernomor Untuk Blogger.
Cara menambahkan widget memiliki 2 langkah:
- Menambahkan CSS
- Menambahkan scrypt
Sekarang kita lihat cara menambahkan gaya CSS untuk navigasi halaman.
1. Menambah CSS
Langkah 1. Masuk ke Dasbor >> "Template" kemudian edit HTML
Langkah 2. Carilah kode dibawah ini :
]]> </ B: skin>
Gunakan tombol "F" untuk mempermudah pencarian kode tersebut.
Langkah 3. Pilih salah satu gaya navigasi halaman bernomor menurut selera Anda di bawah ini, tempatkan tepat diatas kode ]]> </ B: skin> tersebut. Kemudian Save.
Warna Gray navigasi bernomor:
Kode:
#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;}
Warna Hitam Bernomor Dengan Tombol Orange
Kode:
#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);}
Dark Number Navigasi dengan kombinasi warna biru
Kode:
#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;}
Warna gray navigasi dengan kombinasi warna biru
Kode:
#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;}
Warna Green dengan kombinasi warna orange dan pink
Kode:
#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;}
Warna orange kombinasi merah
Kode:
#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;}
Warna Gray dengan kombinasi warna merah
Kode:
#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;}
Catatan : Jika anda ingin menghilangkan tombol "First" dan "Last" maka tambahkan kode dibawah kode CSS :
.firstpage, .lastpage {display: none;}
2. Menambah Script
Masukkan scrypt dibawah ini tepat di atas </ Body>
<b: if 'data: blog.pageType = & quot; barang & quot;!' = cond> <b: if 'Data: blog.pageType = & quot; static_page & quot;' = cond> <script type = 'text / javascript'> ! / * <[CDATA [* / var perPage = 3; var NumPages = 3; var firstText = 'Pertama'; var lastText = 'terakhir'; var prevText = ' «Sebelumnya'; var nextText = 'Next»'; var urlactivepage = location.href; var home_page = "/";
if (typeof firstText == "undefined") firstText = "Pertama"; if (typeof lastText == "undefined") lastText = "terakhir"; var noPage; var currentPage ; var currentPageNo; var postLabel; pagecurrentg (); fungsi 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, jika (pageEnd> lastPageNo) pageEnd = lastPageNo; html + = "<span class = 'showpageOf'> Page" + currentPageNo + 'dari' + lastPageNo + "</ span>"; var prevNumber = parseInt (currentPageNo) -1, jika (currentPageNo> 1) {if (currentPage == "halaman") {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 == "halaman") {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 ==" halaman ") {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 == "halaman") {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 == "halaman") {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 == " halaman ") {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 == "halaman") {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 == "halaman") {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) {if (currentPage == "halaman") {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 pakan = root.feed; var totaldata = parseInt (. feed.openSearch $ totalResults $ t, 10); looppagecurrentg (totaldata)} function pagecurrentg () {var thisUrl = urlactivepage; jika (thisUrl.indexOf ( "/ search / label /") = - 1) {if (thisUrl.indexOf () = "diperbarui-max?" -! 1) {postLabel = thisUrl.substring (thisUrl.indexOf ( "/ search / label / ") + 14, thisUrl.indexOf ("? diperbarui-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 = "halaman"; if (urlactivepage.indexOf ( "# pageNo =") = - 1) {currentPageNo = urlactivepage.substring (urlactivepage.indexOf ( "# pageNo =") + 8, urlactivepage.length)} else {currentPageNo = 1} document.write ( "<script src = \" "+ home_page +" feed / posts / summary? max-results = 1 & alt = json-in-script & callback = totalcountdata \ "> <\ /script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20} if (urlactivepage.indexOf ( "# pageNo =")! = -1) {currentPageNo = urlactivepage.substring (urlactivepage.indexOf ( "# pageNo =") + 8, urlactivepage.length)} else {currentPageNo = 1} document.write ( '<script src = "' + home_page + 'feed / tulisan / 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 ( 'kepala') [0]; var newInclude = document.createElement ( 'script'); newInclude.type = 'text / javascript'; newInclude.setAttribute ( "src ? ", home_page +" feed / 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 ( 'kepala') [0]; var newInclude = document.createElement ( 'script'); newInclude.type = 'text / javascript'; newInclude. setAttribute ( "src", home_page + "feed / 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 == "halaman") {var pAddress = "? / pencari diperbarui-max =" + timestamp + "& max-results =" + perPage + "# pageNo =" + noPage} else { var pAddress = "/ search / label /" + postLabel + "? diperbarui-max =" + timestamp + "& max-results =" + perPage + "# pageNo =" + noPage} location.href = pAddress}
/ *]]> * / </ script> </ b: if> </ b: if>
Kemudian Save template.
Demikian cara menambahkan nomor halaman navigasi, jika langkah diatas dapat dilakukan dengan benar maka anda akan mendapatkan model- model keren penomoran navigasi yang memudahkan pengunjung mengekploitasi blog anda.
Advertisement
