Cara Menerapkan Page Navigator Scroll dan Number Pada Blog
Langkah 1Copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>
.paginator{margin:0 10px 0 -8px;font-size:1em} .paginator table{border-collapse:collapse;table-layout:fixed;width:100%} .paginator table td{white-space:nowrap;text-align:center;padding:0} .paginator span{display:block;color:#fff;padding:3px 0} .paginator span strong{padding:2px 6px;} .paginator span a{padding:2px 6px;color:#888} .paginator span a:hover{background:#ccc;color:#000} .paginator span strong{background:#878773;font-style:normal;font-weight:400} .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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ-f9wFKpfAmuI716rIijDfISnwFfTQZh7BRKMorkEjvR8DPND0bS3bHkK4TcorSEr9ysifQmbXDoeiGqf-aAlDSTEdi4eGneJ7uY4UwgWdx2k9xJwXpdo-DI1vhGX59lhxzvtKFERlu3m/s1600/slider_knob.gif) no-repeat 50% 50%;cursor:pointer} .paginator .current_page_mark{position:absolute;z-index:1;top:0;left:0;width:0;height:3px;overflow:hidden;background:#878773} .fullsize .scroll_thumb{display:none} .paginator_pages{width:600px;text-align:right;font-size:.8em;color:gray;margin-top:-10px}
Langkah 2
Perhatikan contoh kode di bawah ini, biasanya ada di bawah halaman blog :
<div class='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
.......................................
.......................................
.......................................
</b:widget>
</b:section>
Simpan kode pemanggilnya di sini!
</div>
Kode pemanggil :
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script src='http://yourjavascript.com/222106553/page-scroll.js' type='text/javascript'/> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=8; var numshowpage=6; </script> <script src='http://yourjavascript.com/354622140/page-scroll-blogger.js' type='text/javascript'/> </b:if> </b:if>
Agar dapat berjalan baik, sesuaikan jumlah postperpage dan homepage.
Angka 8 = jumlah post per halaman
Angka 6 = jumlah angka halaman.
Angka 8 = jumlah post per halaman
Angka 6 = jumlah angka halaman.
Page navigator ini responsive dan valid HTML5.
Untuk keamanan silahkan hosting ulang js-nya dengan akun masing-masing.
Untuk keamanan silahkan hosting ulang js-nya dengan akun masing-masing.
Sumber :http://www.kompiajaib.com/2013/10/membuat-page-navigator-blog-dengan.html
wah blog br kang :-D
ReplyDeleteIya kang.. blog ini khusus buat belajar ajah :)
DeleteKerrreenn kang blog na.. artikelnya jga kereen2... :-d
ReplyDeleteMakasih Mas. hanya repost ajah kok...
DeleteKalau begitu saya juga mau ikutan belajar di blog baru ini.... heheee
ReplyDeleteSilahkan Mas Adjie Umbara, mari kita belajar sama sama.
DeleteBungkus dulu kang!kapan2 bisa di coba.nuhun!
ReplyDeleteSekarang juga gak apa apa Kang agus.
DeleteKali kali utak atik kode jangan software terus :)
Asa rada baru yeuh blogna hehe ...
ReplyDeletekalau artikelnya suport aja ya ... kereennn
Baru Kang ,, kanggo arsip he..
DeleteMakasih Kang :)
tambah keren z blog nya gan...
ReplyDeleteWah biasa ajah kok he..
Deletelebar banget komennya.. enak, ringan, prlu di cb ni model pulpage gini...
ReplyDelete[ijin ngintip code nya mas]
Ngak usah ngintip nanti bintitan he... Templatenya ada di blog DTE, yang pasti ringan banget.
DeleteNice blog :D
ReplyDeletegituh ya cara buatnya, untung saya mah udah disediain sama yang m'bikinin template nya jadi ngga usah repot lagi....ilmunya tak simpen buat dipasangin di blog saya yang laen yang lebih keren dari blog desa ah.
ReplyDeletesepertinya jadi makin keren ya mas tampilan navigasi nya, bungkus dulu mas dan makasih atas tutor Page Navigator Blog Dengan Scroll dan Number
ReplyDelete