Membuat Navigasi Halaman Ala Wordpress

Selamat pagi...Membuat Navigasi halaman sudah saya tulis pada artikel berjudul Memasang Navigasi Halaman Pada Blog, namun itu hanya navigasi biasa. Oleh karena itu saya akan berbagi navigasi halaman yang lebih keren dari sebelumnya yaitu Navigasi Halaman Ala Wordpress.

Tutorial ini saya dapat dari Blog Kang Mousir begitu saya baca artikelnya saya langsung memasang di blog saya, alhasil tampilannya keren sekali. Demonya bisa Anda lihat navigasi halaman blog saya ini. Gimana? apa Anda mau memasangnya di blog :) jika Anda mau silahkan ikuti tutorial dibawah ini;

Cara Memasang Navigasi Halaman Ala Wordpress Pada Blog

1. Silahkan Anda simpan kode CSS ini tepat diatas ]]></b:sikn> 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:#16a085;}
.pagenavi .pages {margin:0 -1px 0 0}

2. Kemudian Anda cari kode yang mirip seperti dibawah ini;

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>

Lalu simpan kode dibawah ini tepat dibawahnya;

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;
}
</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>

3. Lalu cari kode <b:include name='nextprev'/> dan ganti dengan kode 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>

4. Terakhir Anda Simpan.

Pengaturan

Pengaturan
Kode	Keterangan
perPage	Jumlah yang ingin ditampilkan dalam satu halaman
numPages	Jumlah navigasi halaman yang ingin ditampilkan
firstText	Teks halaman pertama
lastText	Teks halaman terakhir
nextText	Teks untuk halaman selanjutnya
prevText	Teks untuk halaman sebelumnya

Selamat mencoba..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250