Cara Pasang Nomor Halaman Navigasi

Ditulis oleh : Unknown, Pada : Sabtu, 11 Agustus 2012 - 07.00 wita
Pada umumnya dibawah Postingan Blog ada Link Previous - Home - Next dan ada juga yang berupa Image / Tanda atau memakai Nomor [angka] yang fungsinya tak perlu saya jelaskan karena semua kawan Blogger sudah mengetahuinya, tapi sekarang yang akan saya bahas adalah Cara Pasang Nomor Halaman Navigasi yang bahasanya mbah Google kurang lebih adalah Numbered Page Navigation, contohnya bisa kawan lihat di Blog saya ini :z;


Cara Pasangnya sebagai berikut :

  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
  • Copas script berikut kedalamnya

<!-- Numbered Page Navigation Widget For Blogger oleh BlogBego @ http://blogbego-creation.blogspot.com -->
<style type='text/css'>
#blog-pager{
font-size:normal;
padding:10px 0;
clear:both;
}
.showpageArea{
font-family:verdana,arial,helvetica;
color:#000;
font-size:11px;
margin:10px;
}
.showpageArea a{
color:#fff;
}
.showpageNum a{
padding:3px 8px;
margin:0 1px;
text-decoration:none;
background:#FFF;
border: 1px solid #999; -webkit-border-radius: 3px; -moz-border-radius:  3px; border-radius:3px;
}
.showpageNum a:hover{
background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),  color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#3b679e&#39;, endColorstr=&#39;#7db9e8&#39;,GradientType=0 );
border: 1px solid #333; -webkit-border-radius: 3px; -moz-border-radius:  3px; border-radius:3px;
}
.showpagePoint{
color:#fff;
padding: 4px 8px;
margin: 0 5px;
font-weight:700;
background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#aebcbf&#39;, endColorstr=&#39;#0a0809&#39;,GradientType=0 );
text-decoration:none;
border: 2px solid #F00; -webkit-border-radius: 15px; -moz-border-radius:  15px; border-radius:15px;
}
.showpageOf{
background:#95CAFF;
border: 1px solid #333; -webkit-border-radius: 3px; -moz-border-radius:  3px; border-radius:3px;
margin: 0 5px 0 0;
padding:3px 8px;
}
</style>
<script style='text/javascript'>
    var numshowpage=4;
    var postperpage =5;
    var upPageWord=&quot;Previous&quot;;
    var downPageWord=&quot;Next&quot;;
    var home_page=&quot;/&quot;;
    var urlactivepage=location.href;
</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/blogbego_pnavi.js' style='text/javascript'/>
<!-- Numbered Page Navigation Widget For Blogger oleh BlogBego @ http://blogbego-creation.blogspot.com -->

Kalau kawan ingin menyimpannya di Template 
Caranya sebagai berikut :
  • Pada Dasbor pilih Template
  • Beri tanda check disamping  
  • Cari <b:includable id='shareButtons' var='post'> atau <data:homeMsg/> yang pertama sebelum </b:includable> selengkapnya kurang lebih sebagai berikut :
 <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </b:if>
  </div>
  <div class='clear'/>

SIMPAN DISINI SCRIPTNYA 

</b:includable>
<b:includable id='shareButtons' var='post'>

Simpan Template kawan







Kalau ada yang kurang jelas pada Artikel
Cara Pasang Nomor Halaman Navigasi
» Ratting : 4.5
dan seandainya ada Artikel atau Link yang rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

4 Komentar pada : “Cara Pasang Nomor Halaman Navigasi”

  1. makin keren aja blogx ni sob..,
    btw page navigationx sy hapus skrg ganti dgn yg melayang aja.., thx for share ya... *smile

    BalasHapus
    Balasan
    1. Terima kasih kembali sudah berkunjung dan memberikan pendapat :z;

      Hapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM

KOMENTAR MENCERMINKAN KEPRIBADIAN
Klik untuk melihat kode:
Klik untuk melihat kode: