Membuat Navigasi Halaman Versi Terbaru

Sekarang saya ingin membahas tentang Membuat Navigasi Halaman yang indah sekali. Navigasi Halaman ini dibuat versi terbaru dan dapat mendukung lebih dari 500 halaman.

Sobat pasti tertarik dengan Navigasi Halaman Ini. Mari kita menuju ke tip dan triknya dibawah ini.

Langkah 1: Terapkan Style

• Login ke Dashboard Blogger dan arahkan ke Layout> Edit Html

• klik atau centang kotak kecil yang ada tulisan "Expand Template Widget"

• Cari ini kode ]]></b:skin>

• Untk mencarinya sobat tinggal tekan Ctrl + F

• Kalau sudah ketemu kode tersebut.

• Copy Paste kode dibawah ini tepat di atas 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/AVvXsEj7gyeeqxygBx6tOwBbeO11sV2tsEynNBgoIrhFnUgNQcK-tRrnbgYm8NkUN5AZs01L3HW9nj7r3iMRZqmyrjhewhsOBHGdyrz7YM95kzCitVfNaR0c4T9d_Re90jH7qD1ZHhe5DPVO5is/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 2: Terapkan Javascript

• Cari kode ini : </body>

• Setelah sobat menemukan kode tersebut, Copy Paste kode dibawah ini dan taruk di atasnya kode </body>

<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'/>

Ubah berdasarkan pengaturan blog Anda:
Var postPerPage = 7;
numshowpage var = 6;

Post Per Page: Berapa banyak Post setiap Halaman untuk blog Anda
Num Show Page: Banyak cara nomor akan muncul pada halaman Anda Navigasi

Langkah 3: 
Customize Label jika anda sudah menggunakan Halaman Navi sebelumnya menggunakan langkah ini

Buka halaman Edit HTML dan "Expand Template Widget"
Cari kode ini : 'data:label.url'

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