Advertisement
Halo Gadgeters, terkadang kita melihat navigasi blog kita hanya sebatas "older post" dan "newest post" saja tetapi pada tutorial kali ini Saya ingin memberi suatu hal yang berbeda dari hal tersebut, yak Gadgeters akan mendapatkan navigasi yang tidak hanya di atas saja tetapi ada angka [seperti yang kita mau]
 |
| Page Navigation |
yuk langsung ke tutorialnya saja monggo di simak ya gadgeters:
1. Penambahan CSS, Template >> edit HTML (Cari ]]></b:skin> gunakan ctrl+f untuk mempermudah)
2. Keudian pilih gaya navigasi yang anda inginkan, ada 3 gaya gadgeters silahkan dipilih seperti yang gadgeters inginkan
STYLE 1
 |
| Style 1 |
.page-navigation{clear:both;margin:30px auto;text-align:center;}
.page-navigation span,.page-navigation a{padding: 3px
7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid
#E9E9E9;}
.page-navigation a:hover,.page-navigation .current{background:#CECECE;text-decoration:none;color: #000;}
.page-navigation .pages,.page-navigation .current{font-weight:bold;color: #888;}
.page-navigation .pages{border:none;}
STYLE 2
 |
| Style 2 |
.page-navigation{clear:both;margin:30px auto;text-align:center;}
.page-navigation span,.page-navigation a{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);}
.page-navigation a:hover,.page-navigation .current{background:#EC8D04;text-decoration:none;color: #fff;}
.page-navigation .pages,.page-navigation
.current{font-weight:bold;color: #fff;-webkit-box-shadow: inset 0px -1px
2px 0px rgba(50, 50, 50, 0.69);-moz-box-shadow:inset 0px -1px 2px 0px
rgba(50, 50, 50, 0.69);box-shadow:inset 0px -1px 2px 0px rgba(50, 50,
50, 0.69);}
.page-navigation .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);}
STYLE 3
 |
| Style 3 |
.page-navigation{clear:both;margin:30px
auto;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;}
.page-navigation span,.page-navigation a{padding: 3px 10px;margin-right:5px; color: #fff;}
.page-navigation a:hover,.page-navigation .current{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;}
.page-navigation .pages{border:none;background: none;}
2. Langkah selanjtunya penambahan script
Cari (
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> ) untuk mempermudah silahkan gunakan ctrl+f ya gadgeters supaya tidak bingung hehehehe
Kemudia tambahkan kode berikut di bawah kode tadi
<b:includable id='page-navi'>
<div class='page-navigation'>
<script type=
'text/javascript'>
var pgNavigConf = {
perPage:
7,
numPages:
6,
firstText: "
First",
lastText: "
Last",
nextText: "
Next",
prevText: "
Prev"
}
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/page-navigation.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>
6. Langkah selanjutnya
cari kode di bawah dengan ctrl+f
<!-- navigation -->
<b:include name='nextprev'/>
gantikan dengan kode di bawah
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>
jika tidak menemukan kode di atas cari kode di bawah
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
...
<b:includable id='main
' var='top'>
...
</b:includable>
</b:widget>
</b:section>
letakan kode di bawah di atas kode </b:includable>
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>
Pengaturan:
var pgNavigConf = {
perPage:
7,
numPages:
6,
firstText: "
First",
lastText: "
Last",
nextText: "
Next",
prevText: "
Prev"
}
7 = Ganti dengan postingan yang akan di munculkan
6 = Ganti dengan angka navigasi yang anda inginkan
First, last, prev, next = ganti jika anda menghendakinya gadgeters
kemudian langkah terkahir save dan lihat hasilnya mudah bukan gadgeters?
Advertisement