Membuat Navigasi Halaman Ala Wordpress

Membuat Navigasi Halaman Ala Wordpress

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 Vietnam pada artikelnya yang berjudul Page Navigation với phong cách WP-PageNavi, disini Saya kan terjemahkan ke dalam Bahasa Indonesia agar para blogger Indonesia lebih memahaminya.

Cara Memasang Navigasi Halaman Ala Wordpress Pada Blog

1. Silakan Anda simpan kode CSS ini 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}
2. Kemudian Anda cari kode mirip seperti ini

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
Lalu simpan kode dibawah ini 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

KodeKeterangan
perPageJumlah yang ingin ditampilkan pada satu halaman
numPagesJumlah navigasi Halaman yang ingin ditampilkan
firstTextTeks halaman pertama
astTextTeks halaman terkahir
nextTextTeks untuk halaman selanjutnya
prevTextTeks untuk halaman sebelumnya

Artikel Terkait

Komentar

Hand Excel
in navigasi advanced nggak kang? kayaknya menarik buat di pasang di blog :-d
Kang Mousir
Navigasi Halaman keren pokoknya, mirip - mirip kayak di WordPress gitu :D
irvan robiansyah
bagus juga ya navigasi ini, kalah bagusnya navigasi yang ada di blog saya. hehe :D
Kang Mousir
hehe yang ini versi Wordpress nya :D
Soma Anggoro
keren sob. Navigasinya jadi fresh gt :]
Fathoni Muhammad
kalo yg wordpress tampilanya lebih bagus kayaknya kang... :-o
Kang Mousir
Sepertinya begitu gan, yang ini tampilan sederhananya :D
Si Ryan
wah ini sama kaya di blog kang mousir ya, keren kang :D
Kang Mousir
Betul blog ini juga pake navigasi ini, soalnya ringan :D
Dian AnaR-chyta
Keren ini navigasi, belom pernah lihat selain di blog kang mousir..
Kang Mousir
ini juga dapat dari blog orang Vietnam hehe :D
Heri Assidiqi
Keren navigasinya. Harus dicoba nich. Makasih Kang tipsny :)
Kang Mousir
Sama - sama kang Heri :D
helmi junior
Mau tanya kang, Responsivenya kok tidak seperti diblog kang-mousir ini.. ?
Gimana jadiin kaya gitu..
Kang Mousir
Yang ini Saya gak sediakan dengan versi responsivenya, kalau mau responsive tambahkan CSS ini. Media query dibawah untuk ukuran layar 768px
@media screen and (max-width:768px) {
.pagenavi .pages {display:none}
.pagenavi span,.pagenavi a{padding:5px;}
}
Anonim
Mantap Kang .. :)
Taufiq Hidayah
kenapa ya kok saat ane klik itu ..
nama blog ane gk muncul.. ??
Kang Mousir
Nama blog di bagian mana, header atau dibagian title bar ?
Enny Sastoro
saya sudah coba, bagus kang...


sayang... berat
m hariyanto
Alhamdulillah berhasil dipasang kang
sarnuji enji
Gan , kalo untuk bikin widget untuk pasang banner di atas header ukuran 468x60 gimana , di tunggu gan , responya email saya ya sarnujitea@gmail.com , mu build template :D
sarnuji enji
kalo pengen ganti warna gimane bang :)
Ivan Sadewo
dari kode CSS diatas, cari aja yang awalan CSSnya "#" (tanpa tanda petik) abis itu ganti angka-angkanya sesuai dengan kode angka CSS tersebut. nah buat cari kode warnanya, bisa pake yan ini > http://html-color-codes.info/#Html_Color_Chart
Adhi Dwinata
Trims Sudah Saya Pake dan Cukup berhasil

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Batal