Cara membuat Navigasi Halaman pada blog

Membuat Page Navigaton
Navigasi pada halaman blog adalah termasuk salah satu hal yang perlu kita berikan pada blog kita. Navigasi pada blog akan membantu pengunjung blog kita dalam menelusuri blog kita. Biasanya pada blog yang menampilkan beberapa halaman pada halaman utama dan menggunakan fungsi readmore dibutuhkan sebuah navigasi untuk memudahkan pengunjung untuk menuju halaman yang diinginkan. dengan menambahkan navigasi halaman ini blog kita akan terlihat profesional. Bagi yang ingin mencobanya silahkan simak dan ikuti panduan ini.

Berikut ini adalah cara membuat navigasi halaman pada Blog :
  1. Silahkan login pada akun blog sobat
  2. Pilih Blog yang akan sobat pasangkan navigasi halaman lalu pilih Template "Sobat simpan dulu template sobat dengan mengklik Cadangkan/Pulihkan lalu download template sobat. Jika terjadi kesalahan, blog sobat bisa di pulihkan lagi" Jika sudah di back up templatenya Klik Edit HTML
  3. Klik tanda panah hitam lalu cari Kode berikut ini dengan menekan Ctrl + F pada Editor HTML:
    <b:include name='nextprev'/>
  4. Kode ini ada dua, Pilih yang pertama yang berdekatan dengan kode berikut, atau anda bisa menempatkan kode No.4 dibawah kode berikut :
    <b:if cond='data:top.showStars'>
        <script src='http://www.google.com/jsapi' type='text/javascript'/>
        <script type='text/javascript'>
          google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
          function initialize() {
            google.annotations.setApplicationId(<data:top.blogspotReviews/>);
            google.annotations.createAll();
            google.annotations.fetch();
          }
          google.setOnLoadCallback(initialize);
        </script>
      </b:if>
  5. Masukkan kode berikut :
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <!-- navigation -->
      <b:include name='nextprev'/>
    
    <!--Page Navigation Starts-->
    <script type='text/javascript'>
        var postperpage=5;
        var numshowpage=5;
        var upPageWord =&#39;Previous&#39;;
        var downPageWord =&#39;Next&#39;;
        var urlactivepage=location.href;
        var home_page=&quot;/&quot;;
      </script>
    <script src='http://sip-online.googlecode.com/files/halaman.js' type='text/javascript'/>
    
    </b:if>
    </b:if>
  6. Lalu masukkan kode CSS berikut untuk style navigasinya didalam kode <style>... </style> atau <b:skin>.... </b:skin>:
    #blog-pager{background:#F6F6F6;border:1px solid #CDCDCD;padding:2px 6px}
    .showpageNum a,.showpage a{font:12px Arial,Verdana;text-decoration:none;background:transparent;color:#696969;border:1px solid #ECE9E4;margin:0 4px;padding:5px 9px}
    .showpageNum a:hover,.showpage a:hover{color:#696969;background:url(&quot;http://3.bp.blogspot.com/-UUtW6anJKsk/Tkjr442Rp8I/AAAAAAAACQE/fr2fs504-3U/s1600/wp-pagenavi-bg.png&quot;) repeat-x scroll left -123px #226BB6;border:1px solid #E6E4E0}
    .showpageArea{float:left;font:15px Arial,Verdana;color:#0f1525;margin:10px 0}
    .showpageOf{color:#696969;font:11px Arial,Verdana;background:transparent;margin:0 8px 0 0;padding:5px 9px}
    .showpagePoint{color:#fff;font:bold 11px Arial,Verdana;border:1px solid #0197BB;background:url("http://3.bp.blogspot.com/-UUtW6anJKsk/Tkjr442Rp8I/AAAAAAAACQE/fr2fs504-3U/s1600/wp-pagenavi-bg.png") repeat-x scroll left top #02A5CA;text-decoration:none;margin:2px;padding:5px 9px}
    
  7. Simpan Template sobat
Selanjutnya
« Sebelumnya
Sebelumnya
Selanjutnya »