Tutor membuat Page Navigation "Widget by Abu-farhan"
Hello IT Loverz,,
Di sore yang membosankan ini (-_-") daripada saya bengong, mending saya share sedikit tutor jadul ini,
Mungkin dari beberapa Bloggers udah pada tau ini tutor, tapi disini saya hanya ingin share untuk para Newbie yang seperti saya ini :D
Tutor kali ini saya akan membahas tentang bagaimana cara membuat Page Navigation "Widget by Abu-farhan". bagi sebagian Bloggers pasti tau apa siapa itu Abu-farhan, jika belum silahkan klik saja ini ==> Abu-farhan <== itu website beliau.
Oke deh langsung aja ya,
Oops... Hampir lupa, sebaiknya backup dulu template yang anda gunakan, agar jika terjadi hal-hal yang tidak diinginkan atau ada error anda bisa mengembalikannya seperti semula.
==> Cara Pasang Navigasi Halaman <==
Login ke blogger
Klik Rancangan/Design, kemudian klik menu Edit HTML (bagi pengguna blogger tampilan baru langsung ke tab Template saja)
Beri centang pada bagian Expand Template WidgetCari kode berikut :
</body>
Jika kode tersebut sudah dapat silakan pasang kode berikut di atas kode </body> tadi
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 anda pasang lagi.
Sekarang cari kode ini :
'data:label.url'
Kemudian ganti kode tersebut dengan kode ini :
'data:label.url + &quot;?&amp;max-results=10&quot;'
Sekarang cari kode :
]]></b:skin>
Jika sudah dapat silakan pasang kode css berikut tepat di atasnya, kemudian simpan pengaturan template anda :
Nah sekarang tinggal Save dan lihat hasilnya ^_^
Maka hasilnya akan terlihat seperti ini :
Semoga bermanfaat ya, di tunggu komennya :)
Di sore yang membosankan ini (-_-") daripada saya bengong, mending saya share sedikit tutor jadul ini,
Mungkin dari beberapa Bloggers udah pada tau ini tutor, tapi disini saya hanya ingin share untuk para Newbie yang seperti saya ini :D
Tutor kali ini saya akan membahas tentang bagaimana cara membuat Page Navigation "Widget by Abu-farhan". bagi sebagian Bloggers pasti tau apa siapa itu Abu-farhan, jika belum silahkan klik saja ini ==> Abu-farhan <== itu website beliau.
Oke deh langsung aja ya,
Oops... Hampir lupa, sebaiknya backup dulu template yang anda gunakan, agar jika terjadi hal-hal yang tidak diinginkan atau ada error anda bisa mengembalikannya seperti semula.
==> Cara Pasang Navigasi Halaman <==
Login ke blogger
Klik Rancangan/Design, kemudian klik menu Edit HTML (bagi pengguna blogger tampilan baru langsung ke tab Template saja)
Beri centang pada bagian Expand Template WidgetCari kode berikut :
</body>
Jika kode tersebut sudah dapat silakan pasang kode berikut di atas kode </body> tadi
<
code
>&lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;
&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;</
code
>
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 anda pasang lagi.
Sekarang cari kode ini :
'data:label.url'
Kemudian ganti kode tersebut dengan kode ini :
'data:label.url + &quot;?&amp;max-results=10&quot;'
Sekarang cari kode :
]]></b:skin>
Jika sudah dapat silakan pasang kode css berikut tepat di atasnya, kemudian simpan pengaturan template anda :
.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
(http://
4
.bp.blogspot.com/_McxL-_
3
YYuM/TBG_pY-zi
5
I/AAAAAAAAAAs/NhvUZ
3
iOFe
4
/s
1600
/wp
4
.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
(http://
4
.bp.blogspot.com/_McxL-_
3
YYuM/TBG_pY-zi
5
I/AAAAAAAAAAs/NhvUZ
3
iOFe
4
/s
1600
/wp
4
.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
(http://
4
.bp.blogspot.com/_McxL-_
3
YYuM/TBG_pY-zi
5
I/AAAAAAAAAAs/NhvUZ
3
iOFe
4
/s
1600
/wp
4
.jpg)
0
0
repeat-x
;
text-decoration
:
none
;
}
.showpageOf{
margin
:
0
8px
0
0
;
}
Nah sekarang tinggal Save dan lihat hasilnya ^_^
Maka hasilnya akan terlihat seperti ini :
Semoga bermanfaat ya, di tunggu komennya :)
0 komentar:
Posting Komentar