Cara Membuat Widget Navigasi Nomor Halaman Yang Keren Untuk Blog Atau Website

Hai, Sahabat. . Hari ini, saya akan membahas tentang Cara Membuat Widget Navigasi Nomor Halaman Yang Keren Untuk Blog Atau Website.

Daftar isi

1. Apa itu Widget Navigasi Nomor Halaman dan Apa Fungsinya?
2. Cara Membuat Widget Navigasi Nomor Halaman Yang Keren Untuk Blog Atau Website
3. Saran

Apa itu Widget Navigasi Nomor Halaman dan Apa Fungsinya?

Navigasi nomor halaman adalah widget yang berisi deretan nomor yang memudahkah para pembaca mengunjungi halaman tertentu dan mencari postingan yang mereka inginkan.

Nomor halaman pada blog atau website memiliki fungsi yang mirip dengan navigasi Next page atau page Previeous yang biasanya merupakan widget default atau bawaan dari blog. Nah. . di kesempatan ini, saya akan membahas cara membuat Navigasi nomor pada halaman blog atau website yang keren. Widget navigasi nomor halaman ini akan secara otomatis merubah next dan previous yang ada di blog atau website.

Cara Membuat Widget Navigasi Nomor Halaman Yang Keren Untuk Blog atau Website

Pada hari ini, saya akan memberikan cara membuat widget navigasi nomor halaman yang keren untuk blog dan website. Di tutorial ini, saya menggunakan platfom blogger untuk membuat widget navigasi nomor halaman.

1. Masuk ke Blogger

Pertama, Cara Membuat Widget Navigasi Nomor Halaman Yang Keren Untuk Blog atau Website, adalah Masuk Ke Blogger dengan menggunakan Akun Google kamu.




2. Edit HTML

Kedua, Cara Membuat Widget Navigasi Nomor Halaman Yang Keren Untuk Blog atau Website, adalah Pilih menu TEMA. Kemudian pilih EDIT HTML.




3. Letakkan Kode CSS

Ketiga, Cara Membuat Widget Navigasi Nomor Halaman Yang Keren Untuk Blog atau Website, adalah Cari kode ]]></b:skin> dan pastekan salah satu kode CSS berikut di atas kode tadi.





Kode Widget Navigasi Nomor Halaman Ke-1




#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}



Atau



Kode Widget Navigasi Nomor Halaman Ke-2




#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}


4. Letakkan Kode Script

Keempat, Cara Membuat Widget Navigasi Nomor Halaman Yang Keren Untuk Blog Atau Website, adalah Cari kode </body>. Jika sudah ketemu, letakkan kode SCRIPT berikut di atas kode tadi.




<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://www.geocities.ws/usmankurniawan/pagenation.js"/>
</b:if>


5. Klik SIMPAN

Saran

Gunakan CTRL+F untuk memudahkan pencarian kode. Jika kamu menggunakan Smartphone, gunakan aplikasi Quoda atau QuickEdit untuk mempermudah Edit HTML.

Demikianlah penjelasan tentang Cara Membuat Widget Navigasi Nomor Halaman Yang Keren Untuk Blog Atau Website.

Lihat juga:

• Cara Menjadikan Tag Heading H1 Sebagai Judul Postingan
• Cara Membuat Dan Memasang Breadcrumb Di Blog
• Cara Membuat Kotak Penelusuran Sitelink Di Blog

Semoga bermanfaat. .