Tuesday, December 20, 2016

Cara Membuat Tombol Next Page pada Blog MUDAH!

Cara Membuat Tombol Next Page pada Blog MUDAH!


Saya kali ini share cara membuat tombol next page pada blog

 cara memasang tombol next page

langsung aja
- Log in akun blogger anda atau bisa klik disini
- ke dasboard lalu pilih Layout/Tata Letak
- kemudian klik tambahkan gadget
- pilih Html/JavaScript
- Kemudian Pastekan text dibawah ini

<style>#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJjS-SesAGAqkeVVbpX90bCX4w82lLJ5UOaeb4ylg7spkzJmgOOZrj2Pejt7UwZ0yaSOoxuMoaL1s33Qp5wEEW1Y9FlU8vss5Tp4Hpyg0j8tqx5nd3w200R5izf0TA7HpdiFyBNo9Trf0/s1600/nav.jpg) repeat-x;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkwVm5-hPcH7uWa6a_gyE9ODtL93WegjI4nmStJPlkDYy2f3A49OIJxeNhMbThHn3vPL3ogXWq829lOHE5UGvpsCxCmFzzfOHt-hqmrs_FBSN6CvJg4-7EiverPQe1zorp4gO5HXYsXiA/s1600/nava.jpg) repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}</style><script type=text/javascript>var postperpage=10;var numshowpage=5;var upPageWord="Prev.";var downPageWord="Next";var urlactivepage=location.href;var home_page="/"</script><script src=http://code.helperblogger.com/hb-page-navi.js type=text/javascript></script> -See More http://anggadwisaputrablog.blogspot.com/

- kemudian Save/Simpan
- Silahkan liat

Keterangan




  • Anda bisa Ganti 10 dengan jumlah posting yang akan ditampilkan dalam satu halaman.






  • Anda bisa Ganti 5 dengan banyaknya tombol navigasi/tombol next.






  • Anda bisa Ganti Prev. dengan teks yang akan menunjukkan tombol sebelumnya.






  • Anda bisa Ganti Next dengan teks yang akan menunjukkan tombol selanjutnya




  • Atau copy kode ini sebelum/diatasnya tag ]]></b:skin> kalo susah carinya tekan ctrl f

    /* Tombol Next Page Dengan Angka
    ----------------------------------------------- */
    .showpageArea{float:left;color:#555;font-size:11px;margin:10px 0}
    .showpageArea a{color:#555;text-shadow:0 1px 2px #fff}
    .showpageNum a:hover,.showpage:hover{border:1px solid #b2b2b2;color:#555!important}
    .showpage{margin:0}
    .showpage:hover a{color:#555!important}
    .showpagePoint{background:#f8f8f8;border:1px solid #b2b2b2;margin:0 2px 0 0;padding:5px 12px}
    .showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8;background:#f8f8f8;margin:0 2px 0 0;padding:5px 12px}

    dan kode script ini di atas/sebelum </body>
    <script type=text/javascript>
    var pageCount=4;
    var displayPageNum=4;
    var upPageWord=Prev;
    var downPageWord=Next;
    </script>
    <!-- Tombol Next Page  -->
    <script type="text/javascript" src="https://googledrive.com/host/0By9Vs49VphQqeWVMYzNqbWlNaU0"></script>

    - kemudian Save Template

    Go to link Download