Showing posts with label next. Show all posts
Showing posts with label next. Show all posts

Thursday, December 29, 2016

Cara Membuat Tombol Next Page Dengan Angka

Cara Membuat Tombol Next Page Dengan Angka


Cara Membuat Tombol Next Page Dengan Angka

Tombol Next Page Dengan Angka
Cara Membuat Tombol Next Page Dengan Angka - Sahabat blogger pada kesempatan pagi yang cerah ini bang dadan akan membuat artikel tentang Cara Membuat Tombol Next Page Dengan Angka. Tombol next page ini sama fungsinya dengan tombol next page, previous, dan home yang terdapat pada bagian bawah postingan, namun yang satu ini kita merubah itu semua dengan angka, tujuan nya agar para pengunjung lebih mudah menjelajahi isi daripada blog kita.
Oke langsung saja bagi sobat yang ingin melihat DEMO nya silahkan sobat lihat pada bagian bawah blog ini, dan contoh nya silahkan sobat perhatikan gambar dibawah ini:

Tombol Next Page Dengan Angka
Cara Membuat Tombol Next Page Dengan Angka

  1. Login ke blog
  2. Masuk ke dasbor dan klik template => pilih Edit HTML
  3. Backup Dulu Template anda dengan meng Klik Download Full Template (Terserah anda Ya atau Tidak.tapi lebih baik Ya)
  4. Centang Expand Template Widget
  5. Cari Kode ]]></b:skin> Copy kode di bawah lalu paste di atas kode ]]></b:skin>
.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}

7. Selanjutnya cari kode </body>
8. Copy lalu paste kode di bawah ini tepat si atas kode </body>

<script type=text/javascript>
var pageCount=5;
var displayPageNum=5;
var upPageWord=Previous;
var downPageWord=Next;
</script>
<script src=http://codecbd.googlecode.com/files/page-no.js type=text/javascript/>

9. klik pratinjau untuk memastikan terjadinya kesalahan
10. Apabila sudah oke dan silahkan sobat klik simpan template
11. Selesai

Sekian dulu pembahasan kita kali ini tentang Cara Membuat Tombol Next Page Dengan Angka, Apabila ada yang ingin ditanyakan silahkan tinggalkan pesan pada kotak komentar. 
Terimakasih, selamat mencoba dan semoga bermanfaat..!!!


Go to link Download

Read more »

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

    Read more »