Cara Mudah Membuat Unlimited Page Navigation di Blog Cara Mudah Membuat Unlimited Page Navigation di Blog - mizipediacom mizipediacom: Cara Mudah Membuat Unlimited Page Navigation di Blog

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Mudah Membuat Unlimited Page Navigation di Blog

Sunday, September 24, 2017



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.
Lihat Juga