Hai.. Kembali lagi nih di detik tutor.. Kali ini detir tutor akan membahas tentang bloger.. Cara membuat page number/page navigasi di bloger.. Nah tau gak sih apa itu page navigasi? Page nafigasi berfungsi sebagai penunjuk halaman pada blog kita.. Nah biasanya ketika kita punya template/ganti template pasti ada kok page numbernya.. namun Template bawaan dari bloger tidak memiliki page navigasi.. Biasanya para bloger yang udah ahli dan bisa script/mengubah kode kode nih.. para bloger akan mencari cara gimana tampilan blognya berbeda dengan yang lain.. yah ini dengan page navigasi yang berbeda salah satunya.. Nah pingin tau cara membuat page navigasi? yuk simak dibawah..
1. Login ke akun bloger kamu.
2. Kemudian langsung menuju ke Tema kemudian edit HTML
Cara Membuat Page Navigasi di Bloger, detiktutor.blogspot.co.id |
Advertisement
Navigasi 1
Cara Membuat Page Navigasi di Bloger, detiktutor.blogspot.co.id |
Kode css
#blog-pager{clear:both;margin:30px auto;text-align:center;
padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size:
12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee;
border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover,
.pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
Navigasi 2
Cara Membuat Page Navigasi di Bloger, detiktutor.blogspot.co.id |
#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;}
Navigasi 3
Cara Membuat Page Navigasi di Bloger, detiktutor.blogspot.co.id |
#blog-pager{clear:both;margin:30px
auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage
a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color:
#888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage
a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager
.pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}
Nah untuk langkah terakhir nih
1. Cari kode </body> gunakan ( Ctrl+F ) agar
lebih cepat dalam pencarian kodenya.
2. Jika sudah ketemu
letakkan kode SCRIPT dibawah ini DI ATAS kode </body>
<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://www.geocities.ws/usmankurniawan/pagenation.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://www.geocities.ws/usmankurniawan/pagenation.js"/>
</b:if>
</b:if>
Keterangan : kamu
bisa Edit kode dibawah ini sesuai selera
var perPage=8;
var numPages=7; ( panjang nomer halaman 1-8 )
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var numPages=7; ( panjang nomer halaman 1-8 )
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
Pada umumnya standart default tampilan per halaman blogger
adalah maksimal 20 halaman, Jika Anda ingin merubahnya :
>> Cari kode ini pada HTML Template : expr:href='data:label.url'
>> Tambahkan kode menjadi seperti ini : expr:href='data:label.url
+ "?&max-results=7"'
Nah setelah itu save template kamu deh.. Gimana.. coba cek.. udah berubah kan.. Kamu bisa mendapatkan skrip css diatas dari google.. banyak banget kok kode page navigasi yang keren buat blog kamu.. Saya ini pake template bawaan page navigasinya.. Namun jika kamu pengen merubah gaya page navigasi kamu.. kamu tinggal pilih deh kode diatas.. Selamat mencoba ya.. terimakasih sudah berkunjung.. Jangan lupa like fanspagenya ya..
EmoticonEmoticon