6 Macam Style Navigasi Halaman Untuk Blogger

6 Macam Style Navigasi Halaman Untuk Blogger

Ahmad Rifai Posted by at
Kali ini saya akan menuliskan tutorial untuk blogger tentang cara membuat navigasi halaman di blogger (navigasi 1 > 2 > 3 > ... Next).

Sebenarnya dulu saya sudah pernah menuliskan caranya yaitu : Cara Membuat Navigasi Halaman Di Blogger (1>2>3>dst...)

Pada tutorial kali ini saya akan menuliskan panduan membuat blogger pagenavi yang berbeda dengan script terdahulu, selain itu di sini saya juga menyertakan 6 macam style (css) yang nantinya bisa kamu pilih sesuai selera.

Ok mari kita mulai ....

Ups ... Hampir lupa, sebaiknya backup dulu template yang kamu gunakan, agar jika terjadi hal-hal yang tidak diinginkan atau ada eror kamu bisa mengembalikannya seperti semula.

Cara Pasang Navigasi Halaman

  1. Login ke blogger
  2. Klik Rancangan/Design, kemudian klik menu Edit HTML (bagi pengguna blogger tampilan baru langsung ke tab Template saja)
  3. Beri centang pada bagian Expand Template Widget
Cari kode berikut
</body>
Jika kamu merasa susah mencari kode tersebut silakan baca dulu Cara Mudah + Cepat Mencari Kode Html di Blogger
Jika kode tersebut sudah dapat silakan pasang kode berikut di atas kode</body> tadi
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
atau jika tidak bisa gunakan yang ini 
<script type='text/javascript'>//<![CDATA[
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
//]]></script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
Catatan :
var postperpage=10; = jumlah poting perpage (perhalaman)
var numshowpage=4; = jumlah nomor navigasi yang ditampilkan
Jangan disimpan dulu ya, karena masih ada kode yang haru kamu pasang lagi.
Sekarang cari kode
'data:label.url'
Kemudian ganti kode tersebut dengan kode ini
'data:label.url + &quot;?&amp;max-results=10&quot;'
Lajut ...

6 Macam Style Navigasi Halaman Untuk Blogger

Sekarang cari kode ]]></b:skin>
Jika sudah dapat silakan pasang kode css berikut tepat di atasnya, kemudian simpan pengaturan template kamu. Silakan pilih salah satu dari 6 Style berikut (Ingat, salah satu saja, urutan gambar di atas sudah saya sesuaikan dengan urutan style):
Style 1
.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
  
.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjneIpfDDKPdsFiDCoOEkxhxgqNUfuDH5DqCS1Amapq07gdZsc8fVGnzlepb78boMmEPWFydAQ7rBNEjsy7M6auF5nN_bGrlKIyRz1ikfbpvYCud3KiDkk1TTqqyTMJPgtSSnaaEIBSmTw/s1600/wp1.jpg) 0 -50px repeat-x;
  }
  
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjneIpfDDKPdsFiDCoOEkxhxgqNUfuDH5DqCS1Amapq07gdZsc8fVGnzlepb78boMmEPWFydAQ7rBNEjsy7M6auF5nN_bGrlKIyRz1ikfbpvYCud3KiDkk1TTqqyTMJPgtSSnaaEIBSmTw/s1600/wp1.jpg) 0 -25px repeat-x;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjneIpfDDKPdsFiDCoOEkxhxgqNUfuDH5DqCS1Amapq07gdZsc8fVGnzlepb78boMmEPWFydAQ7rBNEjsy7M6auF5nN_bGrlKIyRz1ikfbpvYCud3KiDkk1TTqqyTMJPgtSSnaaEIBSmTw/s1600/wp1.jpg) 0 0 repeat-x;
  text-decoration: none;
  }
Style 2
.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
  
.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #919106;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-kE8tyMZf2NUFp1KA-gIpB7sA6km_QVkcKQ5LtNO7kv5pLgRfe4a80eMaS2qqopL6ru73Lg74asZ4d1dpi3ZBNTbefwovtkWRK2BVGh2TfAEA4hy_PUB8EabkrUfODu52bdfzKFadOTI/s1600/wp2.jpg) 0 -50px repeat-x;
  }
  
.showpageNum a:hover {
  border:1px solid #aeae0a;
  background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-kE8tyMZf2NUFp1KA-gIpB7sA6km_QVkcKQ5LtNO7kv5pLgRfe4a80eMaS2qqopL6ru73Lg74asZ4d1dpi3ZBNTbefwovtkWRK2BVGh2TfAEA4hy_PUB8EabkrUfODu52bdfzKFadOTI/s1600/wp2.jpg) 0 -25px repeat-x;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #919106;
  background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-kE8tyMZf2NUFp1KA-gIpB7sA6km_QVkcKQ5LtNO7kv5pLgRfe4a80eMaS2qqopL6ru73Lg74asZ4d1dpi3ZBNTbefwovtkWRK2BVGh2TfAEA4hy_PUB8EabkrUfODu52bdfzKFadOTI/s1600/wp2.jpg) 0 0 repeat-x;
  text-decoration: none;
  }
Style 3
.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
  
.showpageArea a {
  color: #fff;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #363636 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1tDU47WfVGwVnetN642J2AevFe6jx3VXHWzpZMT8yr0o7Wl59X-QfCZ2YzJDJn_eBgITgfxUss_-0IOZZ-YMFJE_UhOIr5zVcQRf8217EtaaqQBUzQsj6jk8yUADGWsCONaVtpQZHO-0/s1600/wp3.jpg) 0 -25px repeat-x;
  }
  
.showpageNum a:hover {
  background: #044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1tDU47WfVGwVnetN642J2AevFe6jx3VXHWzpZMT8yr0o7Wl59X-QfCZ2YzJDJn_eBgITgfxUss_-0IOZZ-YMFJE_UhOIr5zVcQRf8217EtaaqQBUzQsj6jk8yUADGWsCONaVtpQZHO-0/s1600/wp3.jpg) 0 -50px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1tDU47WfVGwVnetN642J2AevFe6jx3VXHWzpZMT8yr0o7Wl59X-QfCZ2YzJDJn_eBgITgfxUss_-0IOZZ-YMFJE_UhOIr5zVcQRf8217EtaaqQBUzQsj6jk8yUADGWsCONaVtpQZHO-0/s1600/wp3.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }
Style 4
.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
  
.showpageArea a {
  color: #fff;
  }
  
.showpageNum a {
  padding: 3px 4px;
  margin:0 4px;
  text-decoration: none;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwN7RQBnWpLjGbPAntktmJ9w0YU9qhtECZ7qyNqbmq3AtFEN-TOLDKfC9RwvKYf9wv8jpx8Yul3hNtBdq_DestfWgOcCNvTiXcZ5yaPH0PXrIZLBNozTO1gxwTHt3V14QNsUZbuitNojw/s1600/wp4.jpg) 0 -25px repeat-x;
  }
  
.showpageNum a:hover {
  border-top:2px solid #999;
  border-left:1px solid #999;
  border-right:1px solid #999;
  border-bottom:1px solid #999;
  background: #999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwN7RQBnWpLjGbPAntktmJ9w0YU9qhtECZ7qyNqbmq3AtFEN-TOLDKfC9RwvKYf9wv8jpx8Yul3hNtBdq_DestfWgOcCNvTiXcZ5yaPH0PXrIZLBNozTO1gxwTHt3V14QNsUZbuitNojw/s1600/wp4.jpg) 0 -50px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwN7RQBnWpLjGbPAntktmJ9w0YU9qhtECZ7qyNqbmq3AtFEN-TOLDKfC9RwvKYf9wv8jpx8Yul3hNtBdq_DestfWgOcCNvTiXcZ5yaPH0PXrIZLBNozTO1gxwTHt3V14QNsUZbuitNojw/s1600/wp4.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }
Style 5
.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
  
.showpageArea a {
  color: #fff;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghvmfGTpV7PMDus66F3kAp2qx3hjwdPq8HsWPUfkJ1pLWS2B4ktD-VpsdcdCOmgtSjp6sJJNy3pV3opImDIFzKRBRWBHGpbeJEg1fFbUnf-rQCjgFHuWKyhzwkZ0miqpj9iJeZ1awY9Io/s1600/wp5.jpg) 0 -50px repeat-x;
  }
  
.showpageNum a:hover {
  background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghvmfGTpV7PMDus66F3kAp2qx3hjwdPq8HsWPUfkJ1pLWS2B4ktD-VpsdcdCOmgtSjp6sJJNy3pV3opImDIFzKRBRWBHGpbeJEg1fFbUnf-rQCjgFHuWKyhzwkZ0miqpj9iJeZ1awY9Io/s1600/wp5.jpg) 0 -25px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghvmfGTpV7PMDus66F3kAp2qx3hjwdPq8HsWPUfkJ1pLWS2B4ktD-VpsdcdCOmgtSjp6sJJNy3pV3opImDIFzKRBRWBHGpbeJEg1fFbUnf-rQCjgFHuWKyhzwkZ0miqpj9iJeZ1awY9Io/s1600/wp5.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }
Style 6
.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #fff;
  font-size:11px; 
  margin:10px;
  padding:8px 20px;
  background: #333;
  }
  
.showpageArea a {
  color: #fff;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #666;
  }
  
.showpageNum a:hover {
  background: #888;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #da6100;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

Nah itulah tutorial membuat navigasi halaman di blogger.

Sumber 6 Macam Style Navigasi Halaman Untuk Blogger :
http://www.abu-farhan.com/2009/12/six-style-page-navigation-for-blogger/
http://www.abu-farhan.com/2009/12/numbered-page-navigation-for-blogger-new-script/
Selamat mencoba dan semoga berhasil
Artikel ini telah saya update pada 14 Februari 2012
Label:
Share this:

19 comments:

  1. royansablengJanuary 24, 2012 at 3:36 PM

    jika di halaman seperti about me tidak menggunakan navigasi caranya gmana ya???

    ReplyDelete
  2. AnonymousJanuary 24, 2012 at 11:06 PM

    terima kasih atas informasinya yang bermanfaat

    ReplyDelete
  3. Ahmad RifaiJanuary 25, 2012 at 1:34 PM

    @Royan Sableng Ntar deh saya coba tuliskan. Sabar ya

    ReplyDelete
  4. Daffa.O.FFebruary 12, 2012 at 3:11 PM

    koq ane gak nemua kode?

    udah nyari pake ctrl+f koq

    ReplyDelete
  5. Setya BhaktiFebruary 14, 2012 at 9:10 PM

    Page nya yang saya coba kok gak keluar gan???
    Terima Kasih

    ReplyDelete
  6. Ahmad RifaiFebruary 14, 2012 at 11:56 PM

    @Setya Bhakti Silakan gunakan script baru. (Artikel sudah saya update)

    ReplyDelete
  7. UnknownApril 9, 2012 at 7:12 PM

    wahhhh keren gan tuhhh bleh di coba gan makasih infonya,,,,!!

    ReplyDelete
  8. AnonymousApril 9, 2012 at 7:17 PM

    siiippp gan keren tuh bisa di coba nihhhh,,,,!!!

    ReplyDelete
  9. AnonymousMay 4, 2012 at 5:25 PM

    Gan kok ada tulisan Widget by Abu-farhan
    Bisa di hapus ga?

    ReplyDelete
  10. UnknownMay 12, 2012 at 9:44 AM

    kode diHTMLku yg 'data:label.url' g da. . .
    >_<

    ReplyDelete
  11. AnonymousMay 13, 2012 at 12:07 PM

    Wihhh gan saya sudah praktekin dan berhasil makasih gan atas infonya,,,,,!! mantap gan,,,,

    ReplyDelete
  12. AdminMay 17, 2012 at 1:03 PM

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".
    Error 500


    jadi kek gini gan punya ane... ajarin dong.. bang..!!!

    ReplyDelete
  13. AnonymousMay 18, 2012 at 6:09 PM

    kode css nya gk fungsi mas,jadi next pagenya gk ada style

    ReplyDelete
  14. PanduMay 24, 2012 at 9:01 AM

    thanks

    ReplyDelete
  15. UnknownMay 27, 2012 at 5:18 PM

    wah makasih bgt, aku coba bisa kok :)

    ReplyDelete
  16. Ramzi EbazJune 22, 2012 at 5:46 AM

    Aku suka style yang ke-6 tu, bagus banget..

    ReplyDelete
  17. AnonymousJuly 6, 2012 at 2:01 PM

    Thanks gan tutorialnya...

    ReplyDelete
  18. Aulia Naufal AfifJuly 24, 2012 at 10:11 PM

    lho di label lain kok gak muncul gan?

    ReplyDelete
  19. UnknownAugust 15, 2012 at 6:25 AM

    Kodetiknya bagus Gan...tp salahnya Ada nama Yg membuat Wigetnya ...jadi saya Hapus lagi...heheheh

    ReplyDelete

Subscribe to: Post Comments (Atom)
    • Powered by Blogger.
    Powered by Blogger Template by Ahmad Rifai