Cara Membuat Page Navigasi Nomor Dengan Fungsi Scroll

Monday, 12 December 2011

Bagi para blogger pemula seperti saya sendiri.Dulunya juga agak bingung apa itu Page Navigasi dengan Nomor.Tapi Alhamdzulillah sekarang dikit-dikit taulah, Makanya saya share di blog saya ini. Page Navigasi sangatlah dibutuhkan bagi kamu yang sudah memiliki banyak posting, jadi pengunjung akan lebih mudah buat melihat posting kita yang sudah agak lama dan yang baru. Okelah mungkin sobat blogger sudah cukup jelas apa itu Page Navigasi dan apa fungsinya, sebetulya banyak style Page Navigasi tapi disini saya akan share Cara Membuat Page Navigasi Nomor Dengan Fungsi Scroll, lihat SS di bawah ini :

1. Login Blogger>Rancangan>Edit HTML.

2. Backup dulu template kamu buat jaga-jaga kalau gagal.

3. Centang kotak Expand Template Widget.

4. Cari kode ]]></b:skin> biar lebih mudah Ctrl+F.

5. Taruh kode dibawah ini tepat diatas kode ]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii9LfHxuAJ4FHxutgaT359tVxNEJl7udnIIeywlG3A2Q67oa4r7lkH6Ef0zRSkgPjOSpFqrzBn7tri-_1z0njS3QZMuWUyZbsSyIJMpCw5eE20oZfMJF3Ll_GqA1KwGZY26M-R8DKov0U/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;
}

6. Selanjutnya cari kode </body> copy paste kode dibawah ini tepat di atas kode </body> .

7. Terakhir cari kode 'data:label.url' dan ganti dengan kode dibawah ini lalu Save Template.

'data:label.url + "?&max-results=7"'

Silahkan dicoba semoga berhasil...!!ada kesulitan bisa hubungi saya atau tulis komentar dibawah.

Blog

5 comments

download13 December 2011 at 20:54
ooh gono yah...ribet yah.
lo liat blog gw dong
http://ciptadownloads.blogspot.com/
download13 December 2011 at 20:57
lo liat blog gw dong
http://ciptadownloads.blogspot.com/
madani14 December 2011 at 11:28
Ah itu punya lo ma dah dari templatenya.bikin blog lagi ko
Camping Pramuka Smanab With KKR At Pasar Agung Temple17 December 2011 at 17:33
tak coba dulu... hehehe
semoga berhasil!!
madani18 December 2011 at 18:21
thanks telah berkunjung keblog ini jngan lupa mampir

Cara Membuat Page Navigasi Nomor Dengan Fungsi Scroll

Related Post

5 comments