BERBAGI APA SAJA UNTUK HIDUP LEBIH BAIK

Breaking

Friday, 28 July 2017

Cara Membuat Tombol Next Page Preview Di Blogspot dengan Angka

Salah satu ciri khas template standar bawaan Blogger adalah tombol navigasi next prev (blog pager) antara halaman item dan halaman beranda yang sama-sama masih menggunakan tiga pilihan, yaitu posting lama, posting baru, dan beranda. Dan ketiga tombol navigasi tersebut tidak akan berubah meskipun kita telah mengubah template standar menjadi responsive. Untuk itu, saya ingin berbagi Cara Membuat Tombol Next Page Preview Di Blogspot Dengan angka


Cara Membuat Tombol Next Page Preview Di Blogspot Dengan Angka Seperti Template Fastest MagzTombol 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 dari blog sobat. Tombol next page yang satu ini berbeda dengan tutorial blogger lainnya, karena mungkin tutorial ini belum pernah ada yang share dan CSS nya saya ambil dari Template Magnezmag, dan kode JavaScript nya saya ambil dari beberapa sumber. Dan saya upload ulang alamat javascript nya untuk mencegah apabila, hosting di google code dihapus, ada baiknya sobat upload ulang untuk mencegah terjadinya error.

Berikut ini Cara Membuat Tombol Next Page Preview Di Blogspot Dengan Angka :
1. Login ke blogger.com
2. Pada dashboar -> template -> klik edit HTML
3. Kemudian tambahkan kode dibawah ini diatas ]]></b:skin> 
/* Tombol Next Page Dengan Angka by Blog Krizeer
----------------------------------------------- */
.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}
4. Kemudian cari kode </body>, dan tambahkan kode dibawah ini tepat diatasnya: 
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord='Prev';
var downPageWord='Next';
</script>
<!-- Tombol Next Page by BlogKrizeer.blogspot.com -->
<script type="text/javascript" src="https://googledrive.com/host/0By9Vs49VphQqeWVMYzNqbWlNaU0"></script>
5. Simpan template

Catatan: silahkan sobat ganti angka "4", dan kata "Prev" dan "Next" yang saya kasih tanda kuning sesuai keinginan sobat. Angka 4 pertama itu akan menunjukan jumlah post yang ingin ditampilkan ketika mengklik salah-satu nomor pada tombol next page tersebut, dan angka 4 kedua akan menampilkan jumlah nomor yang ingin sobat tampilkan pada homepage blog sobat.
Sekian dulu ya sobat Blogger Cara Membuat Tombol Next Page Preview Di Blogspot dengan Angka terima atas kunjungannya. Jangan lupa share ke teman Anda bila artikel ini bermanfaat

No comments:

Post a Comment

Silahkan berkomentar dengan santun, menggunakan hati nurani dan tidak mengandung SARA, SEX DAN POLITIK.