Page Navigation sangat berguna juga untuk menguatkan Internal Linking karena menghubungkan setiap artikel. Baiklah tanpa basa basi lagi, Berikut tahap-tahap Tutorial Cara Membuat Halaman Navigasi Blog Dengan Nomor.
1. Login ke akun blogger sobat seperti biasa dan pilih blog yang akan dibuat halamna navigasi dengan nomornya.
2. Masuk ke menu template lalu ke edit html
3. Cari kode ]]></b:skin> menggunakn fungsi CTRL + F
4. Setelah kode diatas sobat temukan, copas kode dibawah ini tepat dibawah kode ]]></b:skin> tadi.
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
5. Cari kode </body> lalu copas kode berikut dibawah kode body tadi.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=7;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=7;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>
6. Terakhir, save template dan lihat hasilnya!
Nah, itu adalah satu style pilihan saya yang berwarna putih dengan kombinasi warna biru, jika sobat ingin melihat 6 style atau model gaya Page Navigation yang lain sobat lihat artikel How To Add Numbered Page Navigation Widget For Blogger
Setting Pengaturan
Jika sobat ingin mengubah pengaturan nya silahkan ikut tutorial dibawah ini.
- PerPage : Berapa banyak artikel yang akan ditampilkan pada setiap halaman (7). Jika sobat ingin mengubah pengaturan ini maka sobat juga harus menyesuaikan nya dengan pengaturan Post dibagian Setting Blogger nya agar bisa bekerja dengan baik.
- NumPages : Jumlah halaman yang ditampilkan pada Page Navigation (6).
- Silahkan ganti First, Last, << Previous Dan Next >> sesuai dengan keinginan sobat.
Baikalah sobat semua, Mungkin itu saja yang dapat saya jelaskan tentang Cara Membuat Halaman Navigasi Blog Dengan Nomor 7 Style, Semoga artikel ini bermanfaat dan berguna buat sobat semua, Apabila ada yang sobat kurang paham silahkan bertanya ke saya di kolam komentar, Apabila saya tidak sibuk akan langsung saya balas, Terima Kasih.
0 comments:
Posting Komentar