Setelah sebelumnya saya posting tentang Page navigation dengan efek css3 itu bagian pertama sekarang yang bagian ke dua. yang kedua ini tampilan gaya baru minimalis sih tapi keren. kira - kira seperti di bawah ini tema Page Navigasinya.
Nah itu dia temanya sekarang mari langsung kita bahas cara mengaplikasikannya di blog kita.
1. Masuk di dashboard blogger
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Klik Prooced / lanjutkan
5. Centang Expand Template Widget
6. Cari kode di bawah ini
1. Jika blog menggunakan bhs indonesia
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
2. Jika blog menggunakan bhs inggris
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Pilih kode sesuai dengan bahasa yang anda gunakan di blog anda.
7. Jika sudah ketemu kodenya, lalu anda masukan lagi kode di bawah ini Tepat di bawah kode yang di atas
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«" }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>8. Anda cari lagi kode seperti di bawah ini
<b:include name='nextprev'/>
Setelah anda temukan kodenya, silahkan anda ganti kodenya dengan kode di bawah ini
<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:else/> <b:if cond='data:blog.pageType == "item"'> <b:include name='nextprev'/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <b:include name='nextprev'/> </b:if> </b:if> </b:if> </b:if>
9. Sekarang tinggal menyimpan kode Css, Cari kode
]]></b:skin> Setelah ketemu simpan kode di bawah ini di atas kode tersebut./* Css Page Navigasi */
.pagenavi{
margin: auto;
text-align: center;
width: auto;
}
.pagenavi span,.pagenavi a{
/*linear-gradient*/
background: -webkit-gradient(linear,left top,left bottom,color-stop(rgba(255,255,255,1),0.01),color-stop(rgba(247,247,247,1),1));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(247,247,247,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 );
display: inline-block;
margin-right: -3px;
margin-top: 0;
padding: 10px 15px;
text-decoration: none;
border-right: 1px solid #ccc;
color: #959190;
}
.pagenavi a:hover,.pagenavi .current{
/*box-shadow*/
color: #000;
background: rgb(229,229,229);
/*linear-gradient*/
background: -webkit-gradient(linear,left top,left bottom,color-stop(rgba(229,229,229,1),0),color-stop(rgba(255,255,255,1),0.99));
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 99%);
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 99%);
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 99%);
background: linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(99%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 99%);
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 99%);
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 99%);
background: linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
}
.pagenavi .pages,.pagenavi .current{
font-weight:bold
}
.pagenavi .pages{border:none}
/* css pageNav Berakhir */
Udah deh beress. anda tinggal klik Pratinjau jika ok silahkan Simpan Template.
Tutorial ini dapat dari blog paul santosh Saya Hanya mengedit di bagian Kode html navigasi nya saja, karena pada tutorialnya paul santosh Blog pager / Navigasi Halamannya akan hilang jika kita sedang membaca artikel karena disana kode html navigasinya hanya seperti ini.
<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>
Jadi aku tambahkan lagi kodenya biar Blog pager / navigasi halaman default blogger muncul jika kita sedang membaca sebuah artikel. jadi Older post dan Newer post akan tetap muncul di halaman posting gitu maksudnya. oh iya coba anda lihat kode warna
biru pada kode javascript, itu adalah kode javascript yang di hosting di Google code dan pemiliknya itu rilwis itu kayaknya namanya hehehe nah jika anda ingin meng_Hosting sendiri kode javascriptnya di bawah ini saya kasi source kodenya,function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();Silahkan simpan sendiri di hostingan anda kodenya.
