Bagiamana cara membuat page navigasi next page number pada blogger? Sebenarnya banyak sekali para blogger yang telah memposting tentang bagaimana cara membuat page next number responsive pada blogger.
Sebelumnya saya juga telah membahas tentang Cara Membuat Related Post Sama Seperti Pada Blog Ini
Dari sekian banyak tutorial yang telah di posting sebelumnya tentang bagaimana membuat Next Page Number Responsive mungkin masih tidak ada yang cocok dengan selera anda.
Berikut ini saya akan membagi sebuah tutorial cara membuat Next Page Number Responsive Pada Blogger seperti pada contoh gambar dibawah ini.
Nah jika anda suka dan ingin mencoba membuat Page Next Number seperti pada gambar di atas Ikuti tutorial berikut ini.
Lakukan sesuai dengan nomor urutan tutorial dibawah ini supaya untuk mendapatkan hasil yang sempurna dan tidak terjadi kesalahan saat anda mencoba membuat tutorial dibawah ini dan dapat
CARA MEMBUAT NEXT PAGE NUMBER RESPONSIVE PADA BLOGGER
1. Untuk langkah pertama login dulu ke dalam www.blogger.com
2. Selanjutnya pilih Template / Tema kemudian klik menu Edit HTML
3. Selanjutnya bawa kursor dan klik dalam menu HTML kemudian tekan Ctrl + F untuk menu percarian
4. Kemudian cari kode ]]></b:skin>
5. Jika sudah ketemu Copy semua kode di bawah ini, kemudian Paste kode tersebut sebelum kode ]]></b:skin>
| KODE CSS |
|---|
| .pagemuna{clear:both;margin:20px 0 10px;text-align:center;font-weight:bold;color:#000!important;text-transform:uppercase} .pagemuna span,.pagemuna a{padding:5px 10px;margin-right:3px;display:inline-block;color:#000!important;background-color:#fff;border:1px solid #ccc} .pagemuna .current{color:#000!important;border:1px solid #222} .pagemuna .current,.pagemuna .pages,.pagemuna a:hover{color:#000!important;border:1px solid #222} .pagemuna .pages {display:none} span.showdates{font-size:14px;margin:10px 0 0} |
7. Kemudian ganti kode <b:includable id='nextprev'>...</b:includable> dengan kode di bawah ini
| KODE HTML |
|---|
| <b:includable id='nextprev'> <div class='pagemuna'> <script type='text/javascript'> var pagemunaConf = { perPage:3, numPages: 6, firstText: "First", lastText: "Last", nextText: "Next", prevText: "Prev" } </script> <script type='text/javascript'> //<![CDATA[ function pagemuna(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/pagemunaConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pagemunaConf.perPage):h.push("/?max-results="+pagemunaConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pagemunaConf.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="+pagemunaConf.perPage)}pagemuna.show(h,n,e)}pagemuna.show=function(f,e,a){var d=Math.floor((pagemunaConf.numPages-1)/2),g=pagemunaConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pagemunaConf.numPages){endPage=c+pagemunaConf.numPages-1}if(endPage>a){endPage=a;c=a-pagemunaConf.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]+'">'+pagemunaConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pagemunaConf.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]+'">'+pagemunaConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pagemunaConf.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=pagemuna&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pagemuna&max-results=99999"><\/script>')}})(); //]]> </script> </div> </b:includable> |
Sedikit Tambahan :
*PerPage:3, merupakan jumlah postingan yang ingin di tampilkan. Anda boleh mengubah sesuai dengan keinginan anda. Sedangkan
*numPages:6, merupakan jumlah postingan yang di tampilkan pada halaman utama.
Demikianlah sedikit penjelasan dari saya tentang bagaimana cara membuat menu Next Page Number Responsive Pada Blogger.
Semoga bermanfaat dan dapat menambah sedikit ilmu tentang bagaimana cara membuat Page Next Number pada Blog.
Selamat Mencoba
Tidak ada komentar