Cara Membuat Navigasi Nomer Halaman KEREN pada Blogger

Cara Membuat NavigasiNomer Halaman KEREN pada Blogger

Untuk membuat widget ini Anda hanya melakukan 2 langkah:

1. Menambhakan CSS

2. Menambahkan Script

1. Cara menambahkan CSS

1. Masuk Ke BLOGGER DASHBOARD >> TEMPLATE >> EDIT HTML.

2. Cari kode ]]> </ b: skin> danpastekan kode CSS   diatas ]]> </ b: skin>

Navigasi style # 1

Catatan : Jika Anda tidak ingin memiliki NEXT dan PREVIOUS halaman Anda bisa menambahkan kode CSS dibawah ini, Anda tambahkan diatas kode ]]> </ b: skin> yang tadi .

.firstpage, .lastpage {display: none;}

2.Langkah berikutnya menambahkan kode SCRIPT

1. Cari kode </ body> gunakan (Ctrl + F) agarlebih cepat dalam pencarian kodenya .

2. Jika sudah ketemuletakkan kode SCRIPT dibawah ini diatas kode </ body>

lihat gambar dan serta kode ya
Navigasi style 1

Kode css style 1

# Blog-pager {clear: both; margin: 30pxauto; text-align: center; padding: 7px;}

.blog-pager {background: none;}

.displaypageNum a, .showpagea, .pagecurrent {padding: 3px 7px; margin-right: 5px; background: # E9E9E9; color: # 888; border: 1px solid # E9E9E9;}

.displaypageNum a: hover, .showpagea: 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;}

Navigasi style 2

kode css tylse 2

# Blog-pager {clear: both; margin: 30px auto; text-align: center; padding: 7px;}

.blog-pager {background: none;}

.displaypageNum a, .showpage a, .pagecurrent {padding: 5px10px; margin-right: 5px; color: # F4F4F4; background-color: # 404042; -webkit-box-shadow: 0px 5px 3px -1px rgba (50, 50, 50,0.53); - moz-box-shadow: 0px 5px 3px -1px rgba (50 , 50, 50, 0.53); box-shadow: 0px5px 3px -1px rgba (50, 50, 50, 0.53);}

.displaypageNum a: hover, .showpage a: hover, .pagecurrent {background: # EC8D04; text-decoration: none; color: #fff;}

# Blog-pager .showpage, # blog-pager, .pagecurrent {font-weight: bold; color: # 000;}

 .showpageOf {display: none! important}

# Blog-pager .pages {border: none; -webkit-box-shadow: 0px 5px3px -1px rgba (50, 50, 50, 0.53); - moz-box-shadow: 0px 5px 3px -1px rgba (50, 50 , 50, 0.53); box-shadow: 0px 5px 3px -1px rgba (50, 50, 50, 0.53);}

Navigasi style 3

Kode css style 3 # blog-pager {clear: both; margin: 30px auto; padding: 7px; text-align: justify; font-size: 11px; background-image: -webkit-gradient (linear, left bottom, left top, color-stop (0, # 000000), color-stop (1, # 292929)); background-image: -o-linear-gradient (top, # 000000 0%, # 292929 100%); background-image: -moz-linear-gradient (top, # 0000000%, # 292929 100%) ; background-image: -webkit-linear-gradient (top, # 000000 0%, # 292929 100%); background-image: -ms-linear-gradient (top, # 000000 0%, # 292929100%); background- image: linear-gradient (to top, # 000000 0%, # 292929 100%); padding: 6px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

.blog-pager {background: none;}

.displaypageNum a, .showpage a, .pagecurrent {padding: 3px10px; margin-right: 5px; color: #fff;}

.displaypageNum a: hover, .showpagea: hover, .pagecurrent {background-image: -webkit-gradient (linear, left bottom, lefttop, color-stop (0, # 59A2CF), color-stop (1, # D9EAFF)) ; background-image: -o-linear-gradient (top, # 59A2CF 0%, # D9EAFF 100%); background-image: -moz-linear-gradient (top, # 59A2CF 0%, # D9EAFF 100%); background -image: -webkit-linear-gradient (top, # 59A2CF 0%, # D9EAFF 100%); background-image: -ms-linear-gradient (top, # 59A2CF 0%, # D9EAFF 100%); background-image : linear-gradient (to top, # 59A2CF 0%, # D9EAFF 100%); text-decoration: none; color: # 000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border- radius: 3px;}

.showpageOf {display: none! important} .blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}

a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}

# Blog-pager .pages {border: none; background: none;}

Navigasi style 4

Kode css style 4

# 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: 5px12px; 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 style 5

Kode css style 5 # blog-pager {clear: both; margin: 30px auto; text-align: center; padding: 7px; }

.blog-pager {background: none;}

.displaypageNum a, .showpage a, .pagecurrent {font-size: 13px; padding: 5px 12px; margin-right: 5px; color: # 3E5801; background-color: # E0EDC1;}

.displaypageNum a: hover, .showpage a: hover, .pagecurrent {background: # FEF6DF; text-decoration: none; color: # E16800;}

# Blog-pager .pagecurrent {font-weight: bold; color: # D25E71; background: #FFDEDF;}

 .showpageOf {display: none! important}

# Blog-pager .pages {border: none;}

Navigasi style 6

Kode css style 6 # blog-pager {clear: both; margin: 30px auto; text-align: center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a, .showpage a, .pagecurrent {font-size: 13px; padding: 5px 12px; margin-right: 5px; color: # AD0B00; background-color: # FAB001;}
.displaypageNum a: hover, .showpage a: hover, .pagecurrent {background: # DB4920; text-decoration: none; color: #fff;}
# Blog-pager .pagecurrent {font-weight: bold; color: #fff; background: # DB4920;}
 .showpageOf {display: none! important}
# Blog-pager .pages {border: none;}

Navigasi style 7

Kode css style 7 # 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;}

Catatan : Jika Anda tidak ingin memiliki NEXT dan PREVIOUS halaman Anda bisa menambahkan kode CSS dibawah ini, Anda tambahkan diatas kode ]]> </ b: skin> yang tadi .

.firstpage, .lastpage {display: none;}

2.Langkah berikutnya menambahkan kode SCRIPT

1. Cari kode </ body> gunakan (Ctrl + F) agarlebih cepat dalam pencarian kodenya .

2. Jika sudah ketemuletakkan kode SCRIPT dibawah ini diatas kode </ body>

<B: if cond = 'data: blog.pageType! = "Item"'>
<B: if cond = 'data: blog.pageType! = "Static_page"'>
<Script type = 'text / javascript'>
  / * 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>
  <scriptsrc = " http://helplogger.googlecode.com/svn/trunk/page-navigation2.js " />
</ B: if>
</ B: if>

pengaturan
var perPage = 7 ; : Jumlah Halaman
    var numPages = 6 ; : Jumlah Halaman Yang Ingin Di Tampilkan
    var firstText = ' First '; -
    var lastText = ' Last '; -
    var prevText = ' « Previous '; : Tombol Sebelum nya
    var nextText = ' Next »'; : Tombol Selanjutnya

Categories: Artikel