Merubah navigasi Halaman berurut

Hai semuanya :D senang bisa jumpa kembali dalam acara resep resep blog oleh Dr.Revarius.. nah kali ini agak sedikit berbeda nih yang mau dibahas.. untuk pertama kalinya dr.revarius mau kasih kode nih.. minjem istilahnya si pencuri kode.. tentunya teman teman tau kan biasanya di blog kita di bagian bawah ada tu tulisan yang Older post gitu kan?? nah bagaimana caranya mengganti tulisan itu menjadi urutan nomor halaman jadi blog kita di ibaratkan sebagai lembar majalah yang bisa kita buka per halaman.. seperti contoh gambar disamping... yuk disimak resep resepnya ntar jangan lupa di tebus ya di apotik Edit HTML blogger anda :D hehheheh


Sebenarnya ada beberapa versi dari kode untuk membuat navigasi halaman berurut namun untuk pembahasan kali ini kita akan memakai versi Amanda Fazani yang kira kira hasilnya adalah seperti ini

Jika anda ingin membuat versi lainnya (Versi Blogger Accessories) bisa anda lihat diSini atau di Sana

Baiklah Untuk Versi Amanda Fazani ini adalah langkah-langkahnya:

Tambahkan Kode CSS ke Bagian Styles di template anda

Copy kode di bawah ini dan masukkan sebelum tag </b:skin> pada template anda

showpageArea {font-size: 11px; width:470px;background: url(http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg) no-repeat left top; padding-top:10px;padding-bottom:10px;padding-right:15px;padding-left:30px; color:#003366;text-align:left;
}
.showpageArea a {
color:#0F0;
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
color:#0F0;
border:1px solid #FFF;
margin:0 10px;
padding:0 5px 0 8px;
}
.showpageNum a:hover {
color:#FE8314;
border:1px solid #0071A5;
background-color:#FFF;
}
.showpagePoint {
color:#FE8314;
margin:0 8px 0 4px;
}
.showpage a {
text-decoration:none;
color:#FFF;
padding:0 2px 0 4px;
}
.showpage a:hover {
color:#FE8314;
text-decoration:underline;
} .showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#cc0000;
}

Ini bertujuan untuk merubah warna text dan link pada penomoran halaman agar sesuai dengan gaya yang ada dalam template anda. jadi jika text anda adalah putih dengan latar belakang hitam,maka "nomor halaman" juga akan muncul seperti itu. warna dari background dan efek hover dari penormoran halaman ini dapat anda rubah sesuka anda dengan mengedit kode warnanya agar sesuai dengan template anda.

Tambahkan Kode JavaScript di bawah Post

Langkah Kedua adalah pemasangan kode javascript berikut di bawah blog post anda dengan tujuan menggantikan link "newer post/older post" sekarang silahkan menuju ke dashboard anda lalu ke Layout-Edit HTML.. sebelumnya jangan lupa untuk membackup template anda.. untuk pemasangan kode javascript ini lebih baik jangan centang kotak expand widget template..

kemudian cari kode di bawah ini:

<b:section class='main' id='main'

showaddelement='yes'> <b:widget id='Blog1' locked='false'

title='Blog Posts' type='Blog'/> </b:section>

Kemudian setelah tag </b:section> tambahkan script berikut:

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;

var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;

var thisLable = isLablePage ?

thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length)

: &quot;&quot;;

thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ?

thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) :

thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= &#39;&#39;;

var upPageHtml =&#39;&#39;;

var downPageHtml =&#39;&#39;;

var pageCount = 5;

var displayPageNum = 5;

var upPageWord = &#39;Previous&#39;;

var downPageWord = &#39;Next&#39;;

var labelHtml = &#39;&lt;span

class=&quot;showpageNum&quot;&gt;&lt;a

href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=&#39;&#39;){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

postNum++;

htmlMap[htmlMap.length] =

&#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

}

}//end if(post.category){

itemCount++;

}

}else{

if(title!=&#39;&#39;){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

if(title!=&#39;&#39;) postNum++;

htmlMap[htmlMap.length] =

&#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

itemCount++;

}

}

for(var p =0;p&lt; htmlMap.length;p++){

if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

if(fFlag ==0 &amp;&amp; p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

upPageHtml = &#39;&lt;span

class=&quot;showpage&quot;&gt;&lt;a

href=&quot;/&quot;&gt;&#39;+ upPageWord

+&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}

}else{

upPageHtml = &#39;&lt;span

class=&quot;showpage&quot;&gt;&lt;a

href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+

upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}

fFlag++;

}

if(p==(thisNum-1)){

html += &#39;&lt;span

class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;

}else{

if(p==0){

if(isLablePage){

html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

html += &#39;&lt;span

class=&quot;showpageNum&quot;&gt;&lt;a

href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;

}

}else{

html += &#39;&lt;span

class=&quot;showpageNum&quot;&gt;&lt;a

href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+

(p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}

}

if(eFlag ==0 &amp;&amp; p == thisNum){

downPageHtml = &#39;&lt;span

class=&quot;showpage&quot;&gt; &lt;a

href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+

downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

eFlag++;

}

}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){

if(!isLablePage){

html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;

}else{

html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;

}

}

html = &#39;&lt;div

class=&quot;showpageArea&quot;&gt;&lt;span

style=&quot;COLOR: #000;&quot;

class=&quot;showpageOf&quot;&gt; Pages

(&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){

html += downPageHtml;

}

if(postNum==1) postNum++;

html += &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName(&quot;pageArea&quot;);

var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){

html =&#39;&#39;;

}

for(var p =0;p&lt; pageArea.length;p++){

pageArea[p].innerHTML = html;

}

if(pageArea&amp;&amp;pageArea.length&gt;0){

html =&#39;&#39;;

}

if(blogPager){

blogPager.innerHTML = html;

}

}

}

&lt;/script&gt;

&lt;script

src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;;

type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

Jika kode diatas tidak berhasil pada template anda maka silahkan coba copy paste dari sini karena kode diatas tidak bisa langsung di aplikasikan pada semua template...silahkan copy paste dari Sini

Setelah anda menambah kode tersebut silahkan melihat preview template anda untuk memastikan tidak ada kode yang error. anda tidak akan bisa melihat script ini bekerja dalam preview tetapi langkah ini memastikan bahwa tidak ada efek berlawanan pada layout anda

pada baris ke 5 anda perlu merubah kata "com" untuk mengindikasikan ekstension domain anda jika anda menggunakan custom domain.

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

Instalasi ini secara default sudah cocok untuk pengguna layanan hosting di blogspot maupun domain dot.com namun anda perlu merubah bagian itu jika domain anda adalah dot.info ataupun dot.org atau yang lainnya

pada kode diatas di baris ke 19 dan 20 yang bercetak merah menunjukkan berapa posting yang akan ditunjukkan per halaman dan berapa banyak nomor halaman yang tampil (misalnya 1-2-3-4-5 dan seterusnya). anda dapat memodifikasinya sendiri sesuai dengan kebutuhan.

Setelah anda menambahkan script yang tadi jangan lupa untuk save template anda dan lihatlah blog anda.. sekarang sudah mempunyai link halaman navigasi berurut di bawah bagian halaman utama post anda..

link halaman navigasi berurut ini juga bisa dilihat pada bagian label ataupun archive post anda...