Cara Gampang Menciptakan Tombol Next Page Dengan Angka Pada Blog

Baca Juga

Cara Praktis Membuat Tombol Next Page  Dengan Angka pada Blog Hai sahabat semua, kali ini akan memperlihatkan tips&trik perihal cara menciptakan tombol next page dengan angka pada blog. Kenapa harus ada tombol next page? jawabannya sangat sederhana, ialah biar pembaca dengan gampang melihat home page selanjutnya pada website atau blog sobat.

Oh iya sahabat tombol next page ini hanya dapat dipakai oleh Template Non AMP, kalau dipakai oleh Template Valid AMP, maka akan menjadikan template tersebut menjadi tidak valid AMP

Andaikata tidak ada tombol next page, baik pada website atau blog, maka dapat dipastikan yang namanya halaman homepage sudah niscaya memanjang ke bawah tanpa ada batasnya. Dan akan lebih menyulitkan lagi saat yang membaca ingin kembali ke atas atau back to top, maka hal tersebut sangat membosankan.

Oleh sebab itu di sinilah diharapkan sebuah tombol next page agar pembaca lebih gampang untuk menuju halaman selanjutnya dan website atau blog sahabat terkesan profesional.

Oke sahabat mari kita pribadi saja mulai cara menciptakan next page pada blog

Di sini ada dua cara yang dapat sahabat lakukan dan semuanya akan paparkan caranya, tinggal sahabat mau pilih cara yang mana terserah, tapi jikalau berdasarkan saya cara yang pertama lah yang lebih mudah

Pertama, sahabat login dulu ke akun blog sobat
Kedua, pilihlah layout atau tata letak
Ketiga, klik tambahkan gadget
Keempat, pilih html/javascript
Kelima, copy dan pastekan isyarat script di bawah ini

 <style>#blogpager{clear:both;margin:20px 0 20px;fontsize: 12px;padding:10px 0;}#blogpagernewerlink{float: left;}#blogpagerolderlink{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;webkitborderradius:4px;mozborderradius:4px;borderradius:4px;}.profiledata{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sansserif;fontvariant:smallcaps;margin:0;texttransform:capitalize;}.profiledatablock{margin:0.5em 0;}.profiletextblock{lineheight:1.6em;margin:0.5em 0;}a.profilelink{clear:both;display:block;font:80% monospace;padding:10px 0;textalign:center;texttransform:capitalize;}h2.dateheader, .PageList h2{display:none;}#blogpagerolderlink a,#blogpagernewerlink a,a.homelink,.showpageNum a,.showpage a{background: url(http://2.bp.blogspot.com/vMGk4QknV5A/Tw089TczI/AAAAAAAABJA/O21z_ybUJs/s1600/nav.jpg) repeatx;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px 5px;textdecoration:none;textshadow: 1px 0 1px #000;}#blogpagerolderlink a:hover,#blogpagernewerlink a:hover,a.homelink:hover,.showpageOf,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: url(http://1.bp.blogspot.com/9uSn4H6vTk8/Tw0_8Y1vQI/AAAAAAAABJE/jjhEM6mUFDk/s1600/nava.jpg) repeatx;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px 5px;textshadow: 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/hbpagenavi.js' type='text/javascript'></script> 

Sobat dapat Ganti 10 dengan jumlah posting yang akan ditampilkan dalam satu halaman.
Sobat dapat Ganti 5 dengan banyaknya tombol navigasi/tombol next.
Sobat dapat Ganti Prev. dengan teks yang akan memperlihatkan tombol sebelumnya.
Sobat dapat Ganti Next dengan teks yang akan memperlihatkan tombol selanjutnya

Nah itulah cara yang pertama sahabat untuk isyarat tersebut memang sudah di parse jadi sangat responsif sekali

Sekarang cara yang kedua. sebetulnya hampir sama caranya, akan tetapi bedanya hanya pada daerah menaruh isyarat scriptnya saja. ialah yang cara yang kedua pengaturannya melalui tema atau edit HTML

Pertama copy CSS di bawah ini dan letakkan di atas ></b:skin> atau letakkan di atas </style>, jikalau memang susah mencarinya silakan sahabat gunakan tombol control F

 /* Tombol Next Page Dengan Angka  */ .showpageArea{float:left;color:#555;fontsize:11px;margin:10px 0} .showpageArea a{color:#555;textshadow: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} 

Kedua copy isyarat script di bawah ini dan letakkan di atas </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, dan lihat hasilnya.


Bagaimana gampang bukan cara menciptakan tombol next page?

Ok sahabat , mungkin cukup sekian dulu dari perihal ulasan Cara Praktis Membuat Tombol Next Page Dengan Angka pada Blog, apabila ada yang kurang di mengerti silakan dipertanyakan pada kolom komentar