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.

Page Navigation
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

Unknown
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
Almamater Jakarta
bagus juga ya navigasi ini, kalah bagusnya navigasi yang ada di blog saya. hehe :D
Kang Mousir
hehe yang ini versi Wordpress nya :D
Qu
keren sob. Navigasinya jadi fresh gt :]
Unknown
kalo yg wordpress tampilanya lebih bagus kayaknya kang... :-o
Kang Mousir
Sepertinya begitu gan, yang ini tampilan sederhananya :D
Unknown
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 Anarchyta
Keren ini navigasi, belom pernah lihat selain di blog kang mousir..
Kang Mousir
ini juga dapat dari blog orang Vietnam hehe :D
Gupitan
Keren navigasinya. Harus dicoba nich. Makasih Kang tipsny :)
Helmi Fatur Rohman
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;}
}
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 ?
Unknown
saya sudah coba, bagus kang...


sayang... berat
M. HARIYANTO
Alhamdulillah berhasil dipasang kang
A-Man Behind U
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
A-Man Behind U
kalo pengen ganti warna gimane bang :)
sJun
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
tes
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