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;
}
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: "First",
lastText: "Last",
nextText: "»",
prevText: "«"
}
</script>
<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/>
<div class='clear'/>
</div>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«"
}
</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}
.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 ='« ';
var downPageWord =' »';
</script>
<script src='http://anakbaik-projek1.googlecode.com/files/page_num.js.txt' type='text/javascript'/>
<!-- PAGE NAVIGATION END-->
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord ='« ';
var downPageWord =' »';
</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 + "?&max-results=7"'
Semoga Bermanfaat.
Salam Blogger
Pertamaxxxxxxxxxxx..........
BalasHapussya simpan dulu tutorial nya ya sob
wahm, mantep Mas, ngeblog sekalian membatu yang lain....
BalasHapusiya sob sekalian bagi bagi ilmu
HapusMantaaab pak tutorialnya :)
BalasHapusMampir blog saya pak, ada sesuatu yang spesial khusus buat bapak :)
salam,
ok sob, saya kerumah sobat
Hapusmenarik nih sob tutornya... :)
BalasHapusijin coba ya :)
silahkan dicoba sob
Hapusahirnya,, keren keren sob, mau tak pasang di blogku satunya, makasih ya..
BalasHapussilahkan sob, jadi pengin liat hasil kreasi diblog sobat
Hapusbelum bisa sob aku terapkan di catatankampuz sob..
Hapuscoba sobat cari keberadaan data:newerPageTitle,data:olderPageTitle dan data:homeMsg
Hapusbolehlah ana koleksi dulu kode widgetnya,
BalasHapussuatu saat nanti bisa dicoba
monggo disimpan sob
Hapuswah mantap nich tutorialnya, bang punyaku ko tag nya ga bisa di klik ya?
BalasHapusmungkin salah di pengisian tagnya sob, coba ulangi lagi berdasarkan label
Hapuswah mantap nich tutorialnya, bang punyaku ko tag nya ga bisa di klik ya?
BalasHapuswah kedoubel pertanyaannya nih, coba diisi lagi berdasrkan label sob
Hapusga bisa bang, alamat tujuan udah bener tapi ktika di simpen alamatnya jadi javascript:; ga bisa di klik
Hapustetapi pas aku ngecek ke tempat sobat sudah bener sob
Hapuskak kalo posting yang masalah tutorial minta demo dong . maklum aku belum paham beginian . thx ya.
BalasHapusmakasih buat sarannya miz tia nanti saya perbaiki
Hapusudah dibenerin ya
BalasHapuskalo buat navigasi yg berwrna gimana.
udah dong itu berkat saran miztia
Hapusuntuk 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
mau coba bang . kalo keliru bisa dibantu ya.
BalasHapussilahkan miz tia, kalau ada pertanyaan contact saya aja, saya akan bantu semampu saya
Hapus