Cara Mudah Membuat Unlimited Page Navigation di Blog




Cara Mudah Membuat Unlimited Page Navigation di Blog
Cara Mudah Membuat Unlimited Page Navigation di Blog

Page Navigation ini mempunyai fitur penomoran seperti di atas, sebelum dan selanjutnya sehingga para pengunjung blog kita dapat dengan  udah untuk mengakses halaman selanjutnya maupun halaman tertentu yang di tandai dengan penomoran halaman.

Unlimited Page Navigation ini mempunyai fitur memuat mencapai 10000 artikel/postingnan yang pada umumnya page navigation hanya berfugsi menampilkan 500 artikel. dan saya rasa tidak sedikit para blogger menggunakan Unlimited Page Navigation ini baik blogger pemula maupun yang sudah master, nah ini dikarenakan page navigation ini selain mempunyai fitur dapat memuat 10 ribu artikel, unlimited page navigation ini juga sangat dinamis untuk di pasang di blog anda, jadi sebaiknya anda juga memasang unlimited page navigation ini di blog pada blog anda  biar terlihat kece sedikit lah.

Jika anda tertarik untuk membuat page navigation tersebut, maka anda bisa ikuti langkah-langkah di bawah ini lah.

Membuat Unlimited Page Navigation di Blogger

  1. Pertama , pastikan anda sudah masuk di dasbhor milik anda sendiri
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Temukan kode simpan sebelum Kode </head>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style type='text/css'>
    /* Page Navigation V-Terang */
    #blog-pager{background:#fff;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 0 5px 0}
    .showpage a,.showpageNum a,.showpagePoint,.showpageOf{position:relative;background:#fff;display:inline-block;font-size:13px;color:rgba(0,0,0,.8);padding:5px 8px;margin:0 4px 0 0;box-shadow:0 1px 4px 1px rgba(0,0,0,0.1);border-radius:2px;transition:all .3s}
    .showpageNum a:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02);transition:box-shadow 0.5s}
    .showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.03);color:#333;position:relative;}
    .showpagePoint{background:#2980b9;color:#fff;}
    @media screen and (max-width:640px) {
    #blog-pager {padding:12px;}
    .showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0;box-shadow:0 1px 2px 1px rgba(0,0,0,0.1);}}
    @media screen and (max-width:320px) {
    .showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
    </style>
    </b:if>
    </b:if>
  4. Anda bisa Copy/pilih salah satu kode di atas atau di bawah ini,  yang atas Unlimited Page Navigation nya berwarna Putih dan yang bawah ini berwarna Hitam, jadi anda pilih salah satu saja kode tersebut.
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style type='text/css'>
    /* Page Navigation V-Gelap */
    #blog-pager{background:#2d3141;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 0 5px 0}
    .showpage a,.showpageNum a,.showpagePoint,.showpageOf{background:rgba(255,255,255,.1);display:inline-block;font-size:13px;color:rgba(255,255,255,.8);padding:5px 10px;margin:0 2px 0 0;border-radius:2px;transition:all .3s}
    .showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.2);color:#fff;position:relative;}
    .showpagePoint{background:#70c3eb;color:#fff;z-index:200;position:relative;}
    @media screen and (max-width:640px) {
    #blog-pager {padding:12px;}
    .showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0}}
    @media screen and (max-width:320px) {
    .showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
    </style>
    </b:if>
    </b:if>
  5. Langkah selanjutnya anda simpan kode JS di bawah ini sebelum kode </body>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <script type='text/javascript'>
    /*<![CDATA[*/
    var postperpage=5;var numshowpage=3;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";
    /*]]>*/
    </script>
    <script src='https://cdn.rawgit.com/zaiv/MasDzgn-html/master/u.p.nav.js' type='text/javascript'/>
    </b:if>
  6. Ganti kode postperpage=5 dengan jumlah artikel yang akan ditampilkan di setiap halaman dan ganti angka 3 pada kode numshowpage=3 menjadi jumlah nomor yang ditampilkan di Page Navigation ini
  7. Selanjutnya anda bisa cari Kode HTML post dibawah ini
    <b:includable id='main' var='top'>
  8. Kemudian scroll mouse ke bawah dan temukan kode dibawah ini:
    <!-- navigation -->
        <b:include name='nextprev'/>
  9. Ganti kode diatas (atau yang mirip sesuai template yang sobat gunakan) dengan kode dibawah ini 
    <!-- navigation -->
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
            <b:include name='nextprev'/>
        <b:else/>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
            <b:include name='nextprev'/>
        <b:else/>
            <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <!-- navigation -->
    <b:include name='nextprev'/>
    </b:if>
        </b:if>
        </b:if>
  10. Simpan hasil Edit Template sobat dan lihat hasilnya.
Gimana sangatlah mudah bukan membuat Unlimited Page Navigation di Blog? atau bahkan anda pusing melihat kode-kode tersebut ? jika anda pusing itu wajar sekali , karena saya waktu awal obrak - abrik template juga mengalamai hal yang sama , jadi anda harus tetap semangat dan jangan mudah menyerah jika ingin pinter ya , kalau masih gagal ya dicoba lagi sampai bisa , selamat memodifikasi Unlimited Page Navigation di Blog, jika anda kurang jelas bisa klik tombol di bawah ini. salam blogger.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect