Digital Hamireland | Cara Membuat Widget Navigasi Halaman - Pada kesemaptan kali ini saya akan berbagi tutorial cara membuat navigasi nomer halaman yang SANGAT KEREN. Nomor halaman sebenarnya fungsinya sama dengan navigasi ( Next page atau page Previeous ) biasanya ini adalah default atau bawaan dari templatenya.
Namun kali saya akan mencoba membuat Navigasi pada halaman dengan merubah ( next dan previous ) menjadi sebauah navigasi halaman ber-nomer, mari kita simak dengan baik.
Cara Membuat Widget Navigasi Halaman Nomor Keren Pada Blogger
Untuk membuat widget ini Anda hanya melakukan 2 langkah :
1. Menambahkan CSS.
2. Menambahkan Script.
1. Cara menambahkan CSS
1. Masuk Ke BLOGGER DASHBOARD >> TEMPLATE >> EDIT HTML.
2. Cari kode ]]></b:skin> dan pastekan kode CSS diatas ]]></b:skin>
2. Cari kode ]]></b:skin> dan pastekan kode CSS diatas ]]></b:skin>
Navigasi 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
#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
#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
#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
#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;}
Note : Jika Anda tidak ingin menampilkan NEXT dan PREVIOUS halaman Anda bisa menambahkan kode CSS dibawah ini, Anda tambahkan di atas kode ]]></b:skin> yang tadi.
.firstpage, .lastpage {display: none;}
2. Langkah berikutnya menambahkan kode SCRIPT
1. Cari kode </body> gunakan ( Ctrl+F ) agar lebih cepat dalam pencarian kodenya.
2. Jika sudah ketemu letakkan kode SCRIPT dibawah ini diatas kode </body>
2. Jika sudah ketemu letakkan 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'>
/*<![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 : Anda bisa meng-EDIT kode 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 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"'
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 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"'
Keterangan : 7 adalah tampilan jumlah posting per halaman.
3. Langkah terakhir SAVE TEMPLATE
Demikian Cara Membuat Widget Navigasi Halaman Dengan Nomor Keren pada Website Semoga dengan adanya tutorial ini kalian mengerti dan semoga website ini bermanfaat untuk kalian semua ^0^
Comments