Langsung ke konten utama

Membuat Menu Nomor Navigasi Halaman Blog


Pada dasarnya menu navigasi default blogger hanya posting baru, beranda, posting lama atau newer post, home, older post. Namun kita dapat mengganti-nya dengan angka sehingga lebih mempercantik tampilan blog kita pada homepage-nya. Caranya yakni dengan menambahkan CSS dan JavaScript yang ada pada penjelasan dibawah ini.

Cara Memasang

Memasang CSS

Langkah 1. Pergi ke Template --> Edit HTML

Cara Membuat Menu Nomor Navigasi Halaman pada Blog

Langkah 2. klik sembarang di kotak HTML lalu Cari (CTRL+F):
]]></b:skin>
Cara Membuat Menu Nomor Navigasi Halaman pada Blog

Langkah 3. Copy salah satu kode style berikut dan Paste di atasnya:

*Style 1:
Cara Membuat Menu Nomor Navigasi Halaman pada Blog
  #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #blog-pager .pages{border:none;}

*Style 2:
Cara Membuat Menu Nomor Navigasi Halaman pada Blog
  #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

*Style 3:
Cara Membuat Menu Nomor Navigasi Halaman pada Blog
#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;}

*Style 4:
Cara Membuat Menu Nomor Navigasi Halaman pada Blog
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

*Style 5:
Cara Membuat Menu Nomor Navigasi Halaman pada Blog
 #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: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

*Style 6:
Cara Membuat Menu Nomor Navigasi Halaman pada Blog
 #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;}  

*Style 7:
Cara Membuat Menu Nomor Navigasi Halaman pada Blog
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Memasang Script

Langkah 4. lalu Cari (CTRL+F)
</body>
    Copy dan Paste kode berikut diatasnya:
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<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="https://www.googledrive.com/host/0Bx3eaQ_Etz__ZXJOeXJnSndWYVU"/>
</b:if>
</b:if>
Konfigurasi:
*perPage: berapa  banyak posting yang akan ditampilkan dalam tiap page (7)
*numPages: berapa banyak page yang akan ditampilkan pada menu navigasi (6)
*Tulisan First, Last, Previous, Next dapat diganti apabila Anda ingin menggantinya.

Langkah 5. Simpan Template

Selamat Mencoba.
Good Luck!

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Mod Immortal Treasure Trove Carafe 2018

Mod immortal Treasure Trove Carafe 2018. This treasure contain of : Huskar - The Spoils of Dezun, Ogre Magi - Gimlek Decanter, Pangolier - Mask of Confidant, Venomancer - Cult of Aktok, Rubick - Crux of Perplex, Disruptor - Orb of Deliverance, Silencer - Glaive of Oscilla, Storm Spirit - Mandate of the Stormborn, Windranger - Sylvan Vedette and Mirana mount - Axia of Metira. Hope you guys like this mods cosmetic skin and support our favorite game Dota 2 in steam community market. No money? Just mods! Enjoy the game and boost your Matchmaking Ratings MMR and Seasonal Rankings Medals !
Posting Komentar
Baca selengkapnya

Cara Menambah Tulisan diatas Kotak Komentar Blog

Menambahkan tulisan atau text diatas kotak atau kolom komentar blogger adalah salah satu cara dimana owner blog dapat memberikan pesan kepada pengunjung blog tersebut. Biasanya pesan yang dicantumkan seperti aturan berkomentar (sopan, tidak mengandung kata-kata sara, p*rn*grapi, dll) ataupun ajakan berkomentar pada blog tersebut. Selain itu sobat juga dapat mengganti tulisan " poskan komentar " dengan text ataupun gambar sesuka sobat. Sobat dapat membaca nanti di Mengganti Tulisan Poskan Komentar di Blog . Pada posting kali ini saya membahas 2 cara, Cara 1 merupakan bawaan dari blogger yang mudah digunakan. Cara 2 dengan mengedit HTML template blog, Kelebihan untuk cara 2 ini adalah kita dapat mengedit tulisannya dengan membuat background, tulisan miring, bold dan lainnya cukup dengan menambahkan kode HTML. Cara 1: Langkah 1. Pada Dashboard blogger sobat scroll kebawah --> Setelan --> Pos dan Komentar . Pada Pesan Formulir Komentar klik Tambahkan. Langkah 2. Form un...
Posting Komentar
Baca selengkapnya

Cara Membuat Tombol Kembali ke Atas di Blog

Membuat tombol kembali keatas (back to top) pada blog dengan menggunakan kode HTML, Javascript, CSS atapun jQuery. Fungsi dari tombol ini adalah apabila pengunjung blog scroll kebawah maka akan muncul tombol back to top yang memudahkan pengunjung untuk kembali pada posisi atas dari posting blog tanpa susah menggunakan mouse untuk keatas. Memasang Tombol Kembali ke Atas Pada dashboard blog, pilih Template --> Edit HTML --> Klik pada area kosong kotak Edit HTML dan Cari (CTRL+F) kode berikut: </head> Selanjutnya ikuti langkah dibawah ini. Silahkan anda pilih salah satu efek dari tombol ke atas berikut: 1. Membuat Tombol Kembali ke Atas dengan Efek Halus Langkah 1. Letakkan kode berikut diatas  </head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> <script type='text/javascript'> $(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#Scrol...
Posting Komentar
Baca selengkapnya