Blog Personal tentang tips Blogging dan Internet

Membuat Navigasi Halaman Ala Wordpress

Forward
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

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Kang Mousir langsung di pesan kotak masuk.

feedburner

36 Komentar untuk "Membuat Navigasi Halaman Ala Wordpress"

Hand Excel

in navigasi advanced nggak kang? kayaknya menarik buat di pasang di blog :-d

irvan robiansyah

bagus juga ya navigasi ini, kalah bagusnya navigasi yang ada di blog saya. hehe :D

Soma Anggoro

keren sob. Navigasinya jadi fresh gt :]

Fathoni Muhammad

kalo yg wordpress tampilanya lebih bagus kayaknya kang... :-o

Si Ryan

wah ini sama kaya di blog kang mousir ya, keren kang :D

Dian AnaR-chyta

Keren ini navigasi, belom pernah lihat selain di blog kang mousir..

Heri Assidiqi

Keren navigasinya. Harus dicoba nich. Makasih Kang tipsny :)

Kang Mousir

Navigasi Halaman keren pokoknya, mirip - mirip kayak di WordPress gitu :D

Kang Mousir

hehe yang ini versi Wordpress nya :D

Kang Mousir

Sepertinya begitu gan, yang ini tampilan sederhananya :D

Kang Mousir

Betul blog ini juga pake navigasi ini, soalnya ringan :D

Kang Mousir

ini juga dapat dari blog orang Vietnam hehe :D

Si Ryan

hehe emang mantap dah template kang mousir ini :D :-d

Kang Mousir

terima kasih sob, template sobat juga gak kalah mantap dan keren :D

Dian AnaR-chyta

Keren kang setelah di pasang..

Si Ryan

masih bagusan punya kang mousir, fiture full tapi loadingnya tetap cepat, kalau punya saya banyak fiture makin berat :D

Kang Mousir

Padahal di GTMetrik cukup berat nih blog :)

Kang Mousir

Pasti soalnya yang ini ringan daripada Page Navigation sebelumnya dan juga berfungsi di semua halaman kecuali halaman post dan statis ;)

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;}
}

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

m hariyanto

diletakkannya dimana Kang CSS nya biar responsive

m hariyanto

sudah dicoba...
hasilnya responsive :-d
TERIMAKASIH TELAH BERBAGI

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 :)

Adhi Dwinata

Trims Sudah Saya Pake dan Cukup berhasil

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

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 !

Klik emoticon : :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d