RadarURL

Artikel Terbaru

Membuat Page Navigation Sederhana

Menanggapi pertanyaan dari salah satu sahabat terbaik anak baik yaitu, Herman Bagus. Beliau menanyakan kepada saya tentang Bagaimana cara membuat page navigation.


Berikut ini langkah langkahnya membuat page navigation versi anak baik :

  • Pertama tama seperti masuk kehalaman Dashboard sobat dan pilih Template >> Edit Html
  • Jangan lupa untu memberi cek list Expand Template Widget
  • Cari kode  ]]></b:skin> supaya lebih cepat dalam pencarian tekan Ctrl + F
  • Setelah itu masukan kode berikut diatas kode ]]></b:skin>

#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
     margin: 0 5px 0 0;
     padding: 2px 10px 3px;
     text-decoration: none;
     color: #000;
     background: #E9E9E9;
     -moz-border-radius: 2px;
     -khtml-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
     border: dotted 1px #000;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#blog-pager a:visited, .pagenavi a:visited {
     color: #000;
}
#blog-pager a:hover, .pagenavi a:hover {
     color: #000;
     background: #FFF;
     border: 1px dotted #000000;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px dotted #000000;
    color: #000000;
    text-decoration: none;
}
.pagenavi .pages, .pagenavi .current {
     font-weight: bold;
}
.pagenavi .pages {
     color: #000;
     background: #FFF;
     border: 1px dotted #000000;
}

  • Kemudian Cari kode </body> dan masukan kode berikut tepat diatas kode </body>

<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/>
<div class='clear'/>
</div>

  • Setelah itu tekan tombol Pratinjau dan lihat hasilnya. 
  • Simpan template

Sebenarnya masih banyak variasi dalam membuat page navigasi ini, dengan penerapan yang sama tetapi beda dalam kodenya. Berikut ini cara membuat page navigasi(variasi) dengan kode berbeda :

Cari kode ]]></b:skin> dan letakan kode berikut tepat diatas kode ]]></b:skin>



/* -- NUMBER PAGE NAVIGATION -- */
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}

Kemudian cari kode </body> dan letakan kode berikut diatas kode </body>

 <!-- PAGE NAVIGATION START-->
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord =&#39;&#171; &#39;;
var downPageWord =&#39; &#187;&#39;;
</script>
<script src='http://anakbaik-projek1.googlecode.com/files/page_num.js.txt' type='text/javascript'/>
 <!-- PAGE NAVIGATION END-->

Keterangan :

var pageCount=4; (Jumlah postingan yang akan ditampilkan)
var displayPageNum=4; (Jumlah tombol angka navigasi)
Kemudian cari kode  'data:label.url'  dan ganti kode tersebut menjadi 

 

 'data:label.url + &quot;?&amp;max-results=7&quot;'

Semoga Bermanfaat.

Salam Blogger

26 komentar:

  1. Pertamaxxxxxxxxxxx..........


    sya simpan dulu tutorial nya ya sob

    BalasHapus
  2. wahm, mantep Mas, ngeblog sekalian membatu yang lain....

    BalasHapus
  3. Mantaaab pak tutorialnya :)
    Mampir blog saya pak, ada sesuatu yang spesial khusus buat bapak :)

    salam,

    BalasHapus
  4. menarik nih sob tutornya... :)
    ijin coba ya :)

    BalasHapus
  5. ahirnya,, keren keren sob, mau tak pasang di blogku satunya, makasih ya..

    BalasHapus
    Balasan
    1. silahkan sob, jadi pengin liat hasil kreasi diblog sobat

      Hapus
    2. belum bisa sob aku terapkan di catatankampuz sob..

      Hapus
    3. coba sobat cari keberadaan data:newerPageTitle,data:olderPageTitle dan data:homeMsg

      Hapus
  6. bolehlah ana koleksi dulu kode widgetnya,
    suatu saat nanti bisa dicoba

    BalasHapus
  7. wah mantap nich tutorialnya, bang punyaku ko tag nya ga bisa di klik ya?

    BalasHapus
    Balasan
    1. mungkin salah di pengisian tagnya sob, coba ulangi lagi berdasarkan label

      Hapus
  8. wah mantap nich tutorialnya, bang punyaku ko tag nya ga bisa di klik ya?

    BalasHapus
    Balasan
    1. wah kedoubel pertanyaannya nih, coba diisi lagi berdasrkan label sob

      Hapus
    2. ga bisa bang, alamat tujuan udah bener tapi ktika di simpen alamatnya jadi javascript:; ga bisa di klik

      Hapus
    3. tetapi pas aku ngecek ke tempat sobat sudah bener sob

      Hapus
  9. kak kalo posting yang masalah tutorial minta demo dong . maklum aku belum paham beginian . thx ya.

    BalasHapus
    Balasan
    1. makasih buat sarannya miz tia nanti saya perbaiki

      Hapus
  10. udah dibenerin ya
    kalo buat navigasi yg berwrna gimana.

    BalasHapus
    Balasan
    1. udah dong itu berkat saran miztia

      untuk yang berwarna cari kode
      background nah disini bisa diganti dengan kode terserah sobat,
      misalnya background: #E9E9E9, sobat ganti dengan background: #D9D9D9
      atau color: #000 diganti color :#abcdef

      Hapus
  11. mau coba bang . kalo keliru bisa dibantu ya.

    BalasHapus
    Balasan
    1. silahkan miz tia, kalau ada pertanyaan contact saya aja, saya akan bantu semampu saya

      Hapus

Sebelum berkomentar baca dulu aturannya :

1. Jangan melakukan spam. Seperti mencantumkan link tertentu, baik link hidup atau link mati
2. Berkomentarlah dengan sopan,
3. Jangan menyinggung masalah SARA.


Jika ternyata melakukan tersebut diatas Admin berhak menghapus komentar tersebut. Harap dijadikan maklum

Silahkan mengisi komentar anda.

Terimakasih

 
AnakBaik © 2012 Enjoy Share With Us. |Tim Kreatif AnakBaik | Indahnya Berbagi AnakBaik