Cara Menciptakan Tombol Widget Next Page Pada Blog

Cara Membuat Tombol Widget Next Page pada Blog

Salam Blogging, Kali ini aku akan membuatkan tips  Cara Membuat Navigasi Nomer Halaman KEREN pada Blogger. Nomor halaman bantu-membantu fungsinya sama dengan navigasi (Next page atau page Previeous) biasanya ini yaitu default atau bawaan dari templatenya.

Namun kali aku akan mencona menciptakan Navigasi pada halaman dengan merubah (next dan previous) menjadi sebauah navigasi halaman ber-nomer

Cara Membuat Navigasi Nomer Halaman KEREN pada Blogger

Untuk menciptakan widget ini Anda hanya melaksanakan 2 langkah :

1. Menambhakan CSS

2. Menambahkan Script

1. Cara  menambahkan CSS

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

2. Cari arahan ]]></b:skin> dan pastekan arahan CSS  diatas ]]></b:skin>

Navigasi style # 1

Kode css style #1

#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;}

Navigasi style # 2

Kode css style #2

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

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;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: 0px 5px 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 5px 3px -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:center;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, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);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: 3px 10px;margin-right:5px; color: #fff;}

.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,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: 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 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 menampilkan NEXT dan PREVIOUS halaman Anda dapat menambahkan arahan CSS dibawah ini, Anda tambahkan di atas arahan ]]></b:skin> yang tadi.

.firstpage, .lastpage {display: none;}

2. Langkah berikutnya menambahkan arahan SCRIPT

1. Cari arahan </body> gunakan ( Ctrl+F ) supaya lebih cepat dalam pencarian kodenya.

2. Jika sudah ketemu letakkan arahan SCRIPT dibawah ini diatas arahan </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://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>

</b:if>

</b:if>

Keterangan : Anda dapat meng-EDIT arahan dibawah ini sesuai selera

    var perPage=7; 

    var numPages=6; ( panjang nomer halaman 1-6 )

    var firstText ='First'; 

    var lastText ='Last';

    var prevText ='« Previous';

    var nextText ='Next »';

Pada umumnya standart default tampilan per halaman blogger yaitu maksimal 20 halaman, Jika Anda ingin merubahnya :

>> Cari arahan ini pada HTML Template : expr:href='data:label.url'

>> Tambahkan arahan menjadi ibarat ini : expr:href='data:label.url + "?&;max-results=7"'

Keterangan : 7 yaitu tampilan jumlah posting per halaman.

3. Langkah terakhir SAVE TEMPLATE

Deminkian tips Cara Membuat Navigasi Nomer Halaman KEREN pada Blogger, Jika ada problem dengan ini silahkan isikan keluhan sobat blogger pada kolom komentar, InsyaAllah akan aku mebalasnya. Terima Kasih

https://edu.paperplane-tm.site