Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.


proBlogiz

Page Navigasi atau halaman navigasi merupakan kebutuhan semua blogger untuk membuat visitor/pengunjung lebih mudah menjangkau semua artikel/postingan yang ada di blog. Ada banyak jenis atau style page navigasi ini, nah...salah satunya, favorit saya juga adalah Slider Page Navigasi.
Slider Page Navigasi adalah Numbered Page Navigation Widgets yang didesain dengan fitur line/garis slider, mirip fungsi scrolling pada area sekitar nomor-nomor halaman yang aktif. Desainya sederhana namun cantik, seperti contoh gambar dibawah ini :

Slider Page Navigasi

Page navigasi yang satu ini bisa dibilang unik dan keren, dengan support lebih dari 500 post memang tidak sia-sia jika dipasang di blog. Banyak jenis atau style page navigasi blogger berhadapan dengan masalah kemampuan menampilkan post/artikel yang lebih dari 500 postingan, namun dengan Page Navigasi dengan fitur Scroll ini, masalah  itu dapat diatasi.

Thanks to Abu Farhan, kita dapat menggunakan widget ini secara gratis dan leluasa, asalkan jangan menghapus atau edit script dan link yang ada.

Pasang Slider Page Navigasi di Blog

Langkah Pertama : Pasang CSS Scroll Page Navigasi di Template

Masuk Blogger > Template > edit HTML
Check “Expand Widget Templates” box
Tekan Control + F
Cari tag ]]></b:skin>
Copy kode CSS berikut dan letakkan diatas tag ]]></b:skin>

.paginator { margin-top:60px; font-size:1em; } .paginator table { border-collapse:collapse; table-layout:fixed; width:100%; } .paginator table td { padding:0; white-space:nowrap; text-align:center; } .paginator span { display:block; padding:3px 0; color:#fff; } .paginator span strong, .paginator span a { padding:2px 6px; } .paginator span strong { background:#ff6c24; font-style:normal; font-weight:normal; } .paginator .scroll_bar { width:100%; height:20px; position:relative; margin-top:10px; } .paginator .scroll_trough { width:100%; height:3px; background:#ccc; overflow:hidden; } .paginator .scroll_thumb { position:absolute; z-index:2; width:0; height:3px; top:0; left:0; font-size:1px; background:#363636; } .paginator .scroll_knob { position:absolute; top:-5px; left:50%; margin-left:-10px; width:20px; height:20px; overflow:hidden; background:url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/s1600/slider_knob.gif) no-repeat 50% 50%; cursor:pointer; cursor:hand; } .paginator .current_page_mark { position:absolute; z-index:1; top:0; left:0; width:0; height:3px; overflow:hidden; background:#ff6c24; } .fullsize .scroll_thumb { display:none; } .paginator_pages { width:600px; text-align:right; font-size:0.8em; color:#808080; margin-top:-10px; }

Langkah Kedua: Penerapan Javascript

Cari kode </body>
Gantikan dengan kode scirpt berikut :

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</body>

Kostum :
Rubah angka-angka tersebut, sesuai dengan Setting blog post Anda
var postperpage=7;
var numshowpage=6;
Postperpage : jumlah postingan yang ditampilkan di halaman blog/web
Numshowpage : jumlah nomor page navigasi yang ingin ditampilkan

Langkah Ketiga : Penerapan pada Label

Cari kode
'data:label.url'

Dan gantikan dengan kode baru ini :
'data:label.url + &quot;?&amp;max-results=7&quot;'

Sesuaikan max-results=7 dengan Setting blog post Anda, jumlah postingan yang ditampilkan di halaman blog/web.

Selesai!!
Sekarang Anda Save Template
Dan lihat  tampilan baru blog Anda dengan Slider Page Navigasi Style

Good Luck!!

Javascript and CSS by Abu Farhan
Update : script telah dihapus oleh Abu Farhan

Artikel Terkait Lainnya:
Click here for comments

7 komentar

izin nyoba di blog saya gan, mantab tutorialnya. maklum saya masih newbie. trim's.

REPLY

makasih tutorialnya, coba saya tes dulu.

REPLY

Kenapa di tempat saya tidak bisa mohon di cek --> ramadhansk.blogspot.com

REPLY

maaf saya baru check juga, ternyatan script dari AbuFarhan didelete mas
wah coba nanti saya cari solusinya

REPLY

gan cara membuat slideshow gambar berganti ganti dengan timer bagaimana ?
makasih

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|