Sesuai dengan gambar diatas. Kali ini, aku akan membagikan cara menciptakan Page Number Navigasi di Blogger. Fungsi dari Page Number Navigasi ini ialah untuk melihatkan artikel selanjutnya dan artikel sebelumnya. Page Number Navigasi ini ibarat gaya WP-PageNavi (WordPress) Sekarang kita sanggup gunakan pada Blogger. Biasa Page Number Navigasi ini tergantung jumlah postingan yang akan ditampilkan. Makara misalkan anda menampilkan Artikel anda hanya 6 Buah Artikel pada HomePage. Maka Tugas dari Page Number Navigasi inilah Melihat Artikel Selanjutnya.
Baca Juga :
Selain berfungsi Untuk melihat Artikel selanjutnya pada Blog. Fungsi Page Number Navigasi ini ialah untuk mengganti Link postingan usang atau postingan gres yang terdapat pada bawah postingan blog halaman utama. Dengan dipasangnya Page Number Navigasi ini kemungkinan Pengunjung sanggup bebas menentukan dan melihat halaman postingan yang ingin mereka baca. Makara pungunjung sanggup melompat dari Page 1 ke Page 2 dan Seterusnya. Saya rasa cukup ya pengertian dan fungsi page number navigasi ini, pribadi kita bahas saja cara membuatnya..
Cara Pertama :
1. Buka Blogger - Kemudian Anda Login.
2. DashBoard - Template.
3. Edit HTML.
Proses Pembuatan, Ikuti langkah-langlah berikut :
1. Jika anda ingin melihat Sumber Source kode, ini ialah dari Blog Vietnam Hontap. Makara aku hanya menerjemahkan saja.
2. Silakan anda Temukan kode ]]></b:skin> atau </style>
3. Copy & Paste instruksi berikut ini, dan Letakkan sempurna diatas kode ]]></b:skin> atau </style>
.pagenavi{clear:both;margin:20px 0 10px;text-align:center;font-weight:bold;color:#fff !important;text-transform:uppercase} .pagenavi span,.pagenavi a{padding:5px 15px;margin-right:3px;display:inline-block;color:#fff !important;background-color:#3498db;} .pagenavi .current{color:#fff !important;background-color:#555;} .pagenavi .current,.pagenavi .pages,.pagenavi a:hover{color:#fff !important;background-color:#555;} .pagenavi .pages {margin:0 -1px 0 0}<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1' visible='true'>
Atau
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
5. Copy & Paste instruksi berikuti ini, dan Letakkan dibawahnya
<b:includable id='page-navi'> <div class='pagenavi'> <script type='text/javascript'> var pageNaviConf = { perPage: 5, numPages: 5, firstText: "First", lastText: "Last", nextText: "Next", prevText: "Prev" } </script> <script type='text/javascript'> //<![CDATA[ function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})(); //]]> </script> </div> </b:includable>7. Copy & Paste instruksi berikut ini, dan Ganti instruksi tersebut kemudian ganti dengan instruksi dibawah ini.
<b:if cond='data:blog.pageType == "index"'> <b:include name='page-navi' /> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <b:include name='page-navi' /> </b:if> </b:if>Demikianlah Tutorial Blogger kali ini, jikalau terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat home page anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Page Number Navigasi Seperti di Wordpress pada Blogger
