-->

Cara Membuat Page Navigasi di Bloger

- August 01, 2017
advertise here
advertise here
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
Cara Membuat Page Navigasi di Bloger, detiktutor.blogspot.co.id
3. Kemudian Cari kode ]]></b:skin> dan pastekan kode CSS DI ATAS ]]></b:skin>

Advertisement advertise here
Nah berikut adalah beberapa kode CSS Navigasi yang recomend buat kamu
 

Navigasi 1

Cara Membuat Page Navigasi di Bloger, detiktutor.blogspot.co.id
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
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: 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
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{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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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 »';

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 + "?&amp;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

:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
$-)
(y)
x-)
(k)
 

Start typing and press Enter to search