Selamat datang NEWBIEHOUSE. Semoga apapun yang saya share disini, bermanfaat bagi IT Loverz semua... SALAM SUKSES !!!

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

<code><script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script></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 + "?&max-results=10"'

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-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.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-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.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-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.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